Travel Map Pin
A single page application built with MERN Stack from scratch (MongoDB + Mongoose, Express, React & NodeJs)
About The Project
In this application, you can pin your location and share your reviews with other users.
The users can pin their favourite locations on the map to which the users can rate them, write some descripion about that place which other users can see.
Here are some of the basis functions:
- Pin a location
- Review & Rating
- Preview all locations on the map
For front end
For the backend API
This is an example of how you may give instructions on setting up your project locally.
To get a local copy up and running follow these simple example steps.
For the web application to work, you only need to have a knowledge about ReactMapGl. React App using the ReactMapGL component to use mapbox to display a map theme.
ReactMapGl component props that take from MAPBOX are: mapboxApiAccessToken and mapStyle.
Access key and mapStyle can be found once a MapBox account has been created where the access token will be visible at the bottom of the page. Mapstyle token can be found on Mapbox under Tools & resources, where Design in mapbox studio is selected to select a visual design theme and a code is then generated.
Clone the repo and change to that folder
git clone https://github.com/trongbui1105/MERN-Travel-Map.git
Install packages for the backend
- Move to backend folder
cd backend yarn install
- Update the MongoDB URL (You can see it in .env.example)
MONGO_URL = <ADD_YOUR_MONGODB_URL>
- Run the server
Install packages for the frontend
- Move to frontend folder
cd frontend yarn install
Get a free API Key from Mapbox at their website.
Update the API in “./frontend/.env” (You can see it in .env.example)
REACT_APP_MAPBOX = <YOUR_MAPBOX_API_KEY>
- Run the frontend server
As the introduction indicated, this is an app where you can register, log in then write a review and rating of places you have visited. Users can go on the app and see other user’s comments on the map.
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.
Don’t forget to give the project a star! Thanks again!
Bùi Quốc Trọng