# WDI-PANTHALASSA
---
Title: Pokedex
Type: Homework
Duration: Weekend
Creator: Thom Page
Course: WDIr-Panthalassa
---
# Make a POKEDEX
## App: Full CRUD and REST
Your mission is to make a Pokémon character manager (a Pokédex).
All you are given is a `pokemon.js` file that has all the raw data for 151 Pokémon. Don't click on or open this file unless you are prepared to wait a minute or so for it to load. It is a huge file.
**It is up to you how you build your app**, in what order you want to do things, what kind of design flow your app will have, where you put your delete button, etc, and what parts of the Pokémon data your pages will display.
There are a few requirement to keep in mind.
The app will:
- display a bunch of Pokémon images on the index
- have separate show pages for each Pokémon
- have the ability to add a new Pokémon
- have the ability to edit existing Pokémon
- have the ability to delete Pokémon
The app will use RESTful routing:
- Index
- GET `/pokemon`
- Show
- GET `/pokemon/:id`
- New
- GET `/pokemon/new`
- Edit
- GET `/pokemon/:id/edit`
- Create
- POST `/pokemon`
- Update
- PUT `/pokemon/:id`
- Destroy
- DELETE `/pokemon/:id`
(Note that these URIs will be abbreviated when setting middleware to use the `/pokemon` route in conjunction with `express.Router()`)
## MVC
Ideally, your app should follow the MVC format of *models*, *views*, and *controllers*.
You will want a folder each for Models, Views, and Controllers.
To separate your Controllers from `server.js`, use `express.Router()`:
```
// server.js
var pokemonController = require('./controllers/pokemonController.js');
app.use('/pokemon', pokemonController);
```
```
// pokemonController.js
var express = require('express'),
router = express.Router(),
Pokemon = require('../models/pokemon.js');
// INDEX
router.get('/', function(req, res) {
res.render('index.ejs', { data: Pokemon });
});
// SHOW
router.get('/:id', function(req, res) {
res.render('show.ejs', { data: Pokemon[req.params.id] });
});
module.exports = router;
```
### Use static assets
Make your app look and act nicely with static assets-- try using jQuery.
### Notes on the Pokémon data and what to display
The `pokemon.js` file is massive and there is a ton of data to parse through. You need not display all of it on your pages. On your index page, you can just render the images.
Here are suggestions for what to display on your Pokémon's show page:
- The pokemon's name
- The image of the pokemon
- An unordered list of the Pokemon's types (eg. water, poison, etc).
- The pokemon's stats for HP, ATTACK, and DEFENSE.
### Notes on testing
Sometimes you don't want to have to build out a view or a form in order to test if a POST, PUT, or DELETE route is working. Use Postman or cURL on these routes and console.log a message and/or req.body to see if the route is working, and worry about the view later.
### Commits
The order of your commits this time does not matter, but the app is complete with six particular commits. When you have completed the following, make your commits as follows, and include the number of your commit:
Examples:
** Commit your work.**
"Displays a bunch of Pokémon images on the index".
** Commit your work.**
"Has separate show pages for each Pokémon".
** Commit your work.**
"Has the ability to add a new Pokémon".
** Commit your work.**
"Has the ability to edit existing Pokémon".
** Commit your work.**
"Has the ability to delete Pokémon".
** Commit your work.**
"The app uses RESTful routing, all seven RESTful routes".
** Commit your work.**
"The app uses the MVC pattern established with views and models".
** Commit your work.**
"The app uses the MVC pattern established with express.Router()".
** Commit your work.**
"View templates are complete".
** Commit your work.**
"Static assets included - CSS".
** Commit your work.**
"Static assets included - jQuery".
### INVESTIGATION
If you get everything done, make a copy of your pokedex homework. Look into using the mongodb node package with express within your copy:
https://www.npmjs.com/package/mongodb
Try to connect your app to a mongo db. Investigate how you can do Read operations, and then how to do Create operations inside the controller in your app. You might want to seed your Mongo db with select Pokémon data.
Note that this is advanced, and is not how we will be doing Mongo queries inside our app in the future. Instead, we will be using a node package called Mongoose which uses different commands.
Nevertheless, it is worth your time to investigate how to get mongo connected to your app, and how to make raw mongo queries within it, even if you get absolutely nowhere with it.