EcoRoute is a fullstack web application designed to help users make sustainable travel choices. With EcoRoute, users can view data on their trips’ greenhouse gas (GHG) emissions and track their progress over time. In addition to its emissions tracking features, EcoRoute also functions as a social platform where users can add friends and compare their emissions data, providing a fun and engaging way to promote sustainability.
EcoRoute was developed as a capstone project, combining the interests of civil and software engineering. The application uses a variety of technologies, including React, Flask, and PostgreSQL, to provide a seamless user experience.
- React
- JavaScript
- React Router DOM for Client-Side Rendering
- HTML/CSS
- Bootstrap for app design
- Flask
- Python
- PostgreSQL for database
- SQLAlchemy for ORM
- Clone this repository onto your local machine
- Install dependencies with
npm installandpip3 install - Create a PostgreSQL database
- Run the application with
npm startandpython3 server.py
Once you have the application up and running, create an account to get started. From there, you can add trips and view your emissions data. You can also search for other users and add them as friends to compare your emissions data. With EcoRoute, you can track your progress and work towards a more sustainable future!
The dashboard is the main page of the app. Here, users can view an overview of their travel data, including total miles traveled, current Air Quality Index (AQI) based on their location, and total GHG emissions. The dashboard also includes a button that triggers the add Trip form. The last tiles display the user’s recent trips, emissions history, and a leaderboard to compare emissions against their friends.
Adding a trip is a one-to-many relationship between users and trips. The Google Maps React library is used to register users' trips from point A to point B, and a formula from the Environmental Protection Agency is implemented to calculate the trip’s GHG emissions. After submitting the trip, users are redirected to the dashboard, where they can see their new data.
On the trips page, users can view all of their registered trips in a table and delete a trip if needed.
The next four pages are the “friend features,” which are achieved using a many-to-many self-referential relationship between user-to-user. On the feed page, users can view their friends’ added trips. On the add friend page, users can input an email to send a friend request. Users can view and respond to friend requests on the friend requests page. Finally, the view friends page displays all of a user’s friends.
On the account page, users can view all of their account information, and conditionally render the option to add or update a vehicle. There is a one-to-one relationship between a user and a vehicle, and the Fuel Economy API is used to find vehicle data. In the modal form, dynamically chained API calls generate the options for the next question to successfully add a vehicle to the account.