Classroom - Online Classroom inspired by Google Classroom

An online Classroom project inspired by Google Classroom made with Spring Boot (Backend) and ReactJS (Frontend)

---

---

Features

• 👨‍🏫 Course Management – Create, enroll, and organize courses
• 📝 Assignments – Assign students some work
• 📢 Announcements – Share important updates with students
• 💬 Discussions – Enable student-teacher communication
• 📂 File Uploads – Attach learning materials
• 💬 To Do List – Improves students' productivity
• 🔐 Secure Authentication – JWT-based login system

---

Tech Stack

• Spring Boot - The backend is written in Java
• React JS - The frontend is made using React
• MySQL - The database used for project
• JWT - The authentication is secure using JWT
• Tailwind CSS

---

Project Setup Guide

Prerequisites

Ensure you have the following installed:

• Git
• Java 17+
• Maven
• Node.js & npm
• MySQL

---

Cloning the Repository

git clone https://github.com/vedang012/classroom.git
cd classroom

---

Backend (Spring Boot) Setup

Configure application.properties

Create application.properties inside src/main/resources/ and add the following:

# Database Configuration
spring.datasource.url=jdbc:mysql://localhost:3306/your_database
spring.datasource.username=your_username
spring.datasource.password=your_password
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

# Hibernate Settings
spring.jpa.database-platform=org.hibernate.dialect.MySQL8Dialect
spring.jpa.hibernate.ddl-auto=update
spring.jpa.show-sql=true

# Server Port
server.port=8080

Running the Spring Boot Application

mvn spring-boot:run

Alternatively, if using an IDE like IntelliJ or Eclipse, run the main method inside the ClsasroomApplication class.

---

Frontend (React) Setup

Navigate to the Frontend Directory

cd frontend

Install Dependencies

npm install

Start the React Application

npm start

The React app will be available at http://localhost:5173.

---

Additional Notes

• Ensure MySQL is running before starting the backend.
• If you change the backend port, update it in the React API configuration.
• Use .env files to store sensitive credentials securely.

Happy coding! 🚀

---

• Progress

• Database setup ✅
• Authentication with JWT (Role based) ✅
• Backend APIs setup ✅
• Frontend Design ✅
• Student Dashboard ✅
• Teacher Dashboard ✅
• Create / Join classroom using invite code ✅
• Announcement section ✅
• People section ✅

---

To-Do

• Files section ⏳
• Live chat ⏳
• Additional options ⏳