186 lines
4.3 KiB
Markdown
186 lines
4.3 KiB
Markdown
# 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
|
|
|
|
```bash
|
|
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:
|
|
|
|
```bash
|
|
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
|
|
|
|
```bash
|
|
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](https://console.cloud.google.com/)
|
|
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`:
|
|
|
|
```env
|
|
GOOGLE_CLIENT_ID=your-actual-client-id.apps.googleusercontent.com
|
|
GOOGLE_CLIENT_SECRET=your-actual-client-secret
|
|
```
|
|
|
|
### 3. Restart the Dev Server
|
|
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
Now the "Sign in with Google" button will work!
|
|
|
|
---
|
|
|
|
## Database Management
|
|
|
|
### View Database in Prisma Studio
|
|
|
|
```bash
|
|
npx prisma studio
|
|
```
|
|
|
|
Opens a web interface at http://localhost:5555
|
|
|
|
### Reset Database (if needed)
|
|
|
|
```bash
|
|
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! 🎯
|