PokéDex

Welcome to PokéDex, a modern and fully responsive Pokémon web application built using React for the frontend and Node.js for the backend. This project offers a seamless and interactive experience for browsing, searching, and exploring detailed information about all your favorite Pokémon.

Powered by the PokéAPI, PokéDex delivers real-time data with a clean UI and smooth performance. Whether you're a casual fan or a true Pokémon Master, this app is designed to make your Pokémon journey engaging and intuitive.

🚀 Tech Stack

• Frontend: React, Tailwind CSS, Shadcn UI
• Backend: Node.js, Express
• API Integration: PokéAPI
• Authentication (optional): Google OAuth / JWT (if used)
• Deployment: Vercel / Render (customize as needed)

---

🌐 Live Demo

• Frontend: https://gallgher-and-mohan.vercel.app/
• Backend API: https://gallgher-and-mohan.onrender.com

Video Presentation

-- presentation

📸 Screenshots

Landing Page:

/

Login Page:

/login

Pokémon Dashboard:

/dashboard

Single Pokémon View:

Use arrow keys (←, →) to navigate on desktop, or swipe left/right on mobile devices.

Search View:

Searched Single Pokémon View:

Use arrow keys (←, →) to navigate on desktop, or swipe left/right on mobile devices.

Profile View:

/profile

Sidebar Closed View:

🚀 Technology Stack

Frontend

• React 18
• TypeScript
• Vite
• Redux for state management
• React Router for navigation
• TailwindCSS for styling
• Radix UI components
• Google OAuth integration

Backend

• Node.js
• Express.js
• TypeScript
• Google Auth Library
• CORS enabled
• Environment variables support

📦 Project Structure

gallgher-and-mohan/
├── client/                 # Frontend React application
│   ├── src/               # Source files
│   ├── public/            # Static files
│   └── dist/              # Build output
└── server/                # Backend Node.js application
    ├── controllers/       # Route controllers
    ├── models/           # Data models
    ├── routes/           # API routes
    └── middlewares/      # Custom middlewares

🛠️ Setup Instructions

Prerequisites

• Node.js (v14 or higher)
• npm or yarn
• Git

Frontend Setup

1. Navigate to the client directory:

   cd client

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

Backend Setup

1. Navigate to the server directory:

   cd server

2. Install dependencies:

   npm install

3. Create a .env file with required environment variables
4. Start the development server:

   npm run dev

🔧 Available Scripts

Frontend

• npm run dev - Start development server
• npm run build - Build for production
• npm run lint - Run ESLint
• npm run preview - Preview production build

🔐 Environment Variables

Frontend (.env)

Create a .env file in the server directory with the following variables:

VITE_GOOGLE_CLIENT_ID=your_google_client_id
VITE_GOOGLE_CLIENT_SECRET=your_google_client_secret
VITE_BACKEND_URL=backend_url

Backend

• npm run dev - Start development server with hot reload
• npm run build - Build TypeScript files
• npm start - Start production server

🔐 Environment Variables

Backend (.env)

Create a .env file in the server directory with the following variables:

PORT=5000
GOOGLE_CLIENT_ID=your_google_client_id

📝 License

This project is licensed under the ISC License.

👥 Contributing

1. Fork the repository
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

Built with ❤️ by Laxminarayan Reddy