Working with databases, especially through ORMs, can present quite a learning curve. We'll start by incorporating one database model into an application to save favorite Pokemon.
If you're not familiar with Pokemon, Pokemon is a franchise/universe created by Satoshi Tajiri in 1995. It's a famous franchise in both the US and Japan. Fun facts:
- Pokemon is short for "Pocket Monsters"
- The Pokemon universe extends to games, trading cards, and TV
- The Pokemon Company is headquartered in Bellevue, WA.
We'll be using an existing application that uses the PokeAPI, a Pokemon API that allows us to get a list of Pokemon.
- Fork and clone this repository
- Run
npm install
to install dependencies- Use
nodemon
to start the server
- Use
- As a user, I want to select my favorite Pokemon and add them to a list of favorites.
- As a user, once I add a Pokemon to my list of favorites, I want to be redirected to my favorites page.
Your first step will be to create a SQL database for your application. Recall the process:
Our data model needs only one attribute: name
.
- Use the
sequelize model:create
command to make thepokemon
model. This creates both the model JS and the migration JS files. - Use the
sequelize db:migrate
command to apply the migrations. - Confirm that your
database
andmodel
are inside Postgres using theterminal
orPostico
You'll want to add functionality to the following routes by incorporating the pokemon
table you created.
GET /pokemon
- View:
views/pokemon/index.ejs
- Purpose: Retrieve all favorited Pokemon and display them on the page
- What sequelize function will do this for us?
- View:
POST /pokemon
- The form for adding is already included on the main index page
- View: none (redirect to
/pokemon
) - Purpose: Creates a new Pokemon and redirects back to
/pokemon
- What is the sequelize function we use here?
Add a route GET /pokemon/:id
that renders a show
page with information about the Pokemon with the corresponding row id
.
- You can get detailed information about a Pokemon by passing the Pokemon's name to PokeAPI. You can retrieve images, abilities, stats, and moves through the API.
- Example: http://pokeapi.co/api/v2/pokemon/bulbasaur/
Check out the result of the pokemon API calls (or see the doc page) for ideas on what data you could show. Show at least 4 pieces of data (e.g. attacks, habitat, etc.)
When finished with the above, style the application more to your liking with CSS.
- All content is licensed under a CC-BY-NC-SA 4.0 license.
- All software code is licensed under GNU GPLv3. For commercial use or alternative licensing, please contact [email protected].