My Pokedex App

A simple Pokedex application built with Next.js, TypeScript, Prisma, and tRPC.

Tech Stack

Next.js
TypeScript
Prisma
PostgreSQL (Supabase)
tRPC
Material UI

Features

Search for individual Pokemon
Search for multiple Pokemon
Filter Pokemon by type

Screenshots

Home Page

Search for Pokemon

Search for multiple Pokemon

Filter Pokemon by type

Prerequisites

Node.js (>=14.0.0)
npm (>=6.0.0) or yarn (>=1.22.0)
Docker (>=20.10.0)

Local Installation

1. Clone the Repository and change directory

git clone https://github.com/your-username/my-pokedex.git
cd my-pokedex

2. Set Up Environment Variables

Note: Before proceeding, make sure you have Docker installed on your machine. Also, make sure to comment out directUrl = env("DIRECT_URL") in the prisma/schema.prisma file as it is not required for local development.

Create a .env file in the root directory of the project and add the following variables:

DATABASE_URL="postgresql://postgres:password@localhost:5432/my-pokedex"

Note: The start-database.sh script will update the DATABASE_URL password if necessary.

3. Start the PostgreSQL Database

Execute the start-database.sh script to start a PostgreSQL database using Docker:

./start-database.sh

Instructions for Windows Users

Install WSL (Windows Subsystem for Linux) - Instructions
Install Docker Desktop for Windows - Instructions
Open WSL - wsl
Run the script - ./start-database.sh

4. Install Dependencies

npm install
# or
yarn install

5. Apply Prisma Migrations

npx prisma generate
npx prisma migrate dev --name init

6. Seed the Database

npm run db:seed

7. Start the Development Server

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

8. Prisma Studio (Optional)

You can use Prisma Studio to view data in the database. Start Prisma Studio with the following command:

npx prisma studio

Deployment

Deployment for this application has been done using Vercel and Supabase.

IamManchanda/my-pokedex