Commute Crafter by Xeniya Shoiko (backend)

Mapping the Best NYC Living Spaces Within Your Commute Time. My linkedin

Screen.Recording.2023-04-11.at.9.14.43.PM.mov

And now it's deployed

Product Description

Commute Crafter is a nifty tool that visualizes all destinations reachable within a specific time frame in New York City, whether it's by foot or subway. It's perfect for selecting an apartment or job based on its location while still keeping your commuting time in mind.

Whether you are a seasoned commuter or a first-time user, this application can help you save time and make more informed decisions about your daily commute or travel plans.

Features and Usage Instructions

This application is designed to provide users with comprehensive usage instructions. For instance, by inputting your address and desired commute time up to an hour, you can click the "Go" button and the application will display all the areas in NYC you can reach within that specified time frame.

(!) The project has time constraints with minimum and maximum limitations. The API does not support requests for commute times exceeding 60 minutes, and I assumed a minimum walking time of 6 minutes for the start.

Prerequisites

Before you begin, make sure you have the following installed:

Node.js
MySQL

npm i mysql2 # to install MySQL
mysql -u <username> -p # Open MySQL in your terminal or command prompt

Development Environment Setup Guide

To install my app you have to clone this frontend repo
To install the server-side clone this backend repo
how to get to use in VS Code: open VS Code and navigate to a directory by drag-and-drop or:

File -> Open Folder

Get a MapBox API public key at Mapbox

Create a new file in the root of the project called .env. inside the project root file with your API key and other environment variables for both Front and Backend .env files
Front End .env.sample:

REACT_APP_SERVER_URL = http://localhost:8080
REACT_APP_MAPBOX_PUBLIC_TOKEN = <your public key>

Back End .env.sample:

PORT = 8080
ACCESS_TOKEN = <your public key>
DB_USER = <database username>
DB_PASSWORD = <database password>
DB_NAME = <database>

json Files required to run on a backend from a data folder in a root of a backend:

./data/sceleton_res.json # for layering Geometries in the future API calls
./data/nodes_nodup.json # to populate Nodes db table
./data/edges_nodup_rounded.json # to populate Edges db table

Once you have created these folders and files, you will have the following file structure:

├── server
||── controllers
│|── data
││├── sceleton_res.json
││├── nodes_nodup.json.json
││├── edges_nodup_rounded.json
...

The "migrate" script in a package.json file is a command that uses the Knex.js library to run database migrations. Migrations are a way to manage changes to your database schema over time, allowing you to version your database schema and apply changes in a controlled and repeatable way. All scripts are defined in my package.json file, you can easily run common commands and tasks for your Node.js application using the npm run command:

 npm run migrate # knex migrate:latest
 npm run migrate:down # knex migrate:down
 npm run migrate:rollback # knex migrate:rollback
 npm run seed # knex seed:run

Seed files are used to populate your database with initial data, such as default settings, test data, or user accounts allowing you to quickly set up test data or default settings. To tell the Knex.js library to run the database defined in my project seed files:

npm run seed # knex seed:run

I got the Data from Open source link and cleaned it up with Python, please email and ask for a cleaned-up file

Navigate to the directory where my app is located. Install the dependencies listed in my existing package.json files for the app, you can use this command for both front- and backend:

npm install

Create and select a database in mysql2

CREATE DATABASE <name_of_db>;
USE <name_of_db>;
exit

Add your database username and password into the .env of a server-side wich will be imported in a database configuration file knexfile.js

how to run the backend server

npm run dev # or
npx nodemon index # to start the Express server and watch it with nodemon

how to run the frontend React

npm start  # to start React

To see the server in action open your web browser and go to:

http://localhost:3000/map
# or
http://localhost:3000/

- Unexpected result in a browser? Try hard reload:

cmd + shift + R

Express API Reference

Endpoint for the frontend calls:

<host>/api/v1/destinations/commute-all

This takes a coordinate and returns setGeometry Promise<...> in a form:

{
  features: [ { properties: [Object], geometry: [Object], type: 'Feature' } ],
  type: 'FeatureCollection'
}

To extract latitude and longitude of provided by user address

Tech Stack

My application leverages dynamic data through the integration of a Subway database and the MapBox API, which are both utilized within an express server that I developed. This architecture provides users with real-time access to Subway data and location-based services through a reliable and scalable backend infrastructure.

React.js (JavaScript, JSX, HTML, SCSS)
Mapbox API
Express/Node with Axios and Knex libraries
MySQL
Data processing and clean up:
- Python, Pandas, Google Colaboratory: link to my duplicates reduction flow
- Public data link
Deployment: Vercel (frontend, backend), PlanetScale (database)

Lessons learned

Proper usage of React involves separating event handlers from the logic that handles state changes. This helps to keep the codebase organized, maintainable, and easy to debug. By separating these concerns, we as developers can focus on writing code that is both efficient and easy to maintain over time;
The project turned out to be more difficult than expected, wait for my postmortem on the project;
Calculating the distance between two points is complicated. The Earth is not flat, using Cos, Sin, Pi, and Degrees can be intimidating, and checking my math with extra pair of human eyes and calculators all over the internet was a necessity;
Dijkstra - my version of the shortest path algorithm is not efficient, but still worked really well. Entire process runs instantly locally. Using a less efficient version of the shortest path algorithm may still produce satisfactory results for small inputs or with large computational resources. However, even small differences in efficiency can have a significant impact on the overall performance of the system, especially for large inputs or limited resources. Therefore, it's generally better to use the most efficient algorithm available to ensure better performance of the system. (baseline for Dijkstra: O(|E| log |V|));
Whether you're using async/await or .then(), it's important to write your code in a way that doesn't accidentally create multiple execution contexts on the server side. This can be achieved by properly managing your async functions, avoiding infinite loops, and avoiding blocking the event loop;
DO NOT subscribe to a userInput state when making a 3rd party API call!
Deploying my React frontend, the database, and server across multiple parties proved to be an enjoyable challenge. Throughout the process, I had to make several modifications modifications to the successfully running locally project, including setting up multiple environments, implementing SSL, seeding the remote database, and deciding between using pwd or fs in order to maintain a consistent workflow for both development and production environments. You can find the link to the deployed project at the top.
suddenly my data files were not accessible to the deployment environment due to a path change in production, the solution was a process.cwd() - which returns a string that represents the current working directory. This can be useful when you need to access files or directories relative to the current working directory.

Next steps

pick an open-source license
account for time spent for transfer the trains
toggle express trains on and off
search within polygons to show accessibility and amenities (ER, hospitals, groceries, schools)
color code based on types of transport used, time, reach, etc.
support cyclingn, busses, ferry, LIRR, Metro North
sidewalks and intersections would go in there too for transfers
caching for Mapbox API responses
implementing functionality for placeholders for OAuth
to expand to calculate any region

kakun45 / xeniyas-Isochrone-back