Senior Design - Commuter Emissions

This project is a Stevens Institute of Technology Commuter Emissions Visulaizer created from as our Senior Design Project. We worked with the Office of Sustainability to collect commute information from faculty and students at Stevens Institute of Technology during the Fall 2023 to Spring 2024 semesters.

Contributers

• Shawn
• Harris
• Justin

Demo

Visualization

Metrics

Bar Chart	Pie Chart

Setup

Repo made using React + TypeScript + Vite

1. Clone Repo Locally (or fork)
2. In frontend, create .env file with your MapBox API key to be stored
   • reference the .env.example to see how to set it up
   • create a new .env file with the variable named VITE_MAPBOX_TOKEN (all env variables here must be prefixed with VITE)
3. In backend, create .env file
   • .env.example
   • enter valid key for GOOGLE_MAPS_DIRECTIONS_TOKEN
4. run docker compose up
   • starts the frontend and backend docker images with the app viewable on http://localhost:5173 and server running on http://localhost:3000

Resources

• React Mapbox Wrapper
• Figma Designs
• Reference NYC Taxi: Day in the Life and Github Repo

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

• Configure the top-level parserOptions property like this:

   parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: ['./tsconfig.json', './tsconfig.node.json'],
    tsconfigRootDir: __dirname,
   },

• Replace plugin:@typescript-eslint/recommended to plugin:@typescript-eslint/recommended-type-checked or plugin:@typescript-eslint/strict-type-checked
• Optionally add plugin:@typescript-eslint/stylistic-type-checked
• Install eslint-plugin-react and add plugin:react/recommended & plugin:react/jsx-runtime to the extends list