PokeZone

This project is a Pokémon-themed website created with React.js and the PokeAPI API.

📷 Screenshots

Tecnologias Usadas

Features

Users can:

• Search for a Pokémon by name and get suggestions based on the matches.
• Navigate through a list of over 800 Pokémon cards, divided into pages, each card showing the name, ID, and types of the Pokémon.
• Mark or unmark a card as a favorite by clicking the star in the top right corner.
• View detailed information about the Pokémon by clicking on a card, divided into 5 sections:
  • General: name, types, and a brief description.
  • Dimensions: weight and height.
  • Statistics: HP, attack, defense, special attack, special defense, and speed.
  • Appearance variations: default, female, shiny, and shiny female.
  • Evolution process.
• Access the favorites section, where the user's marked favorite cards are stored, showing the name, ID, and types, and allowing them to rearrange the cards as they please.
• Change the language of the web application at any time from the footer, choosing between 3 languages: Spanish, English, and Portuguese. The language will be saved for the next session.

Technologies and frameworks

• Languages: HTML, CSS, JavaScript
• Libraries and APIs: React.js, PokeAPI API
• Fonts: Source Code Pro
• Colors
  • Primary: #6246ea
  • Secondary: #d1d1e9
  • White: #fffffe
  • Black1: #010101
  • Black2: #2b2c34
  • Gray1: #72757e
  • Gray2: #94a1b2

📥 Installation and configuration

To download and test the project on your local environment, follow these steps:

1. Make sure you have Node.js and npm installed on your system.
2. Download or clone the repository onto your computer.
3. In the terminal, access the project directory and run npm install to install all the dependencies.
4. Run npm start to start the development server.
5. Open your browser and go to http://localhost:3000 to view the app.

📦 Dependencies

• react
• react-dom
• react-router-dom
• react-spinners
• sortablejs
• i18next

🌎 Deployment on netlify and website

You can try and interact with the website here.

🎓 New concepts mastered and applied

• Use of react-router-dom: BrowserRouter, HashRouter, Routes, Route, Navigate, NavLink
• Hooks: useState, useEffect, useParams, useNavigate, useRef, useTranslation
• Libraries: sortablejs, i18next

💼 More projects

• Portfolio: www.jaenfigueroa.com

👥 Contact

• Email: [email protected]
• Github: @jaenfigueroa
• Linkedin: @jaenfigueroa
• Whatsapp: +51 995780916