Theater Arts Institute

Theater Arts LMS is a full-stack MERN application built for scalability, security, and clean role separation. MongoDB handles flexible data storage, while Express and Node power a modular backend API for managing users, courses, enrollments, and payments. React with Hooks drives a responsive, component-based UI tailored for Students, Instructors, and Admins.

JWT ensures secure authentication and role-based access control, Firebase supports real-time features and media handling, and Stripe manages safe and reliable payment processing. Overall, the system is engineered as a production-ready LMS with a strong focus on maintainability, performance, and user experience.

Login Credentials (Demo)

Email: admin@gmail.com
Password: @Admin@11

Email: instructor@gmail.com
Password: @Instructor@11

Login seamlessly using Google Sign-In on the authentication page.

Admin Dashboard

Admin Dashboard acts as a centralized control layer for the entire LMS. It aggregates real-time platform data, allowing administrators to monitor key metrics, manage users, review course submissions, and track system activity from a single interface. Built with a role-secured API layer and optimized frontend components, it ensures fast data retrieval, clean state management, and efficient administrative workflows across the platform.

Admin: Manage Classes

Class Management module is built as a secure admin workflow layer that controls course publishing across the LMS. It provides a structured, table-driven interface for reviewing course submissions, including metadata like instructor details, pricing, and seat availability. Integrated action handlers enable instant approval, rejection, or feedback submission, with state updates reflected directly in the database via API calls. The design focuses on speed, clarity, and reliable moderation control within the admin pipeline.

Admin: Manage User

User Management module serves as a centralized identity and access control system within the LMS. It allows administrators to efficiently manage user records, assign or update roles (Admin, Instructor, Student), and enforce permission changes in real time. Built on secure API endpoints with JWT-based authorization, it ensures only privileged users can perform sensitive actions like role updates or account deletion, keeping the platform secure, organized, and maintainable.

Instructor: Dashboard

Instructor Dashboard is designed as a role-specific analytics hub that consolidates teaching-related data into a single, responsive interface. It pulls real-time metrics such as active classes, student enrollments, pending reviews, unread messages, and course approval status through optimized API calls. Built with reusable React components and clean state management using Hooks, it ensures fast rendering and minimal re-fetch overhead. The focus is on delivering actionable insights immediately, reducing navigation depth and improving instructor workflow efficiency.

Instructor: Add Classes

Course Creation module is a form-driven feature built for efficient data capture and seamless API integration. It uses controlled React components with Hooks for real-time state handling, validation, and error management. Instructors can submit structured course data—including metadata and media uploads via drag-and-drop—directly to the backend, where Express handles persistence in MongoDB and Firebase manages file storage if required. The flow is optimized for minimal friction, ensuring fast course publishing with reliable server-side validation.

Instructor: All Classes

Instructor Course Management page is built as a lightweight CRUD interface that centralizes all instructor-owned courses into a single, structured view. It leverages React Hooks for efficient state handling and real-time UI updates, while API endpoints in Express handle secure retrieval and updates of course data stored in MongoDB.

Each row in the table reflects live course metadata such as pricing, enrollment count, and approval status, ensuring instructors always see up-to-date information. Quick edit actions trigger optimized update requests, allowing seamless modifications without page reloads. The result is a fast, responsive management layer that keeps course administration simple, consistent, and scalable.

Instructor: Analytics

Enrolled Students dashboard is built as an analytics layer that transforms enrollment data into real-time, actionable insights. It aggregates course-level metrics such as total enrollments, conversion rates, and remaining seat capacity through optimized backend queries.

On the frontend, React components render this data into structured summaries and progress indicators, providing instant visual feedback on course performance. The progress bars are dynamically calculated based on enrollment ratios, ensuring accurate representation of capacity usage. Overall, the module is designed for fast data aggregation, clean visualization, and efficient decision-making for instructors.

Student: Dashboard

Student Dashboard is built as a real-time analytics layer that consolidates learning and financial data into a single, responsive interface. It pulls aggregated metrics such as active enrollments, payment history, and total spending through optimized API endpoints backed by MongoDB.

On the frontend, React components with Hooks render these insights into clean summary cards and a timeline-based activity feed, ensuring smooth state updates without unnecessary re-renders. The design prioritizes fast data retrieval, intuitive visualization, and a frictionless user experience, giving students immediate clarity on both their academic progress and financial activity.

Student: Dynamic Shopping Cart

Cart module is implemented as a lightweight state-driven checkout layer that manages selected course items before payment. Built with React Hooks, it ensures real-time synchronization of cart state, allowing instant updates to totals, item removal, and pricing calculations without page reloads.

Each cart item is rendered with key metadata fetched from the backend via Express APIs connected to MongoDB, including course details, instructor info, pricing, and seat availability. The system uses derived state for running totals, ensuring accuracy and responsiveness throughout the user interaction flow, and provides a clean transition into the payment pipeline.

Student: Secure Terminal Checkout

Checkout module is built as a secure, dual-pane payment workflow that separates order review from transaction processing. The order summary is derived from client-side state and validated against backend data via Express APIs to ensure pricing integrity before payment initiation.

The payment side integrates Stripe Elements for PCI-compliant card handling, keeping sensitive data off the server. React Hooks manage form state and submission flow, while backend endpoints handle payment intent creation and confirmation. The layout is optimized for clarity, trust, and minimal friction, ensuring a reliable and secure final step in the enrollment process.

Student: Payment Success Confirmation

The post-payment success flow is implemented as a lightweight confirmation layer triggered after Stripe webhook validation and backend transaction verification. Once the payment intent is confirmed, the frontend state updates to render a success modal overlay.

This overlay displays the enrollment confirmation along with the transaction reference ID stored in MongoDB for auditability and future lookup. React state controls the modal lifecycle, ensuring it’s non-blocking and easily dismissible. The flow is designed to provide immediate feedback while maintaining transactional integrity between Stripe, the backend API, and the client interface.

Student: Active Enrolled Classes Hub

Enrolled Courses module is built as a structured data view layer that aggregates a student’s active enrollments from MongoDB through secure Express API endpoints. It organizes course records by transaction group to maintain relational clarity between purchases and enrolled classes.

On the frontend, React renders each enrollment as a consistent UI card or row with key metadata such as course title, pricing, seat allocation, and active status. State is managed efficiently using Hooks to ensure real-time consistency with backend updates. The result is a clean, scalable interface that gives students a reliable snapshot of their ongoing learning progress.

Student: Itemized Billing Ledger

Payment History module is implemented as an audit-friendly financial ledger layer that retrieves transaction data from MongoDB through secured Express APIs. Each record is normalized to include essential payment metadata such as timestamp, total amount, and gateway reference ID.

On the frontend, React renders transactions as collapsible cards using controlled state to toggle detailed views. Expanded entries dynamically fetch or hydrate itemized course breakdowns tied to each Stripe payment intent, ensuring data consistency and traceability. The design prioritizes transparency, performance, and easy navigability across a potentially large transaction history.

Conclusion: Theater Arts platform is built as a structured, scalable system that cleanly separates roles, responsibilities, and workflows across the ecosystem. The architecture supports secure authentication, role-based access control, and reliable payment processing, while maintaining a consistent and responsive UI across all modules.

Each feature—from course management and enrollment to analytics and communication—has been implemented with modular design principles to ensure maintainability and future extensibility. Overall, the system is engineered to deliver a stable, secure, and efficient experience while leaving room for continuous improvement as the platform evolves.