MyToDo — Modern Task Manager backed by Google Drive

A production-ready ToDo web application built with Next.js 16 (App Router), storing all data as JSON files in the user's Google Drive.

Features

• Google Sign-In via OAuth 2.0
• Google Drive storage — no database needed; data lives in your Drive
• Create, edit, delete ToDos with color-coded cards
• Checklist items inside each ToDo
• Free-flow notes with status tracking
• Calendar view (monthly / weekly) with events
• Snooze & repeat-until-completed for calendar events
• Dark mode / Light mode toggle
• Framer Motion animations & transitions
• Fully responsive mobile-first design
• ARIA labels & keyboard navigation

Folder Structure

app/
  layout.tsx             # Root layout with providers
  page.tsx               # Root redirect
  login/page.tsx         # Google sign-in page
  dashboard/
    page.tsx             # Dashboard server component
    dashboard-client.tsx # ToDo grid with search/filter
    todo-card.tsx        # Individual card component
  todo/[id]/
    page.tsx             # ToDo detail server component
    todo-detail-client.tsx # Checklist + Notes + Events tabs
  calendar/
    page.tsx             # Calendar server component
    calendar-client.tsx  # Month/week view with sidebar
  api/auth/[...nextauth]/route.ts # Auth API route

components/
  layout/navbar.tsx      # Top navigation bar
  providers/
    auth-provider.tsx    # NextAuth SessionProvider
    theme-provider.tsx   # Dark/light theme context
  ui/
    button.tsx           # Reusable button
    input.tsx            # Reusable input
    textarea.tsx         # Reusable textarea
    modal.tsx            # Animated modal dialog
    loader.tsx           # Spinner
    skeleton.tsx         # Loading skeleton
    color-picker.tsx     # ToDo color selector
    error-banner.tsx     # Error alert

lib/
  auth.ts               # NextAuth configuration
  google-drive.ts       # Google Drive API helpers
  actions.ts            # Server Actions (CRUD for all entities)
  types/
    index.ts            # TypeScript interfaces & constants
    next-auth.d.ts      # Session type augmentation

middleware.ts            # Auth middleware for protected routes

Setup Instructions

1. Google Cloud Console

1. Go to Google Cloud Console
2. Create a new project (or select existing)
3. Enable APIs:
   • Google Drive API → Enable here
4. Create OAuth 2.0 Credentials:
   • Go to APIs & Services → Credentials
   • Click Create Credentials → OAuth client ID
   • Application type: Web application
   • Authorized redirect URIs: http://localhost:3000/api/auth/callback/google
   • Copy the Client ID and Client Secret
5. Configure OAuth Consent Screen:
   • Add scopes: openid, email, profile, https://www.googleapis.com/auth/drive.file
   • Add your email as a test user (while in "Testing" mode)

2. Environment Variables

Copy the example and fill in your values:

cp .env.example .env.local

Edit .env.local:

GOOGLE_CLIENT_ID=your_client_id_here
GOOGLE_CLIENT_SECRET=your_client_secret_here
AUTH_SECRET=run_npx_auth_secret_to_generate
AUTH_URL=http://localhost:3000

Generate AUTH_SECRET:

npx auth secret

3. Install & Run

npm install
npm run dev

Open http://localhost:3000 and sign in with Google.

4. Google Drive Structure (auto-created)

On first use, the app creates:

My Drive/
  MyToDoApp/
    ToDo.json
    Calendar.json
    FreeFlowText.json
    ToDoItem/
      ToDoItem.json

Tech Stack

Layer	Technology
Framework	Next.js 16 (App Router)
Auth	NextAuth v5 (beta)
Storage	Google Drive API v3
Styling	Tailwind CSS v4
Animations	Framer Motion
Icons	Lucide React
Dates	date-fns
Language	TypeScript 5