Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/susanta0/pokemon_website

Last synced: 26 days ago
JSON representation

Host: GitHub
URL: https://github.com/susanta0/pokemon_website
Owner: Susanta0
Created: 2024-12-22T13:04:18.000Z (29 days ago)
Default Branch: main
Last Pushed: 2024-12-23T07:11:21.000Z (28 days ago)
Last Synced: 2024-12-23T08:21:28.203Z (28 days ago)
Language: TypeScript
Homepage: https://pokemon-website-xi.vercel.app
Size: 85.9 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# Pokemon Website

A web application showcasing a list of Pokemon with search and filter functionality. Built with Next.js, React.js, and Tailwind CSS.
## Features

1. **Pokemon Listing:** Displays a list of Pokemon with images.
2. **Search Functionality:** Quickly search for Pokemon by name.
3. **Filter Functionality:** Filter Pokemon based on specific criteria (e.g., type, abilities).
3. **Responsive Design:** Optimized for devices of all sizes.

## Tech Stack
- **Next.js**
- **React.js**
- **Tailwind CSS** for styling

## Installation and Setup

Follow these steps to run the project locally:

### Prerequisites
- Node.js installed on your system
- npm (Node Package Manager) or yarn

### Steps

1. **Clone the repository:**
```bash
git clone https://github.com/yourusername/pokemon-website.git
cd pokemon-website
```

2. **Install dependencies:**
```bash
npm install
```
or
```bash
yarn install
```

3. **Start the development server:**
```bash
npm run dev
```
or
```bash
yarn dev
```

4. Open your browser and navigate to `http://localhost:3000` to view the application.

## API Integration

The application uses [https://pokeapi.co/api/v2/pokemon/](https://pokeapi.co/api/v2/pokemon/) for fetching and updating task data. The following REST API endpoints are utilized:

## Scripts

- `npm run dev`: Starts the development server.
- `npm build`: Builds the app for production.
- `npm test`: Runs tests (if configured).

## Learn More

- [React.js Documentation](https://reactjs.org/docs/getting-started.html)
- [Next.js Documentation](https://nextjs.org/docs)
- [Tailwind CSS Documentation](https://tailwindcss.com/docs)
- [https://pokeapi.co/api/v2/pokemon/](https://pokeapi.co/api/v2/pokemon/)

---

## Home Page
![image](https://github.com/user-attachments/assets/f892a8f4-7418-4f72-90cd-346c67056fa9)

## Pokedex Page
![image](https://github.com/user-attachments/assets/e845843c-1aaf-4df3-a632-fb7c658fc6eb)

## For mobile:
![image](https://github.com/user-attachments/assets/83084b77-1cb8-4288-83cb-4fa30b868f43)

![image](https://github.com/user-attachments/assets/8e820963-87ab-45cc-b573-024ac1777424)

Feel free to contribute to this project or provide feedback!