Original Brief given here.

Link to figma wireframe and planning

Link to planing diagrams

10 Min Video Showcase for CodeClan

OpenSpacesApp Web App | Mongo, Java (Spring) and ReactJS

An App designed to help people find nice places to meet safely outside in Covid times. Built over the space of 5 days from planning to presentation.

Demo

TBC to deploy

Built using

Front-end

• ReactJS - React Frontend framework
• React Router - Library for general routing & navigation
• React Hook Form - Library for flexible & extensible forms
• Material-UI w/ lots of CSS customisations - UI library
• Leaflet.js - OpenSource MultiFramework compatible mapping solution.
• Auth0 - Library for outsourcing authetication by socials.

Back-end

• Java v8 - Java 8
• Spring Boot / MVC Mongo COnnection - Spring boot framework makes process of building APIs easier & faster
• MongoDB - Opens-source noSQL/Document database to store data

Features

• Authentication (login/register w/ username & passwordvia Auth0 and users socials)

• Once logged in abilty to filter your own rated, saved and created POI's

• CRUD functions for all, with ability to add POis of different types, comments, rating etc...

• Reuse of CRUD form and components, with switches and props to allow for differing functionality (for overall admin section).

• Ability for users to mark POI's for moderation

• Location aware design, with click and point to add POI.

• Fully responsive design, provided by MUI

• Loading spinners for fetching processes

• Dark mode toggle w/ local storage save

• Proper responsive UI for all screens

Screenshots

Animated

Static

Homepage:

Location Aware:

Side Drawer available to logged in users only:

Public main use overall filter:

Filter select your own, fav or rated POI's:

Client:

Cd into the client folder and install dependancies and run front end server for develpment:

cd frontend
npm install
npm start

Server:

Cd into the server folder and install dependancies and run server for develpment:

cd backend
update dependancies via pom.xml
run OpenspacesApplication.java

DB

This assumes a connection locally to mongoDB Database name: open_spaces Collecction: pois Run the poi-json-seed if you want to build a quick database.

mongodb://localhost:27017