Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/andersonsrocha/pokedex

πŸ“– PokΓ©dex for listing pokemons
https://github.com/andersonsrocha/pokedex

pokedex pokemon radix-ui tailwind tailwindcss typescript

Last synced: 2 days ago
JSON representation

πŸ“– PokΓ©dex for listing pokemons

Awesome Lists containing this project

README

        


πŸ’» PokΓ©dex

PokΓ©dex created with ReactJS + TypeScript, using vite as boilerplate and tailwind CSS as customization library.
Tailwind is used to manipulate the page's css and customize the Radix UI components,
the Radix UI Icons library is used to compose some of the basic screen icons and
PokeApi as the api for data consumption.

![](https://img.shields.io/badge/release-v1.0.0-52a49a)
![](https://img.shields.io/badge/yarn-%3E%3D%201.22.19-blue)
![](https://img.shields.io/badge/node-%3E%3D%2018.9.0-green)

screenshot




πŸ—’οΈ Index

- [πŸš€ Technologies](#-technologies)
- [✨ Features](#-features)
- [πŸ“¦ Install](#-install)
- [πŸ”¨ Build](#-build)
- [πŸ” Preview](#-preview)
- [⭐ Credits](#-credits)
- [πŸ”— Links](#-links)
- [πŸ“ License](#-license)

## πŸš€ Technologies

- πŸ”© React
- πŸ’‘ TypeScript
- ⚑ Vite
- 🌈 Tailwind CSS
- πŸ”₯ PokΓ©Api

## ✨ Features

- πŸ”Ž Search pokemon by name
- πŸ“± Responsiveness
- πŸ“„ Pagination
- ✨ Shape change
- πŸ‘οΈβ€πŸ—¨οΈ Icon change

## πŸ“¦ Install

πŸ“ Install the dependencies and **start** the project

```bash
yarn install
yarn run dev
```

## πŸ”¨ Build

πŸ“ **Build** the application for **production**

```bash
yarn run build
```

## πŸ” Preview

πŸ“ Preview the build

```bash
yarn run preview
```

## ⭐ Credits

- [Loading](https://codepen.io/tiffachoo/pen/WNxEJZP)

## πŸ”— Links

- [Vite](https://vitejs.dev/)
- [Github](https://github.com/andersonsrocha)
- [LinkedIn](https://www.linkedin.com/in/anderson-silva-a40926192)

## πŸ“ License

This project is under the MIT license. See the [LICENSE](LICENSE) file for more details.