Code Monkey home page Code Monkey logo

london-mini-guide-server's Introduction

node-challenge-london-mini-guide

In this challenge you are going to build a full stack application (server & client) shows number of hospitals, doctors, pharmacies and colleges in number of london boroughs.

for now there are data for only 3 cities.

  • expected time: 4 - 20 hours

live version:

final project screenshot

project screenshot

data source

  • the data is provided to you in a folder ./data which contains 3 files: Harrow.json, Heathrow.json and stratford.json.

  • each file in this format:

    {
        "pharmacies" : [
            {
                "name" :
                "address":
                "website":
                "phone" :
            }
        ],
    
        "colleges" : [
            {
                "name" :
                "address":
                "website":
                "phone" :
            }
        ],
    
        "doctors" : [
            {
                "name" :
                "address":
                "website":
                "phone" :
            }
        ],
    
        "hospitals" : [
            {
                "name" :
                "address":
                "website":
                "phone" :
            }
        ]
    }
  • data source: https://www.yell.com/

  • data has been collected using web scraping technique, if you are more curious about this please check this repo or this youtube video. and this is completely optional.

server

  • you need to implement your server logic using node.js.

server level 100

  • make a new express server and deploy it to repl.it or heroku.

  • on the route / respond with the routes you are planing to implement, example:

    {
        "/pharmcies": "retruns an array of pharmacies in a specific area"
        ...
    }

server level 200

  • make your server working for only one city, example: Stratford

  • in this level you should have 4 routes:

    route result
    /pharmacies returns pharmacies list for stratford
    /colleges returns colleges list for stratford
    /doctors returns doctors list for stratford
    /hospitals returns hospitals list for stratford

server level 300

  • now make your city dynamic.
  • routes will change:
route result
/:city/pharmacies returns pharmacies list for :city
/:city/colleges returns colleges list for :city
/:city/doctors returns doctors list for :city
/:city /hospitals returns hospitals list for :city

server level 500

  • make all of that in one single route as:
route result
/:city/:category returns :category list for :city

server level 999

  • you have the full control over this level.
  • some suggestions:
    • add new cities.
    • add routes to add entries to our data.
    • make sure that you are saving the entered values to the json file.

client

  • you need to implement your client (or front-end) logic using react.js.

client level 100

  • display a title in the center.
  • display the cities dropdown menu.
  • display a categories' buttons.
  • display table with dummy data.

client level 200

  • make sure that selecting a city will update the state.
  • make sure that clicking on a specific category will activate it (distingush it from ither buttons).
  • show an error if user tried to choose a category before chosing a city

show an error if user tried to choose a category before chosing a city

client level 300

  • make fetch request to your server on a specific city.
  • choosing any categorey will display the data specified to thar city in the table.
  • add loading spin while you're fetching your server.

client level 500

  • make city selection dynamic.
  • selecting a city then selecting a category should displays the data of the selected city in the table.

client level 999

  • you have the full control over this level.
  • some suggestions:
    • add a little page contains some data about each city.
    • form for adding more entries to the data.

london-mini-guide-server's People

Contributors

ahmad-ali14 avatar dependabot[bot] avatar

Stargazers

Roman avatar Parth Patel avatar

Watchers

James Cloos avatar  avatar

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.