Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ermanzohre/pokedex-webapp
Pokedex Web App is a modern and responsive web application that allows users to explore Pokémon data, including types, moves, and detailed stats. Built with Next.js, Apollo Client, and GraphQL, it demonstrates state management with Zustand, styled-components for UI design, and a robust testing setup with Jest and React Testing Library.
https://github.com/ermanzohre/pokedex-webapp
apollo-client graphql javascript jest-test nextjs react react-testing-library styled-components zustand
Last synced: about 1 month ago
JSON representation
Pokedex Web App is a modern and responsive web application that allows users to explore Pokémon data, including types, moves, and detailed stats. Built with Next.js, Apollo Client, and GraphQL, it demonstrates state management with Zustand, styled-components for UI design, and a robust testing setup with Jest and React Testing Library.
- Host: GitHub
- URL: https://github.com/ermanzohre/pokedex-webapp
- Owner: ermanzohre
- License: mit
- Created: 2024-12-06T10:15:20.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2024-12-06T11:22:18.000Z (about 1 month ago)
- Last Synced: 2024-12-06T11:26:06.440Z (about 1 month ago)
- Topics: apollo-client, graphql, javascript, jest-test, nextjs, react, react-testing-library, styled-components, zustand
- Language: JavaScript
- Homepage: https://pokedex-erman.vercel.app/
- Size: 249 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Pokedex App
Pokedex App is a Pokémon discovery application where users can explore different Pokémon types, view Pokémon details, and analyze their moves' accuracy visually.
## Features
- **View Pokémon Types**: Displays a list of different Pokémon types.
- **Search Feature**: Allows users to search for Pokémon by name.
- **Pokémon Details**: Displays details about a Pokémon, including its types and moves' accuracy.
- **Responsive Design**: Optimized for both mobile and desktop devices.
## Technologies Used
- **React.js**: For building the user interface.
- **Next.js**: For server-side rendering and routing.
- **Apollo Client**: For data fetching and state management via GraphQL.
- **Material-UI**: For pre-styled components.
- **Styled-Components**: For modular and component-scoped CSS.
- **Zustand**: For state management.
- **Jest & React Testing Library**: For testing.
- **SWC**: For fast testing and build transformations.
## Getting Started
To get started with the Pokedex App, follow these steps:
1. **Install dependencies:**
```zsh
npm install
```
2. **Run the development server:**
```zsh
npm run dev
```
3. **Open the application in your browser: http://localhost:3000**
4. **Build for Production**
**To build the application for production:**
```zsh
npm run build
```
5. **Testing**
**Run tests with the following command:**
```zsh
npm test
```
## Project Structure
```plaintext
pokedex-app/
├── public/ # Static files (favicon, images, etc.)
├── src/
│ ├── components/ # Reusable UI components
│ ├── graphql/ # GraphQL queries and mutations
│ ├── pages/ # Next.js pages
│ ├── store/ # Zustand store for state management
│ ├── styles/ # Global and styled-component styles
│ └── utils/ # Helper functions and constants
├── test/ # Unit and integration tests
│ ├── components/ # Tests for components
│ └── store/ # Tests for the store
```
## API Integration
This project uses [PokeAPI GraphQL](https://pokeapi.co/) for fetching Pokémon data.