Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/noistnt/pokemon-client
Pokewiki App Client
https://github.com/noistnt/pokemon-client
front-end front-end-development frontend javascript poke-app pokedex pokemon pokewiki react reactjs redux redux-thunk styled-components wiki
Last synced: 24 days ago
JSON representation
Pokewiki App Client
- Host: GitHub
- URL: https://github.com/noistnt/pokemon-client
- Owner: NoistNT
- Created: 2023-07-01T04:15:02.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-20T21:01:31.000Z (25 days ago)
- Last Synced: 2024-10-21T01:33:23.377Z (25 days ago)
- Topics: front-end, front-end-development, frontend, javascript, poke-app, pokedex, pokemon, pokewiki, react, reactjs, redux, redux-thunk, styled-components, wiki
- Language: JavaScript
- Homepage: https://pokewikiclient.vercel.app
- Size: 4.16 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Pokewiki - Client App
A comprehensive Pokémon SPA (Single Page Application) with Pokédex-style features.
View Demo
·
Report Bug
·
Request Feature
## About The Project
This Single Page Application (SPA) serves as a client-side interface for the Pokewiki project. It offers a user-friendly and interactive experience for exploring the world of Pokémon.
**Key Features:**
* **Pokémon Search:** Find Pokémon by name using a search bar.
* **Pokémon Creation:** Add new Pokémon with a controlled and validated form, including error handling.
* **Filtering:** Combine filters by:
* **Types:** Filter Pokémon by their types (e.g., Fire, Water, Grass).
* **Origin:** Choose Pokémon from the database (user-created), or original (fetched from the API).
* **Sorting:** Sort the Pokémon list by:
* **Attack**
* **Defense**
* **Speed**
* **Height**
* **Weight**
* **Health Points (HP)**
* **Detailed View:** Gain extensive information about a specific Pokémon, including its stats, abilities, and image.
* **Lazy Loading:** Improves performance by loading data only when needed.
## Built With
[](https://developer.mozilla.org/en-US/docs/Web/HTML)
[](https://developer.mozilla.org/en-US/docs/Web/CSS)
[](https://reactjs.org/)
[](https://reactjs.org/)
[](https://redux.js.org/)
[](https://styled-components.com/)
## Getting Started
To set up your local development environment, follow these steps:
### Prerequisites
- Node.js and npm (or pnpm, yarn) installed on your system.
### Installation
1. Clone the repository:
```bash
git clone https://github.com/NoistNT/Pokemon-Client.git
```
2. Install dependencies
npm
```sh
npm install
```
pnpm
```sh
pnpm install
```
yarn
```sh
yarn install
```
3. Run the client using either Vite or Create React App:
Vite
```sh
npm run dev
```
CRA
```sh
npm start
```
## Contributing
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".
Don't forget to give the project a star! Thanks again!
1. Fork the Project
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the Branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
## Contact
[![LinkedIn][linkedin-shield]][linkedin-url] [![Gmail][gmail-shield]][gmail-url]
[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=555
[linkedin-url]: https://www.linkedin.com/in/ariel-piazzano
[product-screenshot]: https://github.com/NoistNT/Pokemon-Client/assets/104594670/4f6ffde7-7939-4abe-9690-df6ce88b84e5
[React.js]: https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB
[React-url]: https://reactjs.org/
[gmail-shield]: https://img.shields.io/badge/Gmail-D14836?style=for-the-badge&logo=gmail&logoColor=white
[gmail-url]: mailto:[email protected]