StudyShots - Educational Video Generation Platform

A full-stack prototype that transforms study materials into engaging 60-second educational videos. Built with Flutter frontend and Flask backend, featuring user authentication, video upload/processing, YouTube Shorts-style vertical scrolling, and freemium subscription model.

🎯 Project Overview

StudyShots addresses the modern student's preference for short-form content by converting traditional study materials into bite-sized, engaging educational videos. The platform mimics the addictive scrolling experience of social media while delivering educational value.

Key Features

• User Authentication: JWT-based login/registration system
• Video Creation: Upload videos, images, and documents for processing
• Vertical Scrolling: YouTube Shorts-style video feed interface
• Freemium Model: 20 free videos/month, premium unlimited access
• Cross-Platform: Flutter app supporting Android and Windows
• Real-time Processing: Video streaming with HTTP Range support

🛠 Tech Stack

Frontend

• Flutter - Cross-platform mobile/desktop development
• Provider - State management
• Video Player - Cross-platform video playback
• File Picker - Document and media upload
• Shared Preferences - Local data persistence

Backend

• Flask - Python web framework
• JWT - Authentication and authorization
• CORS - Cross-origin resource sharing
• Pillow - Image processing and thumbnail generation
• JSON - Simple file-based database

📁 Project Structure

video_generation_prot/
├── backend/
│   ├── app.py                 # Flask backend server
│   ├── requirements.txt       # Python dependencies
│   ├── assets/               # Sample video files
│   ├── thumbnails/           # Generated thumbnails
│   └── uploads/              # User uploaded files
├── studyshots_app/
│   ├── lib/
│   │   ├── main.dart         # App entry point
│   │   ├── theme/            # UI theming
│   │   ├── services/         # API services
│   │   ├── providers/        # State management
│   │   └── screens/          # UI screens
│   ├── assets/               # App assets
│   └── pubspec.yaml          # Flutter dependencies
└── README.md

🚀 Getting Started

Prerequisites

• Python 3.8+
• Flutter SDK
• Git

Backend Setup

cd backend
python -m venv .venv
.venv\Scripts\activate  # Windows
pip install -r requirements.txt
python app.py

Frontend Setup

cd studyshots_app
flutter pub get
flutter run

🎨 UI/UX Features

Design System

• Dark Theme: Black background with orange accent (#F68F1F)
• Modern Interface: Clean, professional appearance
• Responsive Design: Adapts to different screen sizes
• Smooth Animations: Flutter's animation system

Key Screens

1. Authentication: Login/Registration with JWT
2. Home Dashboard: Main navigation and user stats
3. Video Creation: Upload interface with multiple file types
4. Video Library: Vertical scrolling feed (YouTube Shorts style)
5. Subscription: Freemium model implementation

🔧 Technical Highlights

Advanced Features

• Multipart File Uploads: Support for video, image, and document files
• Video Streaming: HTTP Range support for efficient video delivery
• Thumbnail Generation: Automatic thumbnail creation from videos
• Cross-Platform Compatibility: Android and Windows support
• State Management: Provider pattern for app state
• Error Handling: Comprehensive error handling and user feedback

API Endpoints

• POST /api/auth/register - User registration
• POST /api/auth/login - User authentication
• GET /api/user/me - User profile
• POST /api/videos/create - Video creation
• GET /api/videos - Video listing
• GET /api/videos/stream/<id> - Video streaming
• GET /api/videos/thumbnail/<id> - Thumbnail serving

📱 Demo Features

Video Creation Flow

1. Upload video file (optional - uses sample videos)
2. Upload thumbnail image (optional - auto-generated)
3. Upload supporting documents (PDF, DOCX, TXT, MD)
4. Add descriptive text
5. Generate educational video

Video Consumption

• Vertical scrolling interface
• Auto-play with user interaction
• Smooth transitions between videos
• Thumbnail previews
• Share functionality

🎓 Educational Context

This project was developed as part of an educational technology course, demonstrating:

• Modern full-stack development practices
• Cross-platform mobile/desktop development
• API design and implementation
• User experience design for educational applications
• Integration of multimedia content

🔮 Future Enhancements

• AI-powered video generation
• Advanced content recommendation
• Social features and sharing
• Analytics and progress tracking
• Multi-language support
• Advanced video editing tools

📄 License

This project is developed for educational purposes as part of a university course.

👨‍💻 Author

Developed as a course project demonstrating modern software development practices in educational technology.

---

StudyShots - Turning procrastination into productivity through bite-sized learning.