Classroom
Frontend side of a dashboard built with Next.js, Refine, and TypeScript; featuring role-based UI, real-time analytics, and a Classroom-style enrollment system for a seamless academic infrastructure.
Install / Use
/learn @JavaScript-Mastery-Pro/ClassroomREADME
📋 <a name="table">Table of Contents</a>
- ✨ Introduction
- ⚙️ Tech Stack
- 🔋 Features
- 🤸 Quick Start
- 🔗 Assets
- 🚀 More
🚨 Tutorial
This repository contains the code corresponding to an in-depth tutorial available on our YouTube channel, <a href="https://www.youtube.com/@javascriptmastery/videos" target="_blank"><b>JavaScript Mastery</b></a>.
If you prefer visual learning, this is the perfect resource for you. Follow our tutorial to learn how to build projects like these step-by-step in a beginner-friendly manner!
<a href="https://youtu.be/ek7hmv5PVV8" target="_blank"><img src="https://github.com/sujatagunale/EasyRead/assets/151519281/1736fca5-a031-4854-8c09-bc110e3bc16d" /></a>
<a name="introduction">✨ Introduction</a>
A high-performance PERN stack (PostgreSQL, Express, React, Node.js) academic hub. This multi-role system (Admin, Teacher, Student) utilizes a decoupled architecture where an Express/Node.js backend serves a modular React frontend powered by Refine. By leveraging PostgreSQL (Neon) with Drizzle ORM, it ensures type-safe data integrity for class management, automated scheduling, and real-time analytics. Secure access is managed via Better-Auth, providing a robust, controlled-access environment for campus operations.
If you're getting started and need assistance or face any bugs, join our active Discord community with over 50k+ members. It's a place where people help each other out.
<a href="https://discord.com/invite/n6EdbFJ" target="_blank"><img src="https://github.com/sujatagunale/EasyRead/assets/151519281/618f4872-1e10-42da-8213-1d69e486d02e" /></a>
<a name="tech-stack">⚙️ Tech Stack</a>
Frontend Stack
-
React is a declarative, component-based JavaScript library for building user interfaces. It allows for the creation of complex, interactive UIs through reusable components, providing the core frontend experience for the academic hub.
-
Refine is a React-based framework for building data-intensive applications like admin panels and dashboards. It provides a headless approach that handles core logic—such as authentication, routing, and data fetching—allowing developers to focus on the UI and business logic.
-
shadcn/ui is a collection of re-usable components built using Radix UI and Tailwind CSS. It allows developers to build high-quality, accessible design systems by providing beautifully designed components that can be copied and pasted directly into applications.
-
Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. It provides low-level utility classes that let you build completely custom designs without ever leaving your HTML, ensuring highly maintainable and responsive styling.
-
TypeScript is a superset of JavaScript that adds static typing, providing better tooling, code quality, and error detection for developers. It is ideal for building large-scale applications and enhances the development experience.
-
Zod is a TypeScript-first schema declaration and validation library. It is used to define data structures and validate them at runtime, ensuring type safety and reducing bugs by providing a single source of truth for both static types and data validation.
Backend Stack
-
Arcjet is a security-first tool that helps developers protect their applications with just a few lines of code. It provides security primitives for rate limiting, bot protection, email validation, and sensitive data masking, ensuring the application remains secure and resilient.
-
Better Auth is a framework-agnostic authentication and authorization library for TypeScript. It provides built-in support for email and password authentication, social sign-on (Google, GitHub, Apple, and more), and multi-factor authentication, simplifying user authentication and account management.
-
Cloudinary is an end-to-end image and video management solution. It automates the upload, storage, manipulation, and delivery of media assets, ensuring optimized performance and a seamless visual experience across any device.
-
Drizzle ORM is a lightweight and performant TypeScript ORM designed with developer experience in mind. It provides a seamless interface between application code and database operations while maintaining high performance and reliability.
-
Express.js is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications. It facilitates the rapid development of RESTful APIs and serves as the standard server framework for the Node.js ecosystem.
-
Neon is a fully managed, serverless PostgreSQL database platform. It offers features like instant provisioning, autoscaling, and database branching, enabling developers to build scalable applications without managing infrastructure.
-
Node.js is an open-source, cross-platform JavaScript runtime environment that executes JavaScript code outside a web browser. It is designed to build scalable network applications and serves as the foundation for the project's backend logic.
Dev Tools
-
CodeRabbit is an AI-powered code review platform that provides automated, contextual feedback on pull requests. It helps developers improve code quality and catch potential bugs early by integrating directly into the development workflow.
-
Site24x7 is a comprehensive monitoring solution that provides deep insights into application performance and infrastructure health. It allows for real-time tracking of uptime, end-user experience, and server metrics to ensure maximum availability.
<a name="features">🔋 Features</a>
👉 Multi-Role Authentication: A secure entry system powered by Better Auth and Arcjet that dynamically routes Students, Teachers, and Admins to protected dashboards with strict role-based permissions.
👉 Unified Analytics Dashboard: A high-level overview of the institution's health, featuring real-time statistics on student enrollment, active classes, and faculty distribution via Refine's data providers.
👉 Intelligent Subject Management: Centralized control for curriculum where you can create subjects, apply instant filters, and drill down into specific class assignments and teacher workloads.
👉 Departmental Governance: A structural management layer that organizes subjects and faculties into departments, providing detailed views of every student and educator within a specific academic branch.
👉 Dynamic Faculty Directory: A robust, paginated directory of all professors featuring advanced search by name or email, profile image hosting via Cloudinary, and full teaching schedule visibility.
👉 Advanced Class Orchestration: The core engine of the app built with Drizzle ORM, allowing Admins to schedule sessions, set capacity limits, and manage complex assignments of multiple teachers across different sections.
👉 Code-Based Enrollment System: A "Google Classroom" inspired workflow where students gain instant access to courses by entering a unique 6-8 digit joining code, ensuring a secure and controlled-access environment.
And many more, including code architecture and reusability.
<a name="quick-start">🤸 Quick Start</a>
Follow these steps to set up the project locally on your machine.
Prerequisites
Make sure you have the following installed on your machine:
Cloning the Repository
git clone https://github.com/JavaScript-Mastery-Pro/classroom.git
cd cla
