MERN stack travel app using mapbox API, Travel and drop pin , share reviews and rate the location

Overview

MERN-Travel-Map


Logo

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

Logo

  • Login

Logo

  • Pin a location

Logo

  • Review & Rating

Logo

  • Preview all locations on the map

Logo

(back to top)

Built With

For front end

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

  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

(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)

You might also like...

Implements the tilelive API for generating vector tiles from PostGIS

tilelive-postgis Implements the tilelive API for generating mapnik vector tiles from PostGIS. Installation npm install @mapbox/tilelive tilelive-postg

Dec 12, 2022

:ukraine: A self-hosted app for keeping track of employee wellbeing and dislocation during the Russo-Ukrainian war, with an interactive map.

:ukraine: A self-hosted app for keeping track of employee wellbeing and dislocation during the Russo-Ukrainian war, with an interactive map.

Helping organizations stay together and help their members in times of disaster On February 24th, 2022, the lives of the entire Ukrainian nation were

Dec 15, 2022

Serverless raster and vector map tile generation using Mapnik and AWS Lambda

tilegarden 🗺️ 🌻 Contents About Usage Deployment to AWS Additional Configuration Options Required AWS Permissions Features Configuration Selection an

Dec 22, 2022

This is the leaflet plugin for GeoServer. Using this plugin user can have access to wms and wfs request easily.

This is the leaflet plugin for GeoServer. Using this plugin user can have access to wms and wfs request easily.

Documentation leaflet-geoserver-request This is the plugin for Geoserver various kind of requests. Using this plugin, we can make WMS, WFS, getLegendG

Dec 15, 2022

WMS server using node-mapnik

landspeed.js A simple WMS server written in node.js Only supports WMS 1.1 GetMap requests (bbox, width, height, and srs). Requirements Node.js 0.10.x

Jul 21, 2022

3D web map rendering engine written in TypeScript using three.js

3D web map rendering engine written in TypeScript using three.js

3D web map rendering engine written in TypeScript using three.js

Dec 30, 2022

An online tool to generate and visualize maps for irregular and/or gapped LED layouts, for use with FastLED, Pixelblaze and other libraries.

An online tool to generate and visualize maps for irregular and/or gapped LED layouts, for use with FastLED, Pixelblaze and other libraries.

An online tool to generate and visualize maps for irregular and/or gapped LED layouts, for use with FastLED, Pixelblaze and other libraries.

Dec 8, 2022

The NASA WorldWind Javascript SDK (WebWW) includes the library and examples for creating geo-browser web applications and for embedding a 3D globe in HTML5 web pages.

Web WorldWind New versions of WorldWind released Web WorldWind 0.10.0 and WorldWind Java 2.2.0 are now available on GitHub. The new version of Web Wor

Jan 1, 2023

geotiff.js is a small library to parse TIFF files for visualization or analysis. It is written in pure JavaScript, and is usable in both the browser and node.js applications.

geotiff.js is a small library to parse TIFF files for visualization or analysis. It is written in pure JavaScript, and is usable in both the browser and node.js applications.

geotiff.js Read (geospatial) metadata and raw array data from a wide variety of different (Geo)TIFF files types. Features Currently available function

Dec 21, 2022
Owner
Bùi Quốc Trọng
A passionate backend developer from CTU
Bùi Quốc Trọng
Draw tools for mapbox-gl-js

@mapbox/mapbox-gl-draw Adds support for drawing and editing features on mapbox-gl.js maps. See a live example here Requires mapbox-gl-js. Compatible v

Mapbox 750 Jan 2, 2023
Mapbox Visual for Power BI - High performance, custom map visuals for Power BI dashboards

Mapbox Visual for Microsoft Power BI Make sense of your big & dynamic location data with the Mapbox Visual for Power BI. Quickly design high-performan

Mapbox 121 Nov 22, 2022
Vuejs 2 components for interacting with mapbox-gl-js

VueMapbox Combine powers of Vue.js and Mapbox Gl JS Vue-mapbox is wrapper around Mapbox GL JS library that provides vueish-way to interact with the ma

Alex 425 Dec 26, 2022
Demo of Singapore buildings 3D tiles from OneMap on Mapbox GL JS.

Singapore buildings 3D Tiles from OneMap 3D on Mapbox GL JS This is a demo of Singapore buildings 3D tiles from OneMap 3D on Mapbox GL JS. Development

Chee Aun 5 Nov 6, 2021
(IDW) Interpolated Heatmap Layer for mapbox-gl

Mapbox :: Interpolated Heatmap(s) InterpolateHeatmapLayer is a minimalist JavaScript library for rendering temperature maps (or interpolate heatmaps)

Vinayak Kulkarni 13 Dec 15, 2022
Simple location picker on Leaflet map

Leaflet Location Picker Simple location picker with Leaflet map Usage: <label>Insert a Geo Location <input id="geoloc" type="text" value="" /> </lab

Stefano Cudini 37 Nov 17, 2022
A web based data mining tool for OpenStreetMap using the Overpass API.

overpass turbo https://overpass-turbo.eu/ – stable version https://tyrasd.github.io/overpass-turbo/ – latest version This is a GUI for testing and dev

Martin Raifer 607 Dec 29, 2022
This map is tracking the position of ISS(international space setallite) at every 1 second. I use Nasa's "where the iss" API and "Leaflet.js" for the map.

ISS-tracking-map About This map is tracking the position of ISS(international space setallite) at every 1 second. I use Nasa's "where the iss" API and

Waz.sheeran 2 Oct 25, 2021
React friendly API wrapper around MapboxGL JS

react-map-gl | Docs react-map-gl is a suite of React components designed to provide a React API for Mapbox GL JS-compatible libraries. More informatio

Vis.gl 6.9k Jan 2, 2023
Node.js REST API for PostGres Spatial Entities. AKA: SpatialServer

PGRestAPI (a.k.a. Chubbs Spatial Server) Overview Node.js REST API for PostgreSQL Spatial Tables. An introduction to PGRestAPI can be found here A few

SpatialDev 429 Dec 9, 2022