ahmad-ali14 / react-tfl

Home Page:https://tfl-react-challenge.netlify.app/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Transport For London React Hooks

This challenge uses TFL API, and react hooks, bootstrap.

Live at : https://tfl-react-challenge.netlify.app/

useful links:

  1. tfl api documentations: https://api.tfl.gov.uk/
  2. All lines : https://api.tfl.gov.uk/Line/Route?ids=100&serviceTypes=Regular
  3. methods: https://api.tfl.gov.uk/Line/Meta/Modes
  4. react-google-charts: https://react-google-charts.com/

secreenshoot

objectives:

  1. practice useState
  2. practice useEffect
  3. practice connecting to multiple api endpoints.
  4. pracitce using third party packages
  5. practice looking into the docs of third party tools.
  6. chance to take a look at charts and data representation.

students supposed to do:

  1. fetch tfl api to get all transport methods, then create dropdown menu for methods.
  2. fetch tfl api again depending on selection from the first dropMenu, or the can cache those data from the beginning using useEffect
  3. create second dropDown menu for each line of the the selected transport method.
  4. select one line will fill up the table with line origin, destination, type and name.
  5. represent some data using google-react-charts

About

https://tfl-react-challenge.netlify.app/


Languages

Language:JavaScript 80.6%Language:HTML 13.2%Language:CSS 6.2%