Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ginnill/pokemon-team-builder

React and Tailwind Pokédex
https://github.com/ginnill/pokemon-team-builder

api css3 html5 javascript pokedex pokemon pokemon-api postcss reactjs sass tailwindcss typescript vitejs

Last synced: 3 days ago
JSON representation

React and Tailwind Pokédex

Host: GitHub
URL: https://github.com/ginnill/pokemon-team-builder
Owner: Ginnill
Created: 2025-01-05T00:47:01.000Z (4 days ago)
Default Branch: main
Last Pushed: 2025-01-05T05:46:28.000Z (3 days ago)
Last Synced: 2025-01-05T06:24:35.601Z (3 days ago)
Topics: api, css3, html5, javascript, pokedex, pokemon, pokemon-api, postcss, reactjs, sass, tailwindcss, typescript, vitejs
Language: TypeScript
Homepage: https://ginnill.github.io/pokemon-team-builder/
Size: 200 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

        # Pokémon Team Builder

A web application to explore detailed information about Pokémon, build teams, and visualize weaknesses, resistances, and evolutions.

---

## 🛠️ Features

- 🔍 **Search Pokémon**: Search for Pokémon by name.

- 🌀 **Filter by Types**: Filter Pokémon by up to two types simultaneously.

- 📊 **Pokémon Details**:

  - Types displayed with representative colors.

  - Pokédex number formatted as `Nº 0001`.

  - Stats displayed with bar graphs.

  - Weaknesses and resistances with damage multipliers.

  - Evolution chains with images and types.

- 📱 **Responsive Design**: Adapted for desktop, tablet, and mobile devices.

---

## 🧰 Technologies Used

- **Frontend**:

  - [React](https://reactjs.org/)

  - [TypeScript](https://www.typescriptlang.org/)

  - [Vite](https://vitejs.dev/)

- **Styling**:

  - [TailwindCSS](https://tailwindcss.com/)

  - SCSS

- **Libraries**:

  - [React Router](https://reactrouter.com/) (for navigation)

  - [Axios](https://axios-http.com/) (for API requests)

- **Data Source**:

  - [PokéAPI](https://pokeapi.co/)

---

## 📦 Installation

### **Prerequisites**

- [Node.js](https://nodejs.org/) (version 16 or higher)

- [Git](https://git-scm.com/)

### **Steps**

1. **Clone the Repository**

   ```bash

   git clone https://github.com/Ginnill/pokemon-team-builder.git

   cd pokemon-team-builder

2. **Install Dependencies**

   ```bash

   npm install

3. **Start the Development Server**

   ```bash

   npm run dev

    

4. **The app will be available at:**

   ```bash

   http://localhost:5173