Project-Mappinner-App

1. Project Overview

'Mappinner' is a multi page application using client-side routing.

The app allows the user to pin a location on an interactive map. The user can add a title and a description to every new pin created and also list all of the pins in the 'My Pins' page. When clicked on one of the listed pins, the app automatically directs the user to the pinned point on the map.

React-Map-GL library, Mapbox API and MongoDB/Mongoose are used in the project.

Built With

2. Getting Started

To get started simply clone the repo and install the dependencies in the root folder:

npm install

npm run setup

and run the app in the development mode:

npm run dev

then you could open http://localhost:3000 in the browser, if it wouldn't open automatically.

3. Project Goals:

3.1 Must-Haves

• Create the project structure.
• Create an interactive map page to be able to pin new locations.
• Create a 'My Pins' page to list all pinned locations.
• Connect to a public API (mapbox).
• Style the app based on the colour palette of a company/organisation.

3.2 Nice-to-Haves

• Connect to MongoDB to store and get the data of pinned locations.
• Add a delete feature to delete pinned locations from database.
• Testing.

4. Design

The color palette of Greenpeace is used in the project.

5. App Demo