MERN-Travel-Map

Travel Map Pin

A single page application built with MERN Stack from scratch (MongoDB + Mongoose, Express, React & NodeJs)

Table of Content

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. Contributing
5. Contact

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:

• Register

• Login

• Pin a location

• Review & Rating

• Preview all locations on the map

(back to top)

Built With

For front end

• ReactJS v17.0.2

For the backend API

• NodeJS
• Express Framework
• Mapbox API

(back to top)

Getting Started

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.

Prerequisites

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.

Installation

1. Clone the repo and change to that folder

   git clone https://github.com/trongbui1105/MERN-Travel-Map.git

2. 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

   yarn start

3. 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

   yarn start

(back to top)

Usage

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.

(back to top)

Contributing

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!

(back to top)

License

MIT

(back to top)

Contact

Bùi Quốc Trọng

Facebook

Email

♥

(back to top)