Routes

Mod 4 + Capstone

Table of Contents

• Abstract
• Technologies
• Illustrations
• Code Architecture
• Install + Setup
• Contributors
• Wins
• Challenges + Improvements
• Project Specs

Abstract

Routes is a responsive and interactive application designed for San Diego Medical Waste. Two users have access to the features of this application.

Drivers can view their driving route for the day optimized by our back-end team. Additionally, they can "mark-off" when a location's service is complete. Drivers also have administrative acess to add customer info to a certain day's route.

Customers can login and track their driver as well as update their service agreement.

Technologies

• React
• React Router
• Leaflet.js
• Leaflet-Routing-Machine
• React Reveal
• Cypress
• GraphQL API

Illustrations

Code Architecture

This project was bootstrapped with Create React App.

./src/Components

• Parent Components include App which renders a DriverDashboard and a CustomerDashboard

./src/utlil

• This directory houses API calls

./cypress/integration

• Testing files
• These can be run in the command line using npm run cypress

Setup

• View the deployed application here

Front-End Engineering Contributors

• Nate Sheridan
• Renee Swick-Ziller
• BE contributors can be found here

Wins

• Map Routing!

  • This was our first time integrating a dynamic map into an application. Learning and implementing leaflet.js and leaflet-routing-machine was a central goal of this project, and we were happy to get it up and running in conjunction with the Back-End team's API that provides route optimization.

• Architecture!

  • Creating an application with two different types of users posed an interesting problem for code architecture. The decision to create a parent component for the Driver and another for the Customer offers an opportunity to add more features for each user while maintaining their data in a thoughtful and logical manner.

Improvements

• User Authentication

  • Currently, the application is hard coded with a specific driver and a specific customer. In the future, the landing page would be a spot for any existing driver or customer through the implementation of authentication.

• Web Sockets

  • Future iterations would use a web socket for the customer to dynamically track their driver's approximated arrival time.

Project Specs

• The project spec & rubric can be found here