Skip to content

Latest commit

 

History

History
36 lines (27 loc) · 1.28 KB

README.md

File metadata and controls

36 lines (27 loc) · 1.28 KB
Raw

Activity Tracker

Visit Live Link here

A single page appliction built using OpenCity's schools and bus stops data for Bengaluru city to analyse the connectivity of schools across Bengaluru.

Demo

Features

  • Enter first three characters of a school for example: GKL
  • A dropdown of auto complete school list shall be displayed
  • Pick one and enter radius as a number between 1 to 10. This represents radius in km
  • A backend query shall be executed with the school coordinate and radius that will fetch the bus stops falling in that region
  • react-map-gl will load the Mapbox where school is represented by an Orange icon and bus stops are represented by blue icons.
  • Also, a scrollable list of bus stops will be displayed on the top.
  • Clicking on any bus stop from the card shall zoom in on that particular bus stop in the map.
  • Hover on any of the bus stop marker or school marker shall display a pop over with its name.

Technologies

  • React JS
  • Styled Components
  • react-map-gl
  • Mapbox
  • MongoDB geojson queries
  • Express JS
  • Material UI for icons
  • React spinners for loading

Local Setup

  1. Clone the repository
  2. npm install
  3. npm start
  4. You can check the working app on localhost:3000