My-Weekly-ToDo-List/SETUP.md

Complete Setup Guide

Quick Start - Get the App Running

Follow these steps to get the app fully functional with signup, signin, and task management:

1. Install Dependencies

npm install

2. Configure Environment Variables

The .env.local file is already configured with:

• ✅ Database connection
• ✅ NextAuth secret
• ⚠️ Google OAuth placeholders (optional - see below)

3. Run Database Migration

IMPORTANT: Run this command to create the database tables:

npx prisma migrate dev --name init_complete_schema

This will create all necessary tables:

• User (with OAuth support)
• Account (for SSO providers)
• Session
• VerificationToken
• Task
• CalendarConnection

4. Start the Application

npm run dev

Visit: http://localhost:3000

---

Using the App

Sign Up (Email/Password)

1. Go to http://localhost:3000/auth/signup
2. Enter email and password (min 8 characters)
3. Click "Sign up"
4. You'll be automatically signed in

Sign In (Email/Password)

1. Go to http://localhost:3000/auth/login
2. Enter your credentials
3. Click "Sign in"

Using TeuxDeux Task Manager

Once signed in, you'll see the minimalist weekly view:

• Add Task: Type in the input box under any day and press Enter
• Edit Task: Click on any task to edit it inline
• Complete Task: Check the checkbox next to a task
• Delete Task: Edit a task and clear all text
• Navigate Weeks: Use Previous/Next buttons at the top

---

Optional: Google Sign-In Setup

To enable "Sign in with Google":

1. Create Google OAuth Credentials

1. Go to Google Cloud Console
2. Create a new project or select existing
3. Navigate to APIs & Services → Credentials
4. Click Create Credentials → OAuth client ID
5. Choose Web application
6. Add these redirect URIs:
   • http://localhost:3000/api/auth/callback/google
   • https://todo.martin-bierschenk.de/api/auth/callback/google (via Reverse Proxy)
   • https://todo.martin-bierschenk.de/api/calendar/google/oauth (via Reverse Proxy)
7. Copy your Client ID and Client Secret

2. Update Environment Variables

Edit .env.local:

GOOGLE_CLIENT_ID=your-actual-client-id.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=your-actual-client-secret

3. Restart the Dev Server

npm run dev

Now the "Sign in with Google" button will work!

---

Database Management

View Database in Prisma Studio

npx prisma studio

Opens a web interface at http://localhost:5555

Reset Database (if needed)

npx prisma migrate reset

⚠️ Warning: This deletes all data

---

Troubleshooting

"Database connection failed"

• Check that PostgreSQL is running on 192.168.178.91:2665
• Verify DATABASE_URL in .env.local is correct

"NextAuth error"

• Ensure NEXTAUTH_SECRET is set in .env.local
• Run npx prisma generate to update Prisma Client

"Tasks not saving"

• Check browser console for API errors
• Ensure you're signed in (session active)
• Try refreshing the page

---

What Works Now

✅ Email/Password Signup - Create account with email
✅ Email/Password Login - Sign in with credentials
✅ Google Sign-In - OAuth authentication (with credentials)
✅ Session Management - Secure JWT sessions
✅ Task Creation - Add tasks to specific days
✅ Task Editing - Inline editing with auto-save
✅ Task Completion - Mark tasks as done
✅ Task Deletion - Remove tasks (clear text)
✅ Task Persistence - All tasks saved to database
✅ Weekly Navigation - Browse different weeks

---

Next Steps (Future Enhancements)

• Drag-and-drop tasks between days
• Markdown support in task descriptions
• "Someday" lists for unscheduled tasks
• Keyboard shortcuts (Cmd+D, Tab, Esc)
• Task rollover (incomplete tasks move to next day)
• Apple Sign In
• Mobile responsive design
• Task search and filtering

---

Architecture

Frontend: Next.js 14, React, TailwindCSS
Authentication: NextAuth.js with Google OAuth + Credentials
Database: PostgreSQL with Prisma ORM
API: Next.js API Routes (RESTful)
Session: JWT-based stateless sessions

Enjoy your minimalist task manager! 🎯