Client For :
Personal Project
Technical
📚 Project Overview
The Virtual Classroom Frontend is a modern web interface designed to support seamless online learning experiences for educators and students. Built entirely with React.js and styled using ShadCN UI and Tailwind CSS, the project demonstrates a commitment to user-centric design, accessibility, and clean, maintainable code.
🎨 Design & Architecture
From the very beginning, the project aimed to create an interface that feels intuitive and welcoming, reducing friction in online education. The component-based architecture in React makes the codebase modular, reusable, and scalable, while ShadCN UI ensures a polished, consistent look and feel. Tailwind CSS adds utility-first styling for rapid prototyping and clean layouts.
🔒 Authentication & Security
A key highlight of this project is the integration of Microsoft OAuth, allowing users to securely sign in with their Microsoft accounts. This adds a layer of trusted authentication and streamlines the login process, especially for institutions already using Microsoft services.
📱 Responsiveness & User Experience
The frontend is fully responsive, ensuring that teachers and students can comfortably use the platform from desktops, tablets, or smartphones. Navigation menus, buttons, and interactive components adapt fluidly to different screen sizes, preserving usability and design quality.
⚙️ Key Features
Modern single-page application (SPA) architecture built with React.js
Polished UI with ShadCN components, maintaining design consistency
Secure Microsoft OAuth login integration
Modular component structure for better maintainability and scalability
Responsive design with Tailwind CSS for cross-device compatibility
Clean folder structure and documentation for easier collaboration
🧠 Learnings & Impact
Through this project, I strengthened my skills in frontend architecture, authentication workflows, and advanced styling techniques. Beyond technical implementation, it deepened my understanding of designing for real users — prioritizing accessibility, responsiveness, and clear visual hierarchy.
🛠 Tech Stack & Tools
Languages & Frameworks: React.js, JavaScript, Tailwind CSS
UI Library: ShadCN UI
Authentication: Microsoft OAuth
Version Control: Git & GitHub
Design Tool: Figma (for wireframes & prototypes)
🔗 Project Repository
