Public Transportation
Public Transportation App, an offline-first progressive web application built to allow user's to plan a trip by train in London, England.
Getting Started
The project uses NPM scripts along with Webpack.
The scripts can be referenced from my open source boilerplate project.
Installing
To get the dependencies installed, run
npm run setup
followed by
npm run start
To get run the webpack dev server. The app will be served at http://localhost:8080/
Requirements
- Allows users to select a departure and arrival trainstation
- See a list of trains times, and durations
- Initially, the application should load a default train schedule even when offline
- Use an API or a GTFS file for the data for the public transportation
- If the application is online, your schedule should reflect real-time transit data, informing the user of any delays they may encounter.
Built With
- Node - JS runtime environment
- npm - package manager
- Babel - ES6 transpiler
- Webpack - module bundler & task runner
- React - declarative web UI library
- react-hot-loader - hot reloading for react
- react-router - react application router
- react-redux - react bindings for redux
Authors
- Ryan Collins
License
This project is licensed under the MIT License - see the LICENSE.md file for details
Resources
Timeline / Todos
- Configure Service Worker with Webpack to cache all assets
- Retrieve Data from the Transport API
- Cache data to IDB for loading when offline
- Add Material UI components when apropos
- Add custom styling to components using React SCSS Modules
- Hydrate Redux store from persisted data
- Write integration and unit tests for all reducers, action creators and eventually components
- Deploy to Heroku
- Review Code for best practices and meet the AirBnb style guide
Technical Milestones
- Built a dynamic single page application using offline first technologies
- Transpiled cutting edge JavaScript with ES6 using Babel
- Implemented service worker and IDB to provide persistent offline data
- Utilized reachability to determine when the app was offline
- Wrote several dozen reusable React components
- Utilized Redux and unidirectional data-flow to manage dynamic state predictably
- Wrote tests to eliminate regressions and provide a solid user experience
- As always, followed the AirBnB JSX and JavaScript style guides and utilized ESLint to provide exceptional style and code quality