Overview
A comprehensive React-based platform designed for students of MDU Rohtak to access high-quality academic resources, including notes, study materials, and community support. The website aims to make studying more accessible, efficient, and collaborative by offering a seamless experience for users to download and save notes, filter by branch, semester, and subject, and access personalized resources through their dashboard.
Technical Implementation
Firebase Authentication Integration
Implemented secure Google sign-in using Firebase Authentication with React Context API for state management, providing seamless user authentication and profile management with persistent user sessions.
Local Storage Management
Built comprehensive local storage system for persisting user preferences, favorites, filter selections, and theme settings, ensuring data persistence across sessions without backend dependency while maintaining optimal performance.
Advanced Filtering System
Developed dynamic filtering mechanism allowing users to search and filter academic resources by branch, semester, and subject with real-time updates and saved preferences, making navigation intuitive for MDU Rohtak's academic structure.
Component-Based Architecture
Structured the application using modular React components with TypeScript for type safety, including dashboard components, note cards, authentication modals, and theme management for maintainable and scalable code.
Key Features
- Comprehensive notes database across branches, semesters, and subjects
- Smart filtering system by branch, semester, and subject
- Secure Google sign-in integration using Firebase Authentication
- Personalized dashboard with favorite notes and profile info
- Favorites system for quick access to preferred notes
- Dark/light mode toggle with preference persistence
- Responsive design optimized for all devices
- Smooth animations powered by AOS (Animate On Scroll) library
- Offline access support through localStorage
- Real-time search functionality for saved notes
- Profile management with branch and semester selection
- Vercel Analytics integration for performance tracking
Screenshots
Students dashboard with relevant resources as per the profile
Browse notes by branch, semester, and subject
Save and manage favorite notes
Join our WhatsApp group for community support and note sharing
Challenges & Solutions
Challenge: Managing complex academic data structure for MDU Rohtak curriculum
Solution: Created hierarchical data organization system with branch → semester → subject structure, making navigation intuitive for students familiar with their academic structure while ensuring efficient data retrieval and filtering.
Challenge: Balancing functionality without requiring backend database
Solution: Leveraged localStorage and Firebase Auth strategically to provide rich user experience with favorites and preferences while keeping the app lightweight and fast, ensuring offline functionality for saved notes.
Challenge: Ensuring responsive design across various devices for student accessibility
Solution: Implemented mobile-first design approach with Tailwind CSS, ensuring optimal viewing experience on phones, tablets, and desktops commonly used by students, with adaptive navigation and touch-friendly interfaces.
Challenge: State management across multiple contexts and components
Solution: Implemented React Context API for authentication, favorites, and theme management, ensuring consistent state across the application while maintaining performance and avoiding prop drilling.