Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kiranwankhade/mynextdeveloper_pokemon_api
This is a web application built using React.js and Chakra UI, designed to interact with the PokeAPI (https://pokeapi.co/).
https://github.com/kiranwankhade/mynextdeveloper_pokemon_api
chakra-ui react react-router-dom reactjs
Last synced: about 16 hours ago
JSON representation
This is a web application built using React.js and Chakra UI, designed to interact with the PokeAPI (https://pokeapi.co/).
- Host: GitHub
- URL: https://github.com/kiranwankhade/mynextdeveloper_pokemon_api
- Owner: kiranwankhade
- Created: 2024-04-17T10:17:13.000Z (7 months ago)
- Default Branch: master
- Last Pushed: 2024-04-19T10:41:26.000Z (7 months ago)
- Last Synced: 2024-04-23T05:07:22.624Z (7 months ago)
- Topics: chakra-ui, react, react-router-dom, reactjs
- Language: JavaScript
- Homepage: https://mynextdeveloper-pokemon.vercel.app/
- Size: 898 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Pokemon Web Application
This is a web application built using React.js and Chakra UI, designed to interact with the PokeAPI (https://pokeapi.co/).
## Features
- **Homepage:**
- Search bar: Allows users to search for a Pokemon.
- Random Pokemon card: Displays a random Pokemon card below the search bar, which changes daily for every user but not on every refresh.
- **Search Results Page:**
- List of Pokemon: Displays a list of Pokemon that match the user's search.- **Details Page:**
- Attributes: Displays all attributes associated with the selected Pokemon.## Installation
1. Clone this repository to your local machine:
```bash
git clone https://github.com/kiranwankhade/myNextDeveloper_Pokemon_Api.git
```2. Navigate into the project directory:
```bash
cd myNextDeveloper_Pokemon_Api
```3. Install dependencies using npm or yarn:
```bash
npm install
```## Usage
1. Start the development server:```bash
npm start
```
2. Open your web browser and navigate to http://localhost:3000 to view the application.## ScreenShot of the app
![PANew1](https://github.com/kiranwankhade/myNextDeveloper_Pokemon_Api/assets/49937312/77687a4a-f069-4b92-b7c6-f68dc386f7f6)
![PANew4](https://github.com/kiranwankhade/myNextDeveloper_Pokemon_Api/assets/49937312/ab80a0f0-0c56-4f85-b89f-3fcc7ff1c281)
![PANew2](https://github.com/kiranwankhade/myNextDeveloper_Pokemon_Api/assets/49937312/2f51e5ab-c224-4eb3-aa7a-24f9bd28a448)
![PANew5](https://github.com/kiranwankhade/myNextDeveloper_Pokemon_Api/assets/49937312/5457e081-1874-4adb-8332-cdd178ce2c47)
![PANew3](https://github.com/kiranwankhade/myNextDeveloper_Pokemon_Api/assets/49937312/2d928d4e-e569-44a5-bf22-c398907a5f3e)
![PANew6](https://github.com/kiranwankhade/myNextDeveloper_Pokemon_Api/assets/49937312/c5b64425-4884-49fc-a4d4-8fa8a15ad585)