Summary

• Project Pokédex
  • My Process
    • Design/Prototype
    • Initial Coding Difficulties
    • Version 0.3.0
    • List Filtering and Sorting
    • Version 1.0.0
  • Functionalities
  • Built With
• Using the Project
  • Installation
    • Pre-requisites
    • Steps
  • Docker
  • Testing
  • Linting + Formatting

Project Pokédex

Originally conceived as a Quest - special exercise from the DevQuest course - where I have to come up with my own design and implementation of a SPA that fetches Pokémons from the PokéAPI, exhibits them on a list initially containing 10 and takes to a page detailing any Pokémon that is clicked. However, I wanted to develop much more than was asked and decided to turn it in a personal project.

My Process

A bit of my development journey...

What was supposed to be an exercise for a course, became a personal project when I got excited to implement many extra things that weren't asked.

Design/Prototype

If you want to check the Project's design, change the visibility of the Settings Modal and the pages inside Outlet in order to see only the part you want:

I'm not a designer, but I needed a visual representation of everything I planned to develop, which led me to create my first Figma design.

I used React Router's tutorial project as my initial inspiration, especially on the routing part. It's composed of two main components: the Pokémon list as the Root Route, the route that always stay on screen. And the Outlet Route, responsible for displaying the contents of every route accessed.

For the themes, I tried choosing colors that reminded something about the Pokémon world. The light theme used the Pokédex's red and a light gray to simulate the lit screen. The dark theme colors were inspired in the Master Ball.

I wanted to create a theme structure that would allow me to use both light and dark themes by coding few conditionals, this led me to devise an object structure for them and create two versions of the app in my Figma design, to see if the colors looked good on both themes.

Initial Coding Difficulties

Being my first personal project and one with a complexity I never dealed before, it was difficult coding it. Some of the initial difficulties were:

• Had to google and even ask ChatGPT for help with TypeScript because I recently started learning it when I decided to use on the Project.

• Implementing two sections with their own scroll — the Pokémon List and the Outlet — that would smoothly adjust their sizes whenever the list was toggled open/closed along with creating top and bottom bars that would follow the user's scroll on the list required a lot of experimentation.

• How to store the Pokémons and how to manage its manipulation, from recovering from Local Storage to adding multiple Pokémons, one after the other to the list.

Version 0.3.0

After version 0.3.0, development got a bit easier. The basic structure of the project was done and the amount of time and effort it took for to get this far turned me into a better developer.

List Filtering and Sorting

The remaining functionalities to reach version 1.0.0 were the list filtering and sorting. The greatest challenge this time wasn't with logic, but on their implementation. Alterations on existing code were necessary, which required me to ponder for some hours on solutions that produced a clean code without breaking any parts of the project.

I decided to not mutate the Pokémons List by copying to a new list the Pokémons meeting the filter criteria, then perform sorting on it. By counting the lenght of the filtered and unfiltered lists, it is obtained the amount of Pokémons on the list and the ones meeting the filter criteria.

In order to not break the delete Pokémon functionality, the Pokémon's position on the list is placed inside its object, allowing correct deletion even when the list is both ordered and filtered.

The filter and sort rules; the amount of Pokémons on the list and the ones that meet the filter criteria are stored somewhere global: inside a React Context.

Version 1.0.0

This version marks that all the planned functionalities were developed. This does not mean no more work will be done, from time to time refactors and maybe new functionalities will be made.

Functionalities

Pokémon List:

• Initially populated with 10 Pokémons fetched from the PokéAPI or recovered from user's Local Storage if saved there.
• Adds Pokémons by typing its name or ID or by letting the App get 1 to 10 random ones.
• Exhibits amount of Pokémons inside it.
• Allows deleting a Pokémon from it.
• Can sort Pokémons by ID or name.
• Can filter by type(s).

Page detailing a Pokémon:

• Shows Pokemon artwork, name, ID, Genus, types, stats, habitat, height, weight, generation, description, abilities and moves.
• Shows previous and next Pokémons based on the ID of the current Pokémon.

Theme:

• Starts with light or dark theme depending on user's preference.
• Toggle between light and dark themes.

Settings:

• Display animated or static sprites for the Pokémon List.
• Allow/Disallow saving the Pokémon List in the user's machine through Local Storage.
• Empty the Pokémon List.

Built With

Used Vite with the following technologies:

• HTML5, CSS3: Provides structure and styling for the app.

• JavaScript + TypeScript: JS allows interactions with the app and TS makes JS code type-safe, less prone to bugs.

• React: Makes the user experience smoother by turning the App in a SPA and forces code to be written as components, facilitating maintanence and development of new features.

  • Styled Components: Isolate styles, making them easier to be created, maintaned and escalated.

  • React Router DOM: Improves user experience by delegating routing to the Browser, downloading only what has changed on the screen instead of redownloading everything.

• Vitest: For testing the project.

• Some Testing Library libraries:

  • React Testing Library: Test React Components.
  • User event: Test events (mouse click, keyboard typing, etc.) with more accuracy.

• ESLint: Linter used to detect bugs in code.

• Prettier: Code formatter used to visually standardize the code.

• Docker: Isolates the app by turning it in a Container, allowing execution in any Operational System that has Docker and eases installation by placing every dependency in the App instead of your machine, which also facilates uninstallation because the app and all its dependecies are removed just by deleting the container and its image.

Using the project

Installation

Want to test it in your own machine? Check the following guide:

Pre-requisites

• Git
• A package manager (I used NPM which is installed together with Node.js)

Steps

1. (Optional) Fork the project

2. Run in the terminal: git clone https://github.com/alexgabriel8/results-summary-component.git

   • If you have forked the project, substitute alexgabriel8 by your username.

3. Enter the folder created by the clone and install its dependencies. (Using NPM: npm i or npm install)

4. After installing, run the dev script (Using NPM: npm run dev) and paste the resulting URL on the Browser to see the project running!

Docker

The Project has four scripts to use with Docker:

• docker-build: builds a Docker image for Project Pokédex.

• docker-run: creates a container in terminal mode using the Project Pokédex's image. The container will self-destruct when stopped.

• docker-stop: if for some reason the container is still running after stopping it in the terminal, use this command to stop it.

• docker-test: creates a container in terminal mode for running tests using the Project Pokédex's image. The container will self-destruct when stopped.

Testing

Run the test script in the terminal to run all tests. (Using NPM: npm run test)

Linting + Formatting

You can run the lint script in the terminal (Using NPM: npm run lint) or use VS Code with the ESLint extension to see errors in real time.

Running the format script with your Package Manager will make Prettier format all files inside the src folder. (Using NPM: npm run format)