Write inMarkdown.Convert To Beautiful PDFs

# Claude.md File

This file provides context and guidelines for Claude when assisting in this repository.

---

## 📌 Project Overview

This is a Next.js 16 SaaS application.

Tech Stack:
- Next.js (App Router)
- TypeScript
- Tailwind CSS
- Node.js (API routes)
- PostgreSQL
- Stripe (for subscriptions)

## 🏗 Architecture

- `/app` → App Router pages
- `/components` → Reusable UI components
- `/lib` → Utility functions
- `/actions` → Server actions
- `/types` → TypeScript types

# React Interview Coding Challenges

## Section 1: Beginner Level Challenges (20 Challenges)

These challenges test fundamental React concepts including components, props, state, and basic hooks.

---

### Challenge 1: Task Tracker Application

Create a task tracker application that allows users to manage their daily tasks with categories and priority levels.

#### Requirements:

1. **Task Management:**
   - Allow users to add new tasks with a title, description, category, and priority level (Low, Medium, High).
   - Display all tasks in a list format with visual indicators for priority (e.g., color-coded borders or badges).
   - Implement the ability to mark tasks as complete/incomplete with a checkbox.
   - Allow users to delete tasks with a confirmation prompt.
   - Show the total count of pending and completed tasks.

2. **Categories:**
   - Provide predefined categories: Work, Personal, Shopping, Health, and Other.
   - Allow filtering tasks by category using dropdown or tabs.
   - Display category name alongside each task.

3. **Priority Sorting:**
   - Implement sorting functionality to arrange tasks by priority (High to Low or Low to High).
   - Add a toggle button to switch between sort orders.

4. **Local Storage:**
  

## Database Migrations in Production

When you need to change your database schema, Prisma Migrate helps you manage those changes safely.

### Adding a New Field

Let's say you want to add a `dueDate` field to tasks. First, update your schema from `prisma/schema.prisma` file:

```bash
model Task {
  id          Int       @id @default(autoincrement())
  title       String
  description String?
  completed   Boolean   @default(false)
  priority    String    @default("medium")
  dueDate     DateTime? 
  createdAt   DateTime  @default(now())
  updatedAt   DateTime  @updatedAt
}
```

Then create and apply the migration by executing the following command from terminal:

```bash
npx prisma migrate dev --name add-due-date
```
---

[![React Ebooks Collection](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dt00waa0e5sb77xdckwz.png)](https://courses.yogeshchavan.dev/the-ultimate-react-ebooks-components-hooks-redux-routing-and-more)

* [**Check Out All My Courses**](https://courses.yogeshchavan.dev/)
    
* [**Follow Me On LinkedIn For Regular Updates**](https://www.linkedin.com/in/yogesh-chavan97/)
    
* [**GitHub**](https://github.com/myogeshchavan97).