🔥 PROMPT: Next.js Todo Application (Modern, Scalable)

-

 

🧠 ROLE

You are a Senior Full-Stack Engineer and Next.js 15+ expert.
Build a production-ready Todo Application using best practices, clean architecture, and reusable components.

🎯 GOAL

Create a fast, responsive, and scalable Todo App that supports authentication, real-time updates, and clean UX.

🧩 TECH STACK (MANDATORY)

  • Framework: Next.js 15+ (App Router)

  • Language: TypeScript

  • Styling: Tailwind CSS

  • State Management: Zustand

  • Forms & Validation: React Hook Form + Zod

  • Data Fetching: TanStack Query

  • Database: PostgreSQL

  • ORM: Prisma

  • Auth: NextAuth (Google SSO + Credentials)

  • Deployment Ready: Vercel

  • API: Next.js Route Handlers

  • Linting: ESLint + Prettier

🧱 CORE FEATURES

✅ Authentication

  • Google OAuth login

  • Email & password login

  • Protected routes (middleware)

  • User-specific todos

📝 Todo Management

  • Create, edit, delete todos

  • Mark todo as completed / pending

  • Due date support

  • Priority levels (Low, Medium, High)

  • Category / Tag support

  • Search & filter todos

  • Sort by date, priority, status

📊 UI / UX

  • Fully responsive (mobile-first)

  • Sidebar navigation

  • Dark / light mode toggle

  • Empty states & loading skeletons

  • Toast notifications

  • Keyboard shortcuts (Enter to add, Cmd/Ctrl + K to search)

⚡ Performance & DX

  • Server Components where applicable

  • Optimistic UI updates

  • Debounced search

  • Reusable UI components

  • Clean folder structure

🗂️ DATABASE SCHEMA (PRISMA)

User
- id
- name
- email
- image
- createdAt

Todo
- id
- title
- description
- completed
- priority
- dueDate
- userId
- createdAt
- updatedAt

🧭 APP STRUCTURE

app/
 ├─ auth/
 ├─ dashboard/
 │   ├─ todos/
 │   ├─ layout.tsx
 ├─ api/
 │   ├─ todos/
 │   ├─ auth/
components/
 ├─ ui/
 ├─ todo/
lib/
 ├─ prisma.ts
 ├─ auth.ts
store/
 ├─ todoStore.ts

🔐 API REQUIREMENTS

  • POST /api/todos – Create todo

  • GET /api/todos – Fetch user todos

  • PUT /api/todos/:id – Update todo

  • DELETE /api/todos/:id – Delete todo

All APIs must:

  • Be authenticated

  • Validate input with Zod

  • Handle errors properly

🧪 EXTRA (OPTIONAL BUT RECOMMENDED)

  • Drag & drop reordering

  • Offline support (local cache)

  • Analytics dashboard (completed vs pending)

  • Export todos as CSV

  • PWA support

📦 DELIVERABLES

  • Complete Next.js project

  • Prisma schema + migrations

  • Environment variable examples

  • README with setup & deployment steps

  • Production-ready code (no placeholders)

🚀 FINAL INSTRUCTION

Follow clean code principles, write scalable components, and ensure the app can be extended into a paid SaaS product later.

If you want, I can also:

  • 🔥 Convert this into a local-only app

  • 💰 Turn this into a paid SaaS prompt

  • 📱 Create a React Native version

  • 🧠 Add AI features (smart task suggestions)

Just tell me 👍

Convert this into a local-only app

Perfect choice 👍
Here’s the converted prompt for a LOCAL-ONLY Todo Application in Next.js — no backend, no auth, no server, fully browser-based, fast, and privacy-friendly.

You can paste this as-is into an AI code generator.

🔥 PROMPT: Local-Only Todo Application (Next.js)

🧠 ROLE

You are a Senior Frontend Engineer and Next.js 15+ expert.
Build a local-only, offline-first Todo Application that runs entirely in the browser.

🎯 GOAL

Create a fast, minimal, privacy-first Todo App where all data is stored locally and never leaves the user’s device.

🧩 TECH STACK (MANDATORY)

  • Framework: Next.js 15+ (App Router)

  • Language: TypeScript

  • Styling: Tailwind CSS

  • State Management: Zustand

  • Forms: React Hook Form

  • Validation: Zod

  • Storage: localStorage (with hydration handling)

  • Deployment: Vercel (static compatible)

🚫 NO BACKEND
🚫 NO DATABASE
🚫 NO AUTHENTICATION

🧱 CORE FEATURES

📝 Todo Management

  • Create, edit, delete todos

  • Mark as completed / pending

  • Due date support

  • Priority (Low / Medium / High)

  • Tags / categories

  • Drag & drop reorder

  • Bulk actions (mark all complete, delete completed)

🔍 Search & Filter

  • Search by title or tag

  • Filter by:

    • Completed / Pending

    • Priority

    • Category

    • Due date (Today / This Week / Overdue)

  • Sort by:

    • Created date

    • Due date

    • Priority

🎨 UI / UX

  • Fully responsive (mobile-first)

  • Sidebar navigation

  • Light / Dark mode (saved locally)

  • Smooth animations

  • Empty states & skeleton loaders

  • Toast notifications

  • Keyboard shortcuts

⚡ Offline-First Behavior

  • Persist todos to localStorage

  • Load data safely after hydration

  • Auto-save on every change

  • Graceful handling if storage is unavailable

🗂️ STATE STRUCTURE (ZUSTAND)

Todo {
  id: string
  title: string
  description?: string
  completed: boolean
  priority: 'low' | 'medium' | 'high'
  dueDate?: string
  tags: string[]
  createdAt: string
}

🧠 ZUSTAND STORE REQUIREMENTS

  • Add / update / delete todo

  • Toggle completion

  • Reorder todos

  • Persist & rehydrate from localStorage

  • Versioned storage (for future migrations)

🧭 APP STRUCTURE

app/
 ├─ layout.tsx
 ├─ page.tsx
components/
 ├─ todo/
 │   ├─ TodoItem.tsx
 │   ├─ TodoList.tsx
 │   ├─ TodoForm.tsx
 ├─ ui/
store/
 ├─ useTodoStore.ts
lib/
 ├─ storage.ts
 ├─ constants.ts

🔐 DATA HANDLING RULES

  • Use client components only

  • Guard window access (typeof window !== 'undefined')

  • Prevent hydration mismatch

  • No server actions

  • No API routes

🧪 OPTIONAL (BONUS FEATURES)

  • PWA support (offline installable)

  • Import / Export todos (JSON)

  • Undo / redo

  • Daily productivity stats

  • Focus mode

📦 DELIVERABLES

  • Complete Next.js project

  • Clean, reusable components

  • Well-documented Zustand store

  • Local persistence logic

  • README with setup instructions

🚀 FINAL INSTRUCTION

This app must:

  • Work 100% offline

  • Be blazing fast

  • Respect user privacy

  • Be easily extendable later into a SaaS app

Comments

Post a Comment

Popular posts from this blog

Prompt Todo version 2

-
  🧠 ROLE You are a Senior Frontend Engineer and Next.js 15+ expert . Build a local-only, offline-first Todo Application that runs entirely in the browser. 🎯 GOAL Create a fast, minimal, privacy-first Todo App where all data is stored locally and never leaves the user’s device. 🧩 TECH STACK (MANDATORY) Framework: Next.js 15+ (App Router) Language: TypeScript Styling: Tailwind CSS State Management: Zustand Forms: React Hook Form Validation: Zod Storage: localStorage (with hydration handling) Deployment: Vercel (static compatible) 🚫 NO BACKEND 🚫 NO DATABASE 🚫 NO AUTHENTICATION 🧱 CORE FEATURES 📝 Todo Management Create, edit, delete todos Mark as completed / pending Due date support Priority (Low / Medium / High) Tags / categories Drag & drop reorder Bulk actions (mark all complete, delete completed) 🔍 Search & Filter Search by title or tag Filter by: Completed / Pending Priority ...
Read more

Privacy Policy

-
Paisa Track is a fully offline expense tracker. We are committed to protecting your privacy. This policy explains what data we collect, how we use it, and your rights. 1. Information We Collect Since Paisa Track works completely offline, all data you enter is stored locally on your device only. We do not collect, transmit, or store any personal data on external servers. Data stored locally on your device: • Expense and income records you manually enter • Category names and budget limits you set • App preferences and settings No internet connection is required or used by this app. 2. Data Storage & Security All your financial data is stored exclusively in your device's local storage (SQLite database). We do not have access to your data at any time. Your data is protected by your device's built-in security (screen lock, encryption). Uninstalling the app will permanently delete all stored data from your device. 3. Permissions We Request Paisa Track requests only the minimum pe...
Read more