A comprehensive web-based educational platform that connects students and teachers through an intuitive learning management system. Built with modern web technologies and a focus on user experience.
Study Hub is a full-featured educational platform designed to facilitate online learning and classroom management. It provides separate dashboards for students and teachers, enabling efficient resource sharing, assignment management, and interactive learning through features like flashcards and AI assistance.
- Class Management: Join classes using unique class codes, view enrolled classes
- Resource Library: Access and upload educational resources (documents, videos, notes)
- Assignment System: Submit assignments, view grades and feedback
- Flashcard Learning: Create personal flashcard sets, complete flashcard assignments
- Study Timer: Pomodoro timer for focused study sessions
- AI Assistant: Google Gemini-powered analysis of uploaded documents (PDF/DOCX) and URLs to generate summaries, study plans, and flashcards with intelligent content parsing
- Grade Tracking: View grades across all classes with detailed breakdowns
- Commenting System: Engage with peers through resource comments
- Class Creation: Create and manage multiple classes with unique join codes
- Student Management: View enrolled students, track attendance and performance
- Resource Management: Upload official resources, manage class materials
- Assignment Creation: Create various assignment types including flashcard assignments
- Grading System: Grade submissions, provide feedback, track student progress
- Analytics: View class statistics and student performance metrics
- React 18: Modern component-based UI framework (src/ directory)
- TypeScript: Type-safe development with modern JS features
- Vite: Fast build tool and development server
- TailwindCSS: Utility-first CSS framework for rapid styling
- HTML5: Semantic markup structure for standalone pages
- Vanilla JavaScript: Interactive functionality for dashboard pages
- ESLint: Code quality and consistency
- Supabase: Backend-as-a-Service providing:
- PostgreSQL database with advanced features
- Authentication (email/password with role-based access)
- Real-time subscriptions
- Storage for file uploads
- Row Level Security (RLS) policies
- Node.js: Server-side JavaScript runtime (server.js)
- Google Gemini AI: AI-powered content analysis and generation
- PDF.js: Client-side PDF processing
- Mammoth.js: DOCX document parsing
- 17+ core tables including profiles, classes, resources, assignments, etc.
- Complex relationships with proper foreign key constraints
- Views for aggregated data (grades, statistics)
- Comprehensive indexing for performance
Study-Hub/
├── index.html # Landing page with login/signup
├── class.html # Class detail page
├── dashboard-student.html # Student dashboard
├── dashboard-teacher.html # Teacher dashboard
├── ai-test.html # AI service testing page
├── server.js # Node.js server for AI proxy
├── src/ # React application source
│ ├── App.tsx # Main React component
│ ├── main.tsx # React app entry point
│ ├── index.css # React app styles
│ └── vite-env.d.ts # Vite type definitions
├── js/ # Vanilla JS for interactive features
│ ├── auth.js # Authentication logic
│ ├── ai-service.js # AI integration and content analysis
│ ├── class-page.js # Class page functionality
│ ├── student-dashboard.js # Student dashboard functionality
│ ├── student-dashboard-fixed.js # Enhanced student dashboard
│ ├── teacher-dashboard.js # Teacher dashboard functionality
│ ├── teacher-dashboard-modern.js # Modern teacher dashboard
│ ├── supabase-config.js # Supabase client configuration
│ └── utils.js # Utility functions and helpers
├── styles/ # CSS stylesheets
│ ├── main.css # Global styles
│ ├── dashboard.css # Dashboard-specific styles
│ ├── dashboard-modern.css # Modern dashboard theme
│ └── modern-theme.css # Modern UI theme
├── supabase/ # Database migrations (removed for cleanup)
├── study_hub_schema.dbml # DBML format for ER diagrams
├── package.json # Node.js dependencies and scripts
├── vite.config.ts # Vite build configuration
├── tailwind.config.js # TailwindCSS configuration
├── tsconfig.json # TypeScript configuration
├── eslint.config.js # ESLint code quality rules
└── postcss.config.js # PostCSS processing configuration
- User registration and login
- Role-based access (Student/Teacher)
- Profile management
- Secure session handling
- Full dashboard with navigation
- Class enrollment via codes
- Resource viewing and uploading
- Assignment submission system
- Flashcard creation and viewing
- Study timer with Pomodoro technique
- AI resource analysis (simulated)
- Grade viewing
- Comment system
- Class creation and management
- Student enrollment tracking
- Resource upload and management
- Assignment creation
- Submission grading
- Class statistics
- Complete schema implementation
- Row Level Security policies
- Storage bucket configuration
- Foreign key relationships
- Performance indexes
- User Role Registration: Fixed issue where all users defaulted to 'student' role regardless of selection
- AI Service Integration: Implemented Google Gemini API with proxy server for secure key management
- Document Processing: Added PDF.js and Mammoth.js for client-side document parsing
- Enhanced Dashboards: Created modern dashboard variants with improved UI/UX
- Class Management: Added dedicated class detail pages with tabbed navigation
- Build System: Integrated Vite, TypeScript, and TailwindCSS for modern development
- Code Quality: Added ESLint configuration and consistent code formatting
- Project Cleanup: Removed redundant SQL files and organized database migrations
- Upload: Students and teachers can upload files (PDF, DOC, images, etc.)
- Categorization: By subject, chapter, and type
- Sharing: Class-specific or personal resources
- Comments: Reddit-style comment threads on resources
- Teacher creates assignment with due date and points
- Students view pending assignments
- Students submit text/file responses
- Teachers grade and provide feedback
- Students view grades and feedback
- Personal flashcard sets for self-study
- Teacher-assigned flashcard assignments
- Flip animation for interactive learning
- Progress tracking for attempts
- Pomodoro Timer: 25-min work, 5-min break cycles with audio notifications
- Session Tracking: Monitor study time with detailed logs
- AI-Powered Content Analysis:
- Upload PDF/DOCX files for automatic content extraction
- Analyze web URLs for content summarization
- Generate comprehensive study plans from educational materials
- Create personalized flashcard sets from document content
- Smart content parsing with context-aware summaries
- Row Level Security (RLS) policies ensure data isolation
- User authentication via Supabase Auth
- Secure file storage with access controls
- Input validation and sanitization
- Role-based permissions
The platform uses a PostgreSQL database with:
- 17 main tables for core functionality
- 3 views for aggregated reporting
- 30+ indexes for query optimization
- Comprehensive foreign key relationships
Key tables include:
profiles- User informationclasses- Course managementresources- Educational materialsassignments- Student workflashcard_sets- Study materialsgrades- Performance tracking
- Responsive Design: Works on desktop and tablet devices
- Modern Interface: Clean, intuitive design with consistent styling
- Interactive Elements: Smooth transitions and animations
- Accessibility: Semantic HTML and ARIA attributes
- Visual Feedback: Loading states, success/error notifications
- Node.js (v16+) for development and AI server
- Supabase account for backend services
- Google AI Studio API key for Gemini integration
-
Database Setup:
- Create a new Supabase project
- Import the schema from
study_hub_schema.dbmlor create tables manually - Set up Row Level Security (RLS) policies
-
Configure Environment:
- Update
js/supabase-config.jswith your Supabase project URL and anon key - Set up Google AI API key in
server.jsfor AI features
- Update
-
Storage Setup:
- Create a storage bucket named "study-hub" in Supabase Storage
- Configure public access policies for file uploads
-
Install Dependencies:
npm install
-
Development Server:
# For React app development npm run dev # For AI proxy server node server.js
-
Production Deploy:
- Build React app:
npm run build - Host static files on any web server
- Deploy Node.js server for AI functionality
- Build React app:
-
Test: Create teacher and student accounts to explore all features
While the platform is fully functional, potential future additions could include:
- Real-time chat and messaging
- Video conferencing integration
- Advanced analytics and reporting
- Mobile app versions
- Quiz and test modules
- Calendar integration
- Notification system
- Dark mode theme
This is an educational project demonstrating full-stack web development capabilities. The codebase serves as a reference implementation for building educational platforms.
This project is for educational and demonstration purposes.
This project successfully demonstrates:
- Full-stack web development without frameworks
- Complex database design and implementation
- User authentication and authorization
- File upload and storage handling
- Real-time data synchronization
- Responsive UI/UX design
- Role-based access control
- Interactive learning tools
Note: This is a demonstration project showcasing web development skills and educational platform architecture. All features have been implemented and tested for functionality.