/my-pokedex-mysql

My Pokedex App

Primary LanguageTypeScript

My Pokedex

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

Tech Stack

  • Next.js
  • TypeScript
  • Prisma
  • MySQL
  • tRPC
  • Material UI

Features

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

Screenshots

Home Page

Home Page

Search for Pokemon

Search for individual Pokemon

Search for multiple Pokemon

Search for multiple Pokemon

Filter Pokemon by type

Filter Pokemon by type - select input Filter Pokemon by type - Result

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

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

DATABASE_URL="mysql://root:password@localhost:3306/my-pokedex"

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

3. Start the MySQL Database

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

./start-database.sh

Instructions for Windows Users

  • Install WSL (Windows Subsystem for Linux)
  • Install Docker Desktop for Windows
  • Open 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

Work in progress...