Single Page Application (SPA) designed and developed for Henry Bootcamp as an Individual Project.
- React
- Redux
- Css Modules - Styled Components (no frameworks)
- Node - Express
- Sequelize - Postgres
- API - pokeapi
- UUID (to avoid problems with api ids)
- Name
- Types
- Life
- Strength
- Defense
- Speed
- Height
- Weight
- Id
- Name
Intermediate table to relate both entities.
Node/Express server. Filtering, ordering, and paging provided by the external API haven't been used. All these features have been implemented by me.
- GET /pokemons:
- Gets a list of 52 Pokémons from pokeapi.
- Returns necessary data for the main route.
- GET /pokemons?name="...":
- Gets the pokemon whose name matches the query parameter (may be from the API or Database).
- If there is no matching, a message is shown.
- GET /pokemons/{id}:
- Gets the detail from the pokemon selected according to the id (may be from the API or Database).
- Returns necessary data for the detailed route.
- GET /types:
- Gets all Pokémon types.
- First, a call to the pokeapi is made to save the results in the database. Then, data is used directly from the database.
- POST /pokemons:
- Receives from body the data collected from the controlled form.
- Creates a new Pokémon in the database.
React/Redux application.
Landing Page:
- Representative image for the project.
- Home button.
Main Route:
- Search bar for searching Pokémons.
- Pokémon cards. Information shown:
- Image
- Name
- Types
- Filter by API Pokemons and database ones.
- Sort by ascending or descending (alphabetically or by strength).
- Pagination to show and list all Pokemons (12 per page).
Detail Route:
- Fields shown in the main route (image, name, and types).
- Pokemon id.
- Statistics (life, strength, defense, speed).
- Height and Weight.
Creation Route:
- JavaScript controlled form to fill in with the information in the detail route.
- Add one or two types of pokemon.
- Button for creating new Pokemons.