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

    • 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: 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 ...
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