https://github.com/themihirmathur/pokedex-lite
'Pokedex-Lite' is an advanced web app built using the MERN (MongoDB, Express, React, Node.js) stack. It offers a sleek and interactive way to explore the Pokémon universe. The application leverages the PokéAPI (v2) to fetch Pokémon data and allows users to search, paginate, favorite, and view detailed information about their favorite Pokémon.
https://github.com/themihirmathur/pokedex-lite
css expressjs html mongodb nodejs pokeapi pokeapi-pokedex react-router reactjs scss
Last synced: 3 months ago
JSON representation
'Pokedex-Lite' is an advanced web app built using the MERN (MongoDB, Express, React, Node.js) stack. It offers a sleek and interactive way to explore the Pokémon universe. The application leverages the PokéAPI (v2) to fetch Pokémon data and allows users to search, paginate, favorite, and view detailed information about their favorite Pokémon.
- Host: GitHub
- URL: https://github.com/themihirmathur/pokedex-lite
- Owner: themihirmathur
- Created: 2024-12-28T08:32:29.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-30T07:35:35.000Z (over 1 year ago)
- Last Synced: 2025-12-27T01:59:17.907Z (6 months ago)
- Topics: css, expressjs, html, mongodb, nodejs, pokeapi, pokeapi-pokedex, react-router, reactjs, scss
- Language: JavaScript
- Homepage: https://youtu.be/sZ7TtTUkQyg
- Size: 1.87 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Pokedex-Lite 🐬 Advanced MERN Pokémon Exploration Webapp 🐯
[Click here for Demo (Youtube Link)](https://www.youtube.com/watch?v=sZ7TtTUkQyg)
## Overview
`Pokedex-Lite` is an advanced web application built using the MERN (MongoDB, Express, React, Node.js) stack. It offers a sleek and interactive way to explore the Pokémon universe. With a responsive design and several powerful features, this app ensures an engaging experience for users across all devices.
The application leverages the PokéAPI (v2) to fetch Pokémon data and allows users to search, paginate, favorite, and view detailed information about their favorite Pokémon. It also includes optional features like user authentication and animations for an enhanced user experience.
## Features
### 1. **Data Fetching**
I used the PokéAPI to retrieve a list of Pokémon and implemented robust error handling. Loading states were gracefully managed by displaying spinners or error messages when necessary.
### 2. **Listing & Basic UI**
I displayed Pokémon in a visually appealing grid format with their names and images. The design was made fully responsive, ensuring compatibility across mobile, tablet, and desktop devices.
### 3. **Search**
I provided a search bar that allowed users to filter Pokémon by name in real time as they typed.
### 4. **Pagination**
Instead of fetching all Pokémon at once, I implemented pagination, allowing users to navigate through the Pokémon list efficiently with next and previous buttons.
### 5. **Favorites**
I allowed users to mark Pokémon as favorites and ensured their choices were persisted using local storage, so favorites remained intact even after refreshing the page.
### 6. **Detail View**
I created a detailed view (accessible via a separate page or modal) where users could explore additional data about a Pokémon, such as stats (e.g., HP, attack) and abilities. Users could close the view and return to the main list seamlessly.
### 7. **Build & Deployment**
I provided clear instructions for running the project locally and ensured the app could be easily built for deployment on platforms like Netlify, Vercel, or GitHub Pages.
### **Bonus Features**
1. **User Authentication (OAuth)**
I experimented with a simple login flow using OAuth providers like Google and GitHub to authenticate users.
No one can just `log in`, it will check for the user details!
2. **Animations**
I added subtle animations for hover effects, page transitions, and modal interactions to enhance the user experience.
3. **Server-Side Rendering (SSR)**
I experimented with Next.js to enable server-side rendering, ensuring faster initial loads and improved SEO.
## Getting Started
### Prerequisites
Ensure you have the following installed on your system:
- **Node.js** (v18 or higher)
- **MongoDB**
### Installation
1. Clone the repository:
```bash
git clone https://github.com/themihirmathur/Pokedex-Lite.git
cd Pokedex-Lite
```
2. Install dependencies for both client and server:
```bash
npm install
```
3. Build the project:
```bash
npm run build
```
4. Set up environment variables:
- Make a `.env` file.
- Add the following values:
- `MONGO_URI`: URI of your MongoDB instance.
- `SECRET`: A randomly generated hash for encrypting passwords.
### Running the Application
1. Start the client and server:
```bash
npm run start
```
2. Access the app in your browser at `http://localhost:3000`.
## Technologies Used (MERN Stack)
- **Frontend**: React.js, React Router, CSS for responsive design.
- **Backend**: Express.js, Node.js, MongoDB.
- **API**: PokéAPI v2 for Pokémon data.
- **Deployment**: Configured for platforms like Netlify or Vercel.
## Challenges and Solutions
- **Efficient Data Fetching**: Optimized API calls using pagination to reduce load times and memory usage.
- **Error Handling**: Implemented robust error handling to ensure a smooth user experience even during API failures.
- **Responsive Design**: Used media queries and a mobile-first approach to ensure compatibility across devices.
- **Persistent Favorites**: Leveraged local storage for a seamless experience so they remain after a page refresh.
## Future Plans
1. **Code Refactoring**: Enhance code readability and maintainability by improving modularization and documentation.
2. **Additional Features**: Integrate real-time chat or leaderboard for Pokémon fans.
3. **SSR**: Fully implement server-side rendering for better SEO and faster load times.
## Contributing
Contributions are welcome! Please fork the repository and create a pull request for any feature additions or bug fixes.
---
## **Contact**
If you have any questions or feedback, feel free to reach out:
**Name**: Mihir Mathur
**Email**: [themihirmathur@gmail.com](mailto:themihirmathur@gmail.com)
**Phone**: +91-7525099328