Pokédex Query

This project is a catalog of Pokémons, where you can filter by type, view detailed info as abilities and moves, and you can also toggle the page into dark/light mode.

Desktop Overview 🖳

Mobile Overview 📱

Link 🔗

• Pokédex Query

Functionalities ☑️

This application must be able to:

• Make API requests from https://pokeapi.co.
• Show the 10 first Pokémons in a card format, with its name, id and type(s).
• Load 10 more Pokémons on 'Load Pokémons' button click.
• Hide the button when reach the 150° Pokémon.
• Filter by type.
• Switch between dark and light mode.
• Show an inner page when the card is clicked.
• This page contains Pokémon details, such as the image, name, type, moves list, abilities and its description.
• Go back to the Home page when the logo is clicked.
• Adapt layout through different screen sizes.
• Persist selected theme in case of refreshing/closing the page.

Used Tools ⚙️

• React JS: An open-source JavaScript library for building user interfaces (UI) for web applications, known for its efficiency and component-based development paradigm.
• Context API: A React API allowing data sharing between components without explicit passing of props, facilitating global state management.
• Styled-components: A library for React and React Native enabling writing CSS within JavaScript files using CSS-like syntax, facilitating styled component creation with encapsulated styles.
• React-router-dom: A library for handling navigation between pages in React web applications, enabling route creation and rendering specific components for each route.
• React-icons: A library providing high-quality icons for use in React applications, easily integrable with React components for visually appealing user interfaces.

Run the project 👨‍💻

1. Clone the Repository:

git clone https://github.com/Antonio-Savio/Pokedex-Query.git

Create a clone of the project.

2. Navigate to the Project Directory:

cd Pokedex-Query

Will change the path to the directory where the React application is located.

3. Install Dependencies:

npm install

This command will install all the required dependencies listed in the package.json file.

4. Run the Application:

npm start

This command starts the development server and opens your default web browser to display the React application.