iPhone-13-PRO-pokemon-api-duo-project.vercel.app-n-gem9cm_ew3bk.webm
The Pokémon API Project was developed as a team and offers an interactive application that makes it possible to retrieve Pokémon data from a public API. The main features include displaying an overview of all Pokémon per generation on the home page, the ability to search for a specific Pokémon, and a detailed view of each Pokémon that includes additional information such as types and attacks.
The application was developed using React.js and implements a user-friendly navigation that allows users to switch between different views and Pokémon detail pages. The header includes a dark/light mode button to customise the user interface according to the user's preferences.
Home page:
- Displays Pokémon per generation retrieved from the API, including GIFs, name and ID
- Possibility to search for a specific Pokémon via an input field
- Possibility to click directly on one of the Pokémon to access the detailed view
Detailed view of a Pokémon:
- Shows the type of Pokémon
- Lists all "Movements" (attacks and abilities) of the Pokémon
- A "Back Arrow" allows navigation to the previous page
Dark/Light Toggle Mode:
- Allows users to switch between a dark and light mode
Navigation:
- The large Pokémon logo in the header of the page directs the user from each page back to the homepage
- A burger menu on the homepage directs to an overview of all Pokémon types
- Possibility to switch between Pokémon generations
- Clicking on a type takes the user to an overview of all Pokémon of that type
- From the type overview, the user can switch back to the detailed view of a Pokémon
- A back-to-top button bring the user back up to the header of the home page
This project was carried out as a team effort. We communicated regularly via Discord to distribute tasks, discuss progress and coordinate development progress. In addition, we used FigJam to visualise our tasks and distribute them. Using Git as a version control tool, we made sure that all changes were merged, pushed and pulled to ensure a smooth process.
Markup:
Styling:
JS Library:
Programming Language:
Routing
IDE:
Version Control:
Here is a guide on how to set up and run the Pokémon API project on your local computer:
You should have the following programmes installed:
-
Clone das "Repository":
git clone https://github.com/bebzbzbz/Project-Pokemon-API
-
Install dependencies & run the development server:
npm install npm run dev
-
Open your local host and have fun browsing your favourite Pokémon! 🐸
The design of the project is based on a Figma template, which serves as the basis for the layout and colour palette to ensure a consistent and appealing user interface. The design was developed with a mobile-first approach and implemented using TailwindCSS to ensure that the application works optimally on mobile devices. At the same time, the project was designed to be fully responsive so that it adapts to different screen sizes and provides a user-friendly interface on all devices.
Click here to go directly to the website