Learnsy 🎓

A distraction-free, YouTube-powered study platform for deep learning and habit-building

Features • Demo • Getting Started • Tech Stack • Contributing

---

🌟 Features

• 📺 Import YouTube Playlists - Transform any public YouTube playlist into a structured study course
• ✅ Smart Progress Tracking - Videos auto-complete at 30% watch time with real-time streak updates
• 🔥 GitHub-Style Streaks - Visual heatmap to track your daily learning consistency
• 📝 Notes & Bookmarks - Take notes and bookmark important videos for later review
• 🎯 Dashboard Analytics - Track watched videos, active streaks, and course completion
• ⚡ Real-time Updates - All stats update instantly without page refresh
• 🌓 Dark Mode - Pure black theme for comfortable studying
• 🔐 Secure Authentication - Google OAuth powered by Clerk
• 📱 Fully Responsive - Mobile-friendly with collapsible sidebar navigation
• ⌨️ Keyboard Shortcuts - Fast navigation with hotkeys (C, B, N, P, L)

---

🎬 Demo

Coming soon!

---

🛠️ Tech Stack

Frontend

• Framework: Next.js 14 with App Router
• Language: TypeScript
• Styling: Tailwind CSS
• UI Components: shadcn/ui
• Icons: Lucide React

Backend

• API: Next.js API Routes (Server Actions)
• Database: Neon (Serverless PostgreSQL)
• Authentication: Clerk
• External API: YouTube Data API v3

Deployment

• Hosting: Vercel
• Database: Neon Cloud

---

🚀 Quick Setup

1. Clone and Install

git clone <your-repo>
cd learnsy
npm install

2. Set up Neon Database

1. Create a Neon project at neon.tech
2. Copy the connection string from your Neon dashboard
3. Run the database schema:
   • Go to Neon SQL Editor
   • Copy and run the contents of /database/schema.sql

3. Set up Clerk Authentication

1. Create a Clerk application at clerk.com
2. Enable Google OAuth in Social Connections
3. Copy your API keys from the Clerk dashboard

4. Set up YouTube API

1. Go to Google Cloud Console → APIs & Services
2. Enable YouTube Data API v3
3. Create API Key

5. Configure Environment Variables

Create a .env.local file in the project root:

# Database (Neon)
DATABASE_URL=postgres://user:password@ep-xxx.us-east-2.aws.neon.tech/neondb?sslmode=require

# Clerk Authentication
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_xxxxxxxxxxxxxxxxxxxxx
CLERK_SECRET_KEY=sk_test_xxxxxxxxxxxxxxxxxxxxx

# YouTube API
YOUTUBE_API_KEY=AIzaSyxxxxxxxxxxxxxxxxxxxxx

See .env.example for a full template.

6. Start Development Server

npm run dev

Visit http://localhost:3000 to see your app!

---

📊 Database Schema

The app uses the following main tables:

• courses - Imported YouTube playlists
• videos - Individual videos from playlists
• user_progress - User's progress, notes, and bookmarks
• streak_activity - Daily learning activity tracking
• video_timestamps - Resume playback functionality

All tables have Row Level Security (RLS) enabled for data protection.

---

🚀 Deployment

Deploy to Netlify

1. Connect your repository to Netlify
2. Set environment variables in Netlify dashboard:

   NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
   NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
   YOUTUBE_API_KEY=your_youtube_api_key
   

3. Deploy - Netlify will automatically build and deploy your app

Update Supabase Auth Settings

After deployment, update your Supabase project:

1. Go to Authentication → URL Configuration
2. Add your production URL to Site URL and Redirect URLs:
   • Site URL: https://your-app.netlify.app
   • Redirect URLs: https://your-app.netlify.app/auth/callback

---

📂 Project Structure

/app
├── (dashboard)/          # Protected dashboard routes
│   ├── dashboard/        # Main dashboard
│   ├── courses/          # Course management
│   ├── study/[id]/[vid]/ # Video study interface
│   ├── bookmarks/        # Saved bookmarks
│   └── notes/            # User notes
├── actions/              # Server actions
└── globals.css           # Global styles

/components
├── ui/                   # Reusable UI components
├── auth-provider.tsx     # Authentication context
├── youtube-player.tsx    # Video player component
└── ...                   # Other components

/lib
├── supabase.ts          # Supabase client
├── database.ts          # Database service layer
└── youtube-server.ts    # YouTube API functions

/supabase
└── migrations/          # Database migrations

---

🔧 Configuration

Environment Variables

Variable	Description	Required
NEXT_PUBLIC_SUPABASE_URL	Your Supabase project URL	✅
NEXT_PUBLIC_SUPABASE_ANON_KEY	Your Supabase anonymous key	✅
YOUTUBE_API_KEY	YouTube Data API v3 key	✅

Features Configuration

• Playlist Limit: Users can import up to 4 playlists (configurable in app/actions/youtube.ts)
• Auto-complete: Videos auto-complete at 90% progress
• Resume Playback: Videos resume from last watched position
• Streak Tracking: Daily activity tracking with visual calendar

---

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

---

� Deployment

For detailed deployment instructions to production, see DEPLOYMENT.md

Quick deploy:

1. Set up Neon database and run schema
2. Configure Clerk authentication
3. Connect GitHub repo to Vercel
4. Add environment variables in Vercel
5. Deploy!

Recommended stack: Neon + Clerk + Vercel (all have generous free tiers)

---

�📄 License

MIT License - see LICENSE file for details

---

👤 Author

Made with ❤️ by Alok Tripathi

• GitHub: @aloktripathi1

---

🆘 Support

If you encounter any issues:

1. Check the Issues page
2. Create a new issue with detailed information
3. Include error messages and steps to reproduce

---

🎯 Roadmap

• Video speed controls
• Offline mode support
• Course sharing
• Advanced analytics
• Mobile app
• AI-powered study recommendations