Giter Club home page Giter Club logo

realtimerail.nyc's Introduction

realtimerail.nyc

realtimerail.nyc is an open-source web app for the NYC subway. It displays train times based on realtime data from the MTA. The app's philosophy is to be very simple and 100% user-centric. No cookies, no tracking, no ads, etc.

This repository hosts the UI code. The app uses Transiter on the backend.

Contributions are very welcome!

Development guide

Assuming that you have node installed, the development build listing on port 3000 is launched using:

npm start

By default, all backend requests are proxied to staging.realtimerail.nyc so you don't need to run the backend yourself.

An optimized production build can be created using:

npm run build

However in production the app is deployed as a Docker image:

docker build .

The project's Docker image is an Nginx image containing the compiled files and some basic caching configuration.

Code layout

Each page in the app is a separate Typescript file in src/pages. Common UI elements are extracted and shared via in src/elements React hooks (for HTTP requests, loading favorites, GPS location) are in src/hooks. Non-React Javascript helper files are in src/lib.

Other files in the src directory are largely self-explanatory and generally don't need to be touched.

Formatting/linting/testing

Formatter: npx prettier . --write

Linter: npx eslint src

Tests: unfortunately almost non-existent. The few tests that exist can be run with npm test.

Backend

As mentioned above, all backend requests are proxied to staging.realtimerail.nyc. In general the app expects Transiter to be available at $DOMAIN/transiter/v0.6 and expects the NYC subway system to be installed in the Transiter instance with ID us-ny-subway. The transiter/v0.6 and us-ny-subway constants live in src/api/api.ts in case you want to change them.

License

MIT.

The icons used in the header are from Iconoir and are also MIT licensed.

The subway symbols are copyrighted by the MTA. The app has a license from the MTA to use them.

realtimerail.nyc's People

Contributors

jamespfennell avatar dependabot[bot] avatar bporter816 avatar kungpaogao avatar ashika-verma avatar evansobkowicz avatar

Stargazers

Santiago Yeomans avatar ticccco avatar Jeff avatar Oliver Dunkley avatar Daniel Hardesty Lewis avatar Anne Thorpe avatar  avatar Gabriel Stefanini Vicente avatar Stanley Cen avatar Danny Hertz avatar Kasey McFadden avatar Daniel M. Capella avatar Kenny Durkin avatar  avatar  avatar Zoë B avatar Kacy James avatar Indiscipline avatar Kevin Cabano avatar Franz avatar Michael Jovel avatar Sunny Singh avatar Selim Horri avatar Una Kravets avatar Sophie Mori avatar

Watchers

James Cloos avatar  avatar Daniel M. Capella avatar  avatar  avatar

realtimerail.nyc's Issues

Alerts don't render icons in titles

Icons are inserted for alert bodies but not titles. I tried to quickly call the same function on the title but this causes it to be the same size as the big icon at the top of the page, so this probably needs a little bit of custom styling.

Screenshot 2024-02-12 at 12 11 13 PM

Accessibility icons don't render in alert descriptions

The text "accessibility icon" is shown rather than the actual icon. Example:
Screenshot 2024-02-18 at 11 19 53 AM
Could be addressed by generalizing the replaceRouteIdsWithImages function but it may get messy since this doesn't follow the pattern of text to be replaced being surrounded by [...].

Transiter 0.5 work

Transiter 0.5 contains a number of breaking changes, and the app will need to be updated accordingly. Things to be handled include:

  • The Alerts format in the REST API is changing completely.

  • Transiter 0.5 will remove the aggregated "route status" feature. Instead, the list routes endpoint will contain all of the alerts for each route and consumers can aggregate these as they please. Using these alerts, we can calculate the status in the JS code.

  • Vehicle data will be completely different. TBD exactly how it will look.

Please make terminal trains distinct visually

Let me explain with an example:

When I take a quick look at eg whitehall station, brooklyn direction, I see on top of the lost the next train in 3 mins, for example.

But actually this is just the W train for which Whitehall is the terminal session. So it is easy to get confused and think the next train is in 3 mins, when in fact the next train is the second listed for brooklyn, eg the R in 7 mins.

Not a huge deal but I constantly get it wrong 🙂

I’m not sure what UX design would be best but it would help if somehow this gotcha was easy(er) to spot visually.

Apart from that, fantastic app! Thanks!!

Support listing nearby stations

Transiter supports finding nearby stations based on GPS location. We should add a feature to the app to support finding nearby stations.

I'm currently working on this in the location branch.

Routes missing colors

SIR, Rockaways shuttle, and Franklin Av shuttle are missing the colored stripe along the route. Looks like these are being derived from the values in the routes.txt file from the MTA, but the file doesn't provide colors for these routes. One solution could be adding default/fallback colors in the app.
Screenshot 2024-02-18 at 12 06 14 PM

Can I deploy the website myself?

Hi, I am exploring your project and trying to add some new features in. So I forked the repo and tried to deploy the forked repo onto a new url but it didn't work. I deployed on Netlify. Although Netlify says deployed sucessfully and the index page is indeed rendered, when I clicked into any route buttom it just says "backend error". Could you please help, thank you!
image

Direct station links don't work anymore

It works fine when navigating to a station's timetable from the home page. But when accessing with URL directly, it shows a blank page.

Reproduce:
Open https://realtimerail.nyc/stops/F02 in the browser directly.

Express trains appear as local trains

In the app express trains should have diamond route symbols, but they have the usual circular ones.

Fixing this should just involve updating the route logos in this directory - 5x.svg, 6x.svg etc. One issue is that the diamond route logos often look smaller than the circular ones, and may there is a way to tweak the image margins to fix this.

Myrtle Ave M/Z/J trains organized the wrong direction.

Huge fan of your web app. I've used it for several years in NYC. I recently moved to Bushwich Myrtle Ave M/Z/J stop. I kept missing the train to work and I couldn't figure out why.

This morning I realized your app had the direction of the M train reversed! The train listed under Manhattan is actually going away from Manhattan towards Brooklyn. The Manhattan-bound train is Forest Hills 71st. No wonder I kept missing it!

I haven't poked around in the source code, but I'd happy to make this change if I can find it. Thanks!

266189B4-BE0F-4BA7-B864-C8000613A9F7

(Sorry hit create too soon)

Add support for bookmarking/starring stops

Most users of the app, myself included, probably have a small number of subway stations we look in the app - e.g., subway stations near where we live. Would be nice if there was a way to star stations in the app, and then those starred stations would appear on the front page. The starred stations would just be stored in cookies.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.