We will build the Pokedex web app using Node.js, Express, using React as our templating engine.
For this exercise, we will set up our server to accept POST requests to save user-provided data and serve a form to the user for them to send data to our server to create a new pokemon.
The starter code in this repository builds upon the previous exercise's (pokedex-express).
- Fork and clone this repository to your computer
- Run
npm install
to install dependencies - Look in the starter file called
index.js
, runnodemon
to start local server on port 3000 - Open
localhost:3000
on your browser and see the home page
-
Expose a new endpoint that intercepts GET requests to
/pokemon/new
, which responds with a view containing aform
that has these fields:id
,num
,name
,img
,height
, andweight
-
Point the form to submit data to the (
/pokemon
) route using POST method -
(for the
id
andnum
fields, for now, the user will simply choose a number. Obviously if they happen to pick an id that already exists, they will have a bad time. We will have the tools to correct this soon) -
Expose a new endpoint that accepts POST requests to
/pokemon
, which parses the form data and saves the new pokemon data intopokedex.json
-
Create a
views
folder and place your.jsx
views in it. Your app should render views from this folder.
-
create the ability to edit and delete pokemon from the json file
-
add boostrap to your app. Create a layout component file and put the bootstrap footer and navbar inside the layout file.
-
Add a "Sort by name" button to the homepage (
/
route) that when clicked, sends a GET request with a query parameter specifying "?sortby=name"- Try to implement the button as an element within a
form
tag withaction="/"
andmethod="GET"
- so you don't have to write an AJAX request in JavaScript
- Try to implement the button as an element within a
-
Modify your GET
/
logic to handle the new query parameter, returning a view with all the pokemon sorted by their names (whereas previously it was sorted by ID) -
Instead of saving
id
andnum
as random values input by the user via the form, implement the logic that guarantees the uniqueness ofid
andnum
of every newly created pokemon- eg. if last pokemon in the
pokedex.json
has"id": 151
and"num": "151"
, the new pokemon object could have"id": 152
and"num": "152"
- Hint: You might consider adding a new key value pair in
pokedex.json
, like"lastKey": 151
- are there any other ways to make a unique id for something? Remember that it is technically possible for 2 requests to be made to your server at almost the exact same time.
- eg. if last pokemon in the