FFHS school project - motoapp

---

Tech Stack used for this project:

MERN Stack

---

What does this application do?

Users can sign up and get access to a map, that shows popular motorcycle routes.

---

Current state of the application:

• User registration implemented
• Login implemented
• JWT token implemented
• Map implemented with controls
• Display pre-defined routes mapped to buttons
• Get Route directions via external API call
• Backend with handlers implemented
• Running MongoDb using mongoose framework
• Persisting data to MongoDb

Not yet implemented:

• Displaying route on map using the data from the external API call
• Final styling of the frontend
• Displaying route information under user profile

---

Installation with docker image

• Clone repo
• Make sure you are in the root folder of the project - Build image with docker build -t marc/backend (or whatever name you wanna use)
• cd ffhs-moto-app (that is where the frontend REACT application is)
• docker build -t marc/frontend (or whatever name you wanna use)
• Now that both images have been built, you can run them with docker-compose up
• Once everything is running, you can start the browser with http://localhost:2000/

Regular installation on local machine

• Make sure you are in the root folder of the project --> npm install
• cd ffhs-moto-app (that is where the frontend REACT application is) --> npm install
• Start the REACT application with npm start (Make sure you are in ffhs-moto-app folder of the project)
• Start the Backend with npm start
• Open browser with http://localhost:2000/

Service Worker

ServiceWorker has been implemented for index.html with sw_cached_pages.js and sw_main.js. The sw_main.js registers the service worker, while the sw_cached_pages.js installs and activates the service worker. Thanks to the service worker (and the cache-build-up), index.html can be viewed offline.

Mockups

The mockups can be found here: https://ffhsrwm.invisionapp.com/freehand/WireFrame-Moto-Project-oRcGAEwCe