MERN-Travel-Map

Travel Map Pin

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

Table of Content

About The Project
- Built With
Getting Started
- Prerequisites
- Installation
Usage
Contributing
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:

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

(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

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
```
yarn start
```
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)