We will build our first web app using Node.js and Express - a Pokedex app.
For this exercise, we will be setting up express to intercept incoming requests on certain routes, reading data from a JSON file, and responding to HTTP requests with simple strings, JSON, or full HTML pages.
- Fork and clone this repository to your computer
- Run
yarn install
to install dependencies - Look in the starter file called
index.js
. This will be the entry-point to your app - Run
node index.js
to start a local server on port 3000 - Open
localhost:3000
on your browser and see the home page
Additionally, to improve your workflow, install the nodemon
package. Nodemon helps us restart our local server every time it detects a "save" event on index.js
. Neat stuff.
# install nodemon in Terminal
yarn global add nodemon
# run nodemon to start server
nodemon index.js
The comments in this file are deliberately verbose meant to orientate you to an Express app for the first time. Feel free to remove any or all comments.
Use the data in pokedex.json
and return a response with details about the requested Pokemon. Specifically:
-
Go through
pokedex.json
to understand how the data is structured. Where are all the pokemon data stored? (As usual, using a JSON parser for human-readable JSON is a good idea. There are many, here is one.) -
Return a string response "Welcome to the online Pokedex!" when a request for the root route (
/
) is received -
Return a string response with the requested pokemon's information when a request comes with matching the route
/names/:name
(eg.localhost:3000/names/Bulbasaur
should show Bulbasaur's information - for now, show only its weight value) -
Modify your response for
/names/:name
to return a HTML page (instead of just a string) with ah1
tag that displays the name of the pokemon being requested, and aul
displaying its weight (eg. "Weight: 10 kg")
-
Handle the case where an invalid pokemon name is provided (eg.
/names/Deadpool
). Return a HTML page with ap
tag that says "Could not find information about<pokemon_name>
- Is that a new pokemon? Gotta catch em' all!" (replace<pokemon_name>
with the requested for pokemon name) -
Modify your response for
/
(homepage) to return a HTML page with ah1
tag saying "Welcome to the online Pokdex!" and aul
displaying all the pokemon that exist in the pokedex -
Instead of showing just the weight, show all the details of the requested pokemon for
/names/:name
route, adding each detail as ali
to theul
-
Expose a new route for
/types/:type
that returns a HTML page with aul
listing the names of all pokemon that have the specified type (eg./types/grass
should show a page with names of all pokemon of grass type). Format it however you like on the page.