DeepFocus

🎯 A distraction-free YouTube learning platform with Google services integration

Features • Tech Stack • Getting Started • Deployment • Contributing

---

📸 Preview

📱 More Screenshots

Home Page	Video Player

Notepad	Playlists

---

✨ Features

🎬 Distraction-Free Video Player Clean, minimal interface Custom video controls Fullscreen support Captions/CC toggle Progress tracking	📝 Integrated Notepad Markdown support Auto-save functionality Timestamps linking Export to Google Drive Obsidian-compatible export
📚 Playlist Management Create custom playlists Import YouTube playlists Add videos to playlists Track watch progress	🔗 Google Services Integration YouTube - Search & play videos Google Drive - Sync notes Google Calendar - Schedule study sessions Google Tasks - Todo management Google Classroom - Course integration

🌙 True Black Theme

Designed for OLED screens with a minimal, eye-friendly dark interface.

Background: oklch(0 0 0)      ████████  Pure Black
Card:       oklch(0.06 0 0)   ████████  Subtle Gray
Border:     oklch(0.15 0 0)   ████████  Soft Border

---

🛠️ Tech Stack

Next.js 16

TypeScript

Tailwind 4

Prisma 7

PostgreSQL

Vercel

Category	Technologies
Framework	Next.js 16 (App Router, Turbopack)
Language	TypeScript 5.x
Styling	Tailwind CSS 4.x, Radix UI, shadcn/ui
Database	PostgreSQL (Vercel Postgres)
ORM	Prisma 7 with Driver Adapters
Auth	NextAuth.js v5 (Auth.js)
APIs	Google APIs (YouTube, Drive, Calendar, Tasks, Classroom)
Video	react-youtube

---

🚀 Getting Started

Prerequisites

• Node.js 18+
• pnpm (recommended) or npm
• PostgreSQL database
• Google Cloud Console project

1️⃣ Clone the repository

git clone https://github.com/ashwin-r11/deepfocus.git
cd deepfocus

2️⃣ Install dependencies

pnpm install
# or
npm install

3️⃣ Set up environment variables

cp .env.example .env

Edit .env with your credentials:

# Database
DATABASE_URL="postgresql://user:password@localhost:5432/deepfocus"

# NextAuth
NEXTAUTH_URL="http://localhost:3000"
NEXTAUTH_SECRET="your-secret-key"  # Generate: openssl rand -base64 32

# Google OAuth
GOOGLE_CLIENT_ID="your-client-id"
GOOGLE_CLIENT_SECRET="your-client-secret"

4️⃣ Set up the database

npx prisma generate
npx prisma db push

5️⃣ Run the development server

pnpm dev
# or
npm run dev

Open http://localhost:3000 🎉

---

🔐 Google OAuth Setup

📋 Step-by-step guide

Create a Google Cloud Project

1. Go to Google Cloud Console
2. Create a new project or select existing
3. Enable the following APIs:
   • ✅ YouTube Data API v3
   • ✅ Google Drive API
   • ✅ Google Calendar API
   • ✅ Google Tasks API
   • ✅ Google Classroom API

Configure OAuth Consent Screen

1. Go to APIs & Services → OAuth consent screen
2. Choose External user type
3. Fill in app information:
   • App name: DeepFocus
   • User support email: Your email
   • Developer contact: Your email
4. Add scopes:

   openid
   email
   profile
   https://www.googleapis.com/auth/youtube.readonly
   https://www.googleapis.com/auth/drive.file
   https://www.googleapis.com/auth/calendar.readonly
   https://www.googleapis.com/auth/tasks
   https://www.googleapis.com/auth/classroom.courses.readonly
   

5. Add test users (required while in testing mode)

Create OAuth Credentials

1. Go to APIs & Services → Credentials
2. Click Create Credentials → OAuth client ID
3. Application type: Web application
4. Add authorized redirect URIs:

   http://localhost:3000/api/auth/callback/google
   https://your-domain.vercel.app/api/auth/callback/google
   

5. Copy Client ID and Client Secret to .env

---

☁️ Deployment

Deploy on Vercel

Manual Deployment Steps

1. Import project on Vercel

2. Create Postgres database:

   • Go to Storage → Create Database → Postgres
   • Copy the DATABASE_URL

3. Set environment variables:

   Variable	Description
   DATABASE_URL	Vercel Postgres connection string
   NEXTAUTH_URL	https://your-app.vercel.app
   NEXTAUTH_SECRET	Random 32-char secret
   GOOGLE_CLIENT_ID	From Google Cloud Console
   GOOGLE_CLIENT_SECRET	From Google Cloud Console

4. Update Google Console with production redirect URI

5. Deploy! 🚀

---

📁 Project Structure

deepfocus/
├── 📂 app/                    # Next.js App Router
│   ├── 📂 api/                # API routes
│   │   ├── 📂 auth/           # NextAuth endpoints
│   │   ├── 📂 playlists/      # Playlist CRUD
│   │   ├── 📂 watch-history/  # Progress tracking
│   │   └── 📂 youtube/        # YouTube API proxy
│   ├── 📂 watch/[id]/         # Video player page
│   ├── 📄 layout.tsx          # Root layout
│   └── 📄 page.tsx            # Home page
├── 📂 components/             # React components
│   ├── 📂 ui/                 # shadcn/ui components
│   ├── 📄 video-stage.tsx     # Video player
│   ├── 📄 notepad.tsx         # Note-taking
│   ├── 📄 playlist-modal.tsx  # Playlist manager
│   └── 📄 tools-panel.tsx     # Side panel
├── 📂 lib/                    # Utilities
│   ├── 📄 auth.ts             # NextAuth config
│   ├── 📄 prisma.ts           # Database client
│   └── 📄 utils.ts            # Helper functions
├── 📂 prisma/                 # Database
│   └── 📄 schema.prisma       # Data models
├── 📂 public/                 # Static assets
└── 📄 package.json

---

📊 Database Schema

erDiagram
    User ||--o{ Account : has
    User ||--o{ Session : has
    User ||--o{ Playlist : creates
    User ||--o{ Note : writes
    User ||--o{ WatchHistory : tracks
    Playlist ||--o{ PlaylistVideo : contains

    User {
        string id PK
        string email
        string name
        string image
    }
    
    Playlist {
        string id PK
        string name
        string userId FK
    }
    
    WatchHistory {
        string id PK
        string videoId
        int progress
        int duration
        datetime lastWatched
    }

Loading

---

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

---

📜 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

🙏 Acknowledgments

• Next.js - React Framework
• shadcn/ui - UI Components
• Prisma - Database ORM
• NextAuth.js - Authentication
• Vercel - Deployment Platform

---

Made with ❤️ by Ashwin

⭐ Star this repo • 🐛 Report Bug • ✨ Request Feature