Week 5 README

🚋 Train Departure App

---

🤹‍♀️Team

Rohan @RohanSSS

Sam @starsuit

Sylvia @seabasshoang

Anna B @aniablaziak

🚇 Overview

Tagline: Citymapper is so over

🎉Our app is on Heroku: https://shrouded-sands-99034.herokuapp.com/ An app that allows the user to search and check next train departure times from any underground station.

🎉 Our app is also a progressive web app 🎉 Save it the heroku link to your homepage!

---

🛠 Built with:

• HTML
• CSS
• JavaScript
• NodeJS
• TFL API
• Travis
• Heroku

---

🏡 How to set up this project?

1. clone the project with git clone https://github.com/FAC-Sixteen/week5-trains.git
2. install node npm i
3. you can run tests with npm test
4. launch it locally with npm start (or npm run dev to use nodemon)

---

🎯 Goals

• fetch data from TFL API
• app will show live departure times from Finsbury Park
• deploy the app to Heroku
• CI with Travis
• backend testing and test coverage

---

🎳 Stretch Goals

• continous updates (refreshes every x seconds)
• refresh button
• adding a clock to our GUI
• dropdown menu to search for departures from more stations
• line status updates
• progressive mobile app!
• display last update on load and on click
• clear input button
• add overground trains

---

📝 Planning

Initial idea design:

User journey whiteboard:

---

Process

Day 1

• Deploy on Heroku
• Set up initial server
• Set up Travis CI
• Basic CSSing
• Improved server & added our own request module

↓ Accidentally searched for a 'fetch' gif before realising we meant 'request'...

Day 2

• DOM manipulation to render train info
• Filter & format API data in the backend
• Fixed Heroku deployment
• Better CSS styling (more responsive)
• Working on stretch goals!

---

💡 What we've learned (and problems)

• Heroku can update automatically if you link it with GitHub master branch
• We tried GitHub Projects (frickin awesome!)
• properly naming GitHub branches (/feature and /fix)

---

Problems:

What problems?

• we didn't write out Procfile properly and had problems with deployment web: src/scripts/server.js vs web: node src/scripts/server.js
• The TFL API - matching up station names with IDs
• Data cleansing - if user enters a station that doesn't exist!

💃 FIN 💃  

NOTES

• DOM manipulation
• Input list to search
• Filter API data

API data needed:

• Inbound/outbound
• Line
• Destination
• Time to station