Git Product home page Git Product logo

week5-trains's Introduction

Week 5 README

πŸš‹ Train Departure App

Build Status

flying cat


πŸ€Ήβ€β™€οΈTeam

Rohan @RohanSSS

Sam @starsuit

Sylvia @seabasshoang

Anna B @aniablaziak

πŸš‡ Overview

Tagline: Citymapper is so over

underground

πŸŽ‰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:

initial idea

User journey whiteboard:

user journey


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'...

so fetch

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!) GitHub Projects
  • properly naming GitHub branches (/feature and /fix)

Problems:

What problems? no 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

week5-trains's People

Contributors

aniablaziak avatar rohansss avatar starsuit avatar sylv1ah avatar

Stargazers

anna tloth avatar

Watchers

James Cloos avatar

week5-trains's Issues

destructuring..?

const uniqueStations = [...new Set(array)]; (handler.js, line 117)
wow is this like destructuring and a constructor? Nice!!! please show us how it's done!

Careful with variable names

In src/scripts/sortData.js there are a couple of thing names in mapping functions:

 const inboundTrains = inbound.map(train => {
    const thing = {
      timeToStation: timeConverter(train.timeToStation),
      lineName: train.lineName,
      destinationName: train.destinationName
    };
    return thing;
  });

Just a small thing, but it's worth taking a moment to think about the names when you're writing code, because they're easy to forget to come back to! It's pretty good elsewhere though, so this is just a little detail. πŸ˜„

The clock!

The clock was a neat addition - you have really thought through the user's needs

Button names (accessibility)

According to Lighthouse accessibility checks, your buttons do not have accessible names:

"
Failing Elements

button#submit-button.input-submit-button
button#refresh-button.refresh-button
"

I personally

Perhaps you could add ARIA labels to make it more accessible?

modularise

You could try modularsing your sortData function!

Great job using Github Projects!

In the future you can (and will, at least in your client projects) use it along with issues, so that you have a visual overview of them. Just an FYI though!

Tests

You have some, great!! Even if there aren't a lot, it's always great when you have managed to write some tests in this short amount of time.

It would be great to get some Supertest in there too, but no stress!

Also, Tap-Bunny. Enough said. πŸ‘πŸ‘πŸ‘
Screen Shot 2019-04-05 at 10 17 19 AM

Refresh button feedback

As a user, I'm unsure if the refresh button does anything when I press it. If the dataest hasnt updated, it would be nice to see a message appear to the tune of "Latest train times already displayed"

coverage badge?

In your readme goals, you ticked off test coverage - what utility did you use?

Unnecessary function call

In your src/scripts/handler.js handleDefaultStation there is a redundant sortData call:

{
        res.writeHead(200, { "Content-Type": "application/json" });
        sortData(response); //This one doesn't actually do anything since it isn't assigned anywhere!
        const result = sortData(response);
        res.end(JSON.stringify(result));
      }

Again, just small details, but your project is very well written so you're all making me work to find issues! πŸ˜‚

Travis and Heroku!

Fantastic!! Really great to see on your readme that you did both on the first day too!!

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.