Parking Sniffer is a project aiming to create a peer to peer parking space network to solve the issue of limited parking space in major cities.
- Background And Overview
- Technologies
- Features
- MERN Stack - User Authentication
- Functionality and MVP
- Bonus Features
A person to person parking app that connects users in an area that need parking, with the users in an area offering parking. App utilizes Google Maps API to allow searches in a set area. Owners of parking spaces set their own price and set restrictions on type of car and range of stay.
- MERN Stack: (Mongo, Express.js, React, Node.js)
- Google MAPS API
-
While logged in or out, anyone can search for nearby parking spots by inputting a zipcode and search distance. Users are then required to log in if they want to access further features - such as renting out their spots to users, storing their vehicle information, and creating parking reservations.
-
When logged in, a user's personal dashboard displays the parking spots they want to rent out and their current vehicle information. They can create more of these by clicking the links on the right side.
-
Want to lease your parking spot to others? Great! Just fill up this form and nearby renters will see your parking information. Fill in your address and click on the map to pinpoint exactly where your parking spot is. Use the Googlemaps satellite feature to show terrain details.
-
Did you find the parking spot you wanted to rent for.. a few days? weeks? months? Clicking on a specific parking spot will show you more of its information and you can book your reservation on the same page as well.
We used MongoDB and Express for our Backend Database and User Authentication. The syntax and architecture is much different compared to a Ruby on Rails, User Auth. For example, instead of having session controllers and utils, we used the following:
import axios from 'axios';
const setAuthToken = token => {
if (token) {
// Apply to every request
axios.defaults.headers.common['Authorization'] = token;
} else {
// Delete auth header
delete axios.defaults.headers.common['Authorization'];
}
};
export default setAuthToken;
export const SET_CURRENT_USER = 'SET_CURRENT_USER';
// sets current user
export const setCurrentUser = decoded => ({
type: SET_CURRENT_USER,
payload: decoded
});
// signs up user
export const createUser = (user, history) => dispatch => {
axios
.post('/api/users/register', user) // method, url, and data
.then(res => (history.push('/signin')))
.catch(error => dispatch({
type: ADD_ERRORS,
payload: error.response.data
})
);
};
// logs in user
export const loginUser = (user) => dispatch => {
axios
.post('/api/users/login', user)
.then(res => {
//save to local storage
const { token } = res.data;
// set token to local storage
localStorage.setItem('jwtToken', token);
// set token to auth header
setAuthToken(token);
// Decode token to get user data
const decoded = jwt_decode(token);
// Set current user
dispatch(setCurrentUser(decoded));
})
.catch(error => dispatch({
type: ADD_ERRORS,
payload: error.response.data
})
);
}
// log out user
export const logoutUser = () => dispatch => {
// Remove token from localStorage
localStorage.removeItem('jwtToken');
// Remove auth header for future requests
setAuthToken(false);
// Set current user to {} which will set isAuthenticated to false
dispatch(setCurrentUser({}));
};
- User authentication and validation. Users are both renters and sellers.
- Creating a property . Sellers will be able to publish details about their properties and also be able to set restrictions pertaining to the usage
- Search - utilizes Google Maps and integrates with our API for targeted search anywhere in the US.
- Renters will be able to filter and select parking spaces through the search and rent parking spaces according to their needs.
- The application will be seeded with data and deployed in heroku.
- Seller property authentication.
- Direction to sellers location though maps .
- Add boat spaces to type of property and allow renters to rent boat spaces for boats.