Skip to content

README.md

Latest commit

 

History

History
406 lines (317 loc) · 10.3 KB

README.md

File metadata and controls

406 lines (317 loc) · 10.3 KB

DeepFocus Logo

DeepFocus

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

Features • Tech Stack • Getting Started • Deployment • Contributing

Next.js TypeScript Tailwind CSS Prisma

License Stars Forks

📸 Preview

Home Page

📱 More Screenshots
Home Page Video Player
Home Player
Notepad Playlists
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
Next.js 16 		TypeScript
TypeScript 		Tailwind
Tailwind 4 		Prisma
Prisma 7 		PostgreSQL
PostgreSQL 		Vercel
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

Deploy with 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

Made with ❤️ by Ashwin

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