🚀 Todo Test

A Next.js 15 project built with TypeScript, Chakra UI, React Query, Prisma ORM, and Formik/Yup for form handling. This project serves as a template for building modern full-stack applications with a PostgreSQL database (via Prisma), clean UI components, and scalable architecture.

---

📦 Tech Stack

• Framework: Next.js 15 with Turbopack for fast builds
• Language: TypeScript
• UI Library: Chakra UI + Tailwind CSS
• Database: Prisma ORM with PostgreSQL (or other supported DBs)
• Forms: Formik + Yup for validation
• State Management & Data Fetching: TanStack React Query
• Icons: Phosphor Icons, Lucide React, Iconsax
• Package Manager: pnpm for fast, disk space efficient package management

---

⚙️ Prerequisites

Before running the app locally, make sure you have installed:

• Node.js v18 or later
• pnpm - Fast, disk space efficient package manager
• PostgreSQL (or another database supported by Prisma)
• Prisma CLI (comes with prisma package)

Installing pnpm

Install pnpm globally using one of these methods:

# Using npm
npm install -g pnpm

# Using Homebrew (macOS)
brew install pnpm

# Using Scoop (Windows)
scoop install pnpm

# Using Chocolatey (Windows)
choco install pnpm

# Using standalone script
curl -fsSL https://get.pnpm.io/install.sh | sh -

---

🛠️ Setup Instructions

1. Clone the repository

git clone https://github.com/your-username/todo-test.git
cd todo-test

2. Install dependencies

pnpm install

3. Set up environment variables

Create a .env file in the root directory and add your database connection string:

DATABASE_URL="postgresql://USER:PASSWORD@localhost:5432/todo_test"

4. Set up the database

# Generate Prisma client
pnpm run db:generate

# Push schema to database (for development)
pnpm run db:push

# Run database migrations (for production)
pnpm run db:migrate

# Open Prisma Studio (optional)
pnpm run db:studio

# Seed the database with sample data (optional)
pnpm run db:seed

# Reset database (optional - WARNING: This will delete all data)
pnpm run db:reset

5. Run the development server

pnpm run dev

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

---

📝 Available Scripts

# Development
pnpm run dev              # Start development server

# Build & Production
pnpm run build            # Build for production
pnpm run start            # Start production server

# Database Operations
pnpm run db:generate      # Generate Prisma client
pnpm run db:push          # Push schema changes to database
pnpm run db:migrate       # Run database migrations
pnpm run db:studio        # Open Prisma Studio
pnpm run db:seed          # Seed database with sample data
pnpm run db:reset         # Reset database (WARNING: Deletes all data)

---

📁 Project Structure

todo-test/
├── prisma/
│   ├── schema.prisma
│   ├── migrations/                    # Generated by prisma migrate
│   └── seed.ts                        # Database seeding script
├── src/
│   ├── app/                          # Next.js 15 App Router
│   │   ├── layout.tsx                # Root layout
│   │   ├── page.tsx                  # Homepage
│   │   └── api/                      # API routes
│   │       ├── todos/
│   │       │   ├── route.ts          # GET (list with filters + pagination), POST (create)
│   │       │   └── [id]/
│   │       │       └── route.ts      # GET (single), PUT (update), DELETE (delete)
│   │       └── users/
│   │           └── route.ts          # GET (list/search/pagination)
│   ├── components/
│   │   ├── ui/                       # Small UI primitives (badge, inputs, modals)
│   │   └── shared/                   # Larger shared components (data-table, kanban, header)
│   ├── lib/
│   │   └── prisma.ts                 # Prisma client configuration
│   ├── hooks/                        # Custom React hooks
│   │   └── ...                       # (usePrefetchQueryData, etc.)
│   ├── services/
│   │   ├── api-service.ts            # Client-side API service
│   │   └── tanstack-queries/         # React Query configurations
│   ├── styles/                       # Global Sass/Tailwind config
│   ├── types/                        # TypeScript interfaces
│   │   └── ...                       # (TodoResponse, UserResponse, etc.)
│   ├── utils/                        # Utility functions
│   │   └── ...                       # (enum mappers, date helpers, form helpers)
│   └── app-utils/                    # App-level helpers (optional)
├── public/                           # Static assets (images, icons)
├── .env                             # Environment variables (local)
├── package.json
├── tsconfig.json
├── tailwind.config.js
├── next.config.js
└── README.md

---

🚀 Getting Started

1. Install pnpm globally (if not already installed)
2. Clone the repository and navigate to the project directory
3. Install dependencies with pnpm install
4. Set up your database connection in .env
5. Generate Prisma client and push schema with pnpm run db:generate && pnpm run db:push
6. Start the development server with pnpm run dev
7. Visit http://localhost:3000 to see your app

---

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

---

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

📥 Download

You can download this README file by clicking the download button in the top-right corner of this document, or copy the content directly from here.

---

🙏 Acknowledgments

• Next.js team for the amazing framework
• Prisma for the excellent ORM
• Chakra UI for the beautiful component library
• TanStack Query for powerful data fetching