📚 StudySync AI

Transform Your Learning Experience with AI-Powered Study Tools — Master Knowledge, One Concept at a Time

📖 Table of Contents

Overview
Features
Tech Stack
Getting Started
Backend Server Setup
Project Structure
Pages & Previews
Deployment
API Integration
Contributing
License
Credits

✨ Overview

StudySync AI is an AI-powered learning platform designed to revolutionize how students learn, practice, and master complex concepts. By leveraging cutting-edge AI technology, the platform provides personalized learning experiences that adapt to each user's unique learning style and pace.

🎯 Key Highlights

🤖 AI-Powered Learning: Gemini AI integration for intelligent content analysis and generation
🎓 Interactive Tools: Flashcards, quizzes, and interactive learning modules
🎥 Video Learning: Smart video player with transcript integration
🗺️ Roadmap Generator: Personalized learning paths based on your goals
📱 Real-time Sync: Supabase-powered real-time data synchronization
🎨 Modern UI: Beautiful, responsive interface with smooth animations
👥 Social Learning: Collaborative features for group learning experiences

💡 Mission & Vision

📚 Mission: Make high-quality, personalized education accessible to everyone through intelligent AI assistance
🌍 Vision: Create the world's most effective AI-powered learning ecosystem that adapts to every learner's unique needs

⚡ Features

🔥 Core Features

Feature	Description
🧠 AI Content Analysis	Automatically analyze documents, videos, and content to generate study materials
🎯 Interactive Flashcards	Create, review, and practice with AI-generated flashcards
🧩 Adaptive Quizzes	Personalized quizzes that adapt to your learning progress
📹 Video Learning	Integrated video player with transcript and AI-powered summarization
🗺️ Learning Roadmaps	Generate personalized study paths based on your goals
💬 AI Chat Assistant	Get instant answers to your questions with our AI tutor
📊 Progress Tracking	Monitor your learning progress with detailed analytics
🌙 Dark Mode First	Beautiful dark theme by default with light mode toggle
📱 Fully Responsive	Seamless experience across desktop, tablet, and mobile devices
🔐 Secure Authentication	Supabase-powered user authentication and data security

🎮 Advanced Features

Feature	Description
📝 Document Upload	Upload PDFs, Word docs, and other formats for AI processing
🎧 Transcript Integration	Automatic transcript generation and analysis for video content
🏆 Learning Gamification	Points, badges, and leaderboards to keep you motivated
📅 Study Scheduling	Intelligent study schedule recommendations
🤝 Collaborative Learning	Share flashcards and quizzes with peers
📈 Performance Analytics	Detailed insights into your learning patterns and progress

🧱 Tech Stack

Frontend

Framework: React 18 with Vite
Language: TypeScript 5.0+
UI Library: React + Custom Components
Styling: TailwindCSS + CSS Modules
Animations: Custom CSS animations and transitions
Icons: Lucide React + Custom SVG icons
Forms: React Hook Form + Zod validation
Theme: Custom dark/light mode implementation

Backend & Database

Database: Supabase (PostgreSQL + Authentication)
Real-time: Supabase real-time updates
Storage: Supabase Storage (for document uploads)
Authentication: Supabase Auth
AI Integration: Google Gemini API

Development Tools

Build Tool: Vite
Package Manager: npm
Linting: ESLint + Prettier
Deployment: Vercel / Netlify
Version Control: Git & GitHub

Key Dependencies

{
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "typescript": "^5.0.2",
  "vite": "^4.4.5",
  "@supabase/supabase-js": "^2.38.4",
  "@google/generative-ai": "^0.1.3",
  "tailwindcss": "^3.3.3",
  "lucide-react": "^0.294.0"
}

🧭 Pages & Previews

🏠 Dashboard

Your personalized learning hub with progress tracking, recent activity, and quick access to tools.

📹 Video Learning

Integrated video player with transcript and AI-powered analysis.

🗺️ Roadmap Generator

Personalized learning paths based on your goals and current knowledge.

💬 AI Chat Interface

Interactive chat with AI tutor for instant help and explanations.

🚀 Getting Started

Prerequisites

Before you begin, ensure you have the following installed:

Node.js 18.x or higher (Download)
npm or yarn package manager
Git (Download)
Supabase Account (Sign Up)
Google Gemini API Key (Get API Key)

Installation

Clone the repository

git clone https://github.com/abhayclasher/StudySync-AI.git
cd StudySync-AI

Install dependencies
```
npm install
```
Set up Supabase
- Create a new Supabase project at Supabase Console
- Enable authentication and create required tables
- Copy your Supabase URL and Anon Key
- Create a .env.local file in the root directory:
```
VITE_SUPABASE_URL=your_supabase_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key
VITE_GEMINI_API_KEY=your_gemini_api_key
YOUTUBE_API_KEY=your_youtube_api_key  # Optional but recommended for enhanced functionality
```
Important Security Note:
- Never commit actual API keys to version control
- Always use .env.local for local development
- For production deployment, add these variables in your hosting platform's environment settings (Vercel, Netlify, etc.)
Important Supabase Configuration:
- After creating your Supabase project, go to Authentication → Settings
- Add these URLs to "Redirect URLs":
  - For local development: http://localhost:3000
  - For deployed app: your deployed URL (e.g., https://your-app-name.vercel.app)
- Enable the authentication providers you want to use (Google, GitHub, etc.)
For Production Deployment (Vercel): Add these environment variables in your Vercel project settings:
- VITE_SUPABASE_URL
- VITE_SUPABASE_ANON_KEY
- VITE_GEMINI_API_KEY
Run the development server
```
npm run dev
```
Open your browser Navigate to http://localhost:5173

Build for Production

npm run build
npm run preview

🖥️ Backend Architecture

Serverless Functions (Vercel)

StudySync AI now uses Vercel serverless functions instead of a traditional backend server. This provides better scalability and easier deployment.

The serverless functions are located in the api/ directory and handle:

YouTube transcript extraction
Video and playlist processing
All API endpoints previously handled by the separate backend

API Endpoints

Endpoint	Method	Description	Request Body
`/api/transcript`	POST	Fetch YouTube video transcript	`{ "url": "youtube_video_url" }`
`/api/video`	POST	Process YouTube videos/playlist	`{ "url": "youtube_video_url" }`
`/api/playlist`	POST	Fetch YouTube playlist videos	`{ "url": "youtube_playlist_url" }`

Environment Variables

For Vercel deployment, ensure these environment variables are set in your Vercel project settings:

YOUTUBE_API_KEY: YouTube API key for enhanced functionality (optional, as functions have fallback methods)

🧩 Project Structure

StudySync-AI/
│
├── api/                          # API endpoints and transcript handling
│   ├── playlist.js               # YouTube playlist processing
│   └── transcript.js             # Transcript generation and processing
│
├── components/                   # React components
│   ├── ui/                       # Reusable UI components
│   │   ├── 3d-card.tsx
│   │   ├── apple-cards-carousel.tsx
│   │   ├── bento-grid.tsx
│   │   ├── colourfull-text.tsx
│   │   ├── container-scroll-animation.tsx
│   │   ├── evervault-card.tsx
│   │   ├── particles.tsx
│   │   ├── sidebar.tsx
│   │   ├── sticky-scroll-reveal.tsx
│   │   ├── tabs.tsx
│   │   ├── text-generate-effect.tsx
│   │   └── wobble-card.tsx
│   ├── AuthModal.tsx             # Authentication modal
│   ├── ChatInterface.tsx         # AI chat interface
│   ├── Dashboard.tsx             # Main dashboard
│   ├── DocumentUpload.tsx        # Document upload component
│   ├── FlashcardDeck.tsx         # Flashcard system
│   ├── LandingPage.tsx           # Landing page
│   ├── QuizArena.tsx             # Quiz system
│   ├── RightSidebar.tsx          # Right sidebar
│   ├── RoadmapGenerator.tsx      # Learning roadmap generator
│   ├── Sidebar.tsx               # Main sidebar
│   └── VideoPlayer.tsx           # Video player with transcript
│
├── hooks/                        # Custom React hooks
│   └── use-outside-click.tsx
│
├── lib/                          # Utility functions & configs
│   ├── supabase.ts               # Supabase client initialization
│   └── utils.ts                  # Helper functions
│
├── server/                       # Server-side code
│   ├── index.js                  # Server entry point
│   ├── package.json
│   └── package-lock.json
│
├── services/                     # Business logic services
│   ├── db.ts                     # Database service
│   └── geminiService.ts          # Gemini AI service
│
├── public/                       # Static assets
│   └── *.svg                     # Icons and images
│
├── .env.example                  # Environment variables template
├── .gitignore                    # Git ignore configuration
├── App.tsx                       # Main application component
├── index.html                    # HTML entry point
├── index.tsx                     # React entry point
├── package.json                  # Project dependencies
├── setup-database.js             # Database setup script
├── supabase_init.sql             # Database initialization SQL
├── tsconfig.json                 # TypeScript configuration
├── vite.config.ts                # Vite configuration
└── README.md                     # Project documentation

🔗 API Integration

Gemini AI Integration

StudySync AI leverages Google's Gemini API for intelligent content analysis and generation:

Document Analysis: Automatically analyze uploaded documents to extract key concepts
Quiz Generation: Create personalized quizzes based on learning materials
Explanation Generation: Provide detailed explanations for complex topics
Content Summarization: Generate concise summaries of lengthy content

Supabase Integration

Authentication: Secure user authentication and authorization
Database: Real-time data synchronization and storage
Storage: Document and media file storage
Real-time: Live updates for collaborative features

YouTube Integration

Video Processing: Analyze YouTube videos for educational content
Transcript Extraction: Automatically extract and process video transcripts
Playlist Management: Handle entire YouTube playlists for comprehensive learning

🚀 Deployment

Live Site

The application is deployed on Vercel for optimal performance and reliability.

🌍 Visit: studysync-ai.vercel.app

Deploy Your Own

Option 1: Deploy to Vercel (Recommended)

Click the button above
Connect your GitHub account
Add environment variables (Supabase, Gemini API, and YouTube API config)
Set Build Command: npm run build (Vercel will auto-detect this but you can verify)
Set Output Directory: dist (Vercel will auto-detect this but you can verify)
Add Node.js version: 18.x or higher
Deploy!

Required Environment Variables for Vercel:

VITE_SUPABASE_URL: Your Supabase project URL
VITE_SUPABASE_ANON_KEY: Your Supabase anon key
VITE_GEMINI_API_KEY: Your Google Gemini API key
YOUTUBE_API_KEY: Your YouTube Data API key (optional, but recommended for full functionality)

Important: After deployment, make sure to configure Supabase authentication:

Go to your Supabase dashboard
Navigate to Authentication → Settings (or URL Configuration in older versions)
Add your deployed URL (e.g., https://your-app-name.vercel.app) to the "Redirect URLs" field
For local development, make sure to include http://localhost:5173 in the "Redirect URLs" field
For social logins (Google, GitHub), these redirect URLs must match exactly what you're using in your application

Option 2: Manual Deployment

Install Dependencies:

npm install

Build for Production:

npm run build

Deploy with Vercel CLI:

# Install Vercel CLI globally
npm install -g vercel

# Deploy to production
vercel --prod

Preview locally:

npm run preview

Option 3: Other Platforms

Netlify: Use the included build configuration (Build command: npm run build, Publish directory: dist)
Docker: Build a container with your preferred setup
Self-hosted: Deploy on any Node.js server with the required dependencies

🤝 Contributing

We welcome contributions from the community! Here's how you can help:

Ways to Contribute

🐛 Report Bugs: Open an issue describing the problem
💡 Suggest Features: Share your ideas for improvements
🔧 Submit Pull Requests: Fix bugs or add new features
📚 Improve Documentation: Help make the docs better
🌍 Spread the Word: Share StudySync AI with others

Development Workflow

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

Code Standards

Follow the existing code style
Write meaningful commit messages
Add comments for complex logic
Test your changes thoroughly
Update documentation as needed

📄 License

This project is licensed under the MIT License.

✅ Permitted: Personal use, modifications, commercial use
✅ Required: Include copyright notice and license in all copies

See the LICENSE file for complete terms.

🙏 Acknowledgments

Supabase for providing robust real-time database infrastructure
Vercel for seamless deployment and hosting
Google Gemini for powerful AI capabilities
React Team for the incredible component framework
Open Source Community for inspiration and support
YouTube API for video content integration

🛠️ Troubleshooting

Common Login Issues

1. Login not working after deployment:

Make sure you've properly set the environment variables in your deployment platform
Check that your Supabase project has the correct redirect URLs configured in Authentication settings
Verify that the deployed URL is added to both "Redirect URLs" and "Additional URLs" in Supabase

2. Supabase client not initialized:

Ensure VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY are correctly set
Check that the environment variables are properly prefixed with VITE_ for Vite to expose them

3. Social login not working:

For Google/GitHub OAuth, make sure to configure the providers in your Supabase Authentication settings
Add the correct redirect URLs for your deployed application
Example redirect URLs: https://your-app-name.vercel.app, http://localhost:5173

4. After successful login, page doesn't update:

This might be due to a missing auth state listener
Make sure the Supabase client is properly initialized with correct credentials
Check browser console for any error messages

5. Social login redirects to wrong URL (e.g., localhost:3000 instead of localhost:5173):

This is caused by incorrect redirect URL configuration in your Supabase authentication settings
Go to your Supabase dashboard → Authentication → Settings
Update the "Redirect URLs" to match your application's URL (e.g., http://localhost:5173 for local development, your deployed URL for production)
Make sure to include all possible URLs where your app runs

📞 Support & Contact

Need help or have questions?

📧 Email: abhaypro.cloud@gmail.com
🐛 Issues: GitHub Issues
💬 Discussions: GitHub Discussions

❤️ Credits

👨‍💻 Developed by

Abhay Kumar

🧠 Full Stack Web Developer | 21 | Kolkata, India 🇮🇳
Building technology that transforms learning through AI and innovation

🏆 About the Developer

💻 Passionate about creating impactful solutions with modern web technologies
🎯 Focused on education technology and AI-powered learning
🎓 Self-taught developer with expertise in React, TypeScript, and AI integration
♟️ Hobbies: Chess, Cricket, and Open Source Contribution

🔗 Connect With Me

💭 Project Philosophy

"Every concept mastered, every milestone achieved."

This project was born from a simple belief: technology should enhance learning.
In today's world, everyone deserves access to personalized, effective learning tools.
StudySync AI eliminates barriers between complex concepts and understanding.

No limits. No boundaries. Just learning unleashed.

⭐ If this project helped you or someone you know, please star it! ⭐
Your support motivates continued development and helps others discover this resource.

❤️ Made with passion in India 🇮🇳
_{Dedicated to everyone working to make education accessible and effective}

Name		Name	Last commit message	Last commit date
Latest commit History 106 Commits
api		api
components		components
hooks		hooks
lib		lib
migrations		migrations
public		public
server		server
services		services
supabase/migrations		supabase/migrations
types		types
utils		utils
.env.example		.env.example
.gitignore		.gitignore
App.tsx		App.tsx
README.md		README.md
components.json		components.json
favicon.svg		favicon.svg
index.css		index.css
index.html		index.html
index.tsx		index.tsx
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
run-migrations.js		run-migrations.js
setup-database.js		setup-database.js
supabase_init.sql		supabase_init.sql
tailwind.config.js		tailwind.config.js
tsconfig.json		tsconfig.json
types.ts		types.ts
vercel.json		vercel.json
vite.config.ts		vite.config.ts

Folders and files

Latest commit

History

Repository files navigation

📚 StudySync AI

📖 Table of Contents

✨ Overview

🎯 Key Highlights

💡 Mission & Vision

⚡ Features

🔥 Core Features

🎮 Advanced Features

🧱 Tech Stack

Frontend

Backend & Database

Development Tools

Key Dependencies

🧭 Pages & Previews

🏠 Dashboard

📹 Video Learning

🗺️ Roadmap Generator

💬 AI Chat Interface

🚀 Getting Started

Prerequisites

Installation

Build for Production

🖥️ Backend Architecture

Serverless Functions (Vercel)

API Endpoints

Environment Variables

🧩 Project Structure

🔗 API Integration

Gemini AI Integration

Supabase Integration

YouTube Integration

🚀 Deployment

Live Site

Deploy Your Own

Option 1: Deploy to Vercel (Recommended)

Option 2: Manual Deployment

Option 3: Other Platforms

🤝 Contributing

Ways to Contribute

Development Workflow

Code Standards

📄 License

🙏 Acknowledgments

🛠️ Troubleshooting

Common Login Issues

📞 Support & Contact

❤️ Credits

👨‍💻 Developed by

Abhay Kumar

🏆 About the Developer

🔗 Connect With Me

💭 Project Philosophy

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages