MERN-Travel-Map


Logo

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:

  • Register

Logo

  • Login

Logo

  • Pin a location

Logo

  • Review & Rating

Logo

  • Preview all locations on the map

Logo

Built With

For front end

For the backend API

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
        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
    REACT_APP_MAPBOX = <YOUR_MAPBOX_API_KEY>
    • Run the frontend server
    yarn start

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.

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!

License

MIT

Contact

Bùi Quốc Trọng

Facebook

Email

♥

GitHub

View Github