hazieon / vancation

Find those ideal van parking spots. Pin and save van parking spots on the map with a checklist of its features to save useful car-camping locations. Built in React.js, Node.js with a PostgreSQL database and uses the Google maps API

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

πŸš› Vancation: Vanlife pocket map

Vancation is an app for people living or travelling in their campervan or car. πŸš™πŸš›πŸšš Vanlifers pinpoint suitable parking spots on the map, selecting its qualities such as 'quiet', 'safe' and 'near green space' These markers are saved for other users to see and modify.

Developer MVP goals: πŸ’»

The MVP (minimum viable product) of this project will allow a user to create, view, update and delete markers set on Google maps. They will be able to centre the map to their own location, click on existing markers or create their own, saving some details with it. Users will check applicable qualities of the location of the marker on a checkbox list and be able to save it to the database.

Technologies & tools: ✎

For this app, I am using React.js with hooks on the front end with a Node.js server on the backend. The PostgreSQL database is deployed on Heroku with CI/CD. For the map, I brought in the Google maps API with some other functions such as reverse geocoding to lookup an address from the latitude and longitude values. I have never used Google maps API before, so this is a fun challenge! 🌎

How to use:

Add a new parking spot:

  1. click the exact point of the parking spot on the map.
  2. click 'get address' in the panel on the right hand side/below (desktop/mobile)
  3. click 'next' and check the boxes of the features this parking spot has to offer.
  4. click 'save'.
  5. REFRESH the page to view your new parking spot!

View parking spots:

  1. choose an area you would like to visit on the map.
  2. click a blue camper van icon image
  3. click 'x' to DELETE this van parking spot (please don't delete them all :D)
  4. click 'details' to view the address and details in the panel to the side/below.

Enjoy scouting out Vancation parking spots!

About

Find those ideal van parking spots. Pin and save van parking spots on the map with a checklist of its features to save useful car-camping locations. Built in React.js, Node.js with a PostgreSQL database and uses the Google maps API


Languages

Language:JavaScript 65.8%Language:CSS 28.4%Language:HTML 5.8%