Issue Tracking Map

React app created with UI5 Web Components, Google Maps and Context API for state management. Google Firebase is used for backend with data stored in Firestore.

Demo

Deployed on Heroku

Built using

Front-end

• ReactJS - Frontend framework
• Context API w/ hooks - State management
• UI5 Web Components - Fiori component library
• Google Maps API - Google Maps integration
• Geolocation API - Browser geolocation
• React Router - General routing & navigation
• Styled Components - UI styling library

Back-end

• Google Firebase - Backend development platform by Google
• Google Firestore - NoSQL document database

Features

• Authentication (login/register w/ username & password)
• OAuth with Google account
• View all open issues
• View and add comments on issues
• View location of issues on map
• Add new issue by selecting location on map

Screenshots

Desktop/Tablet

Mobile

Usage

Env variable:

Create a .env file in server directory and add the following:

REACT_APP_GOOGLE_MAPS_API_KEY = "your api key here"

Client:

Run client development server:

cd client
npm install
npm start