A real-time classroom management tool that enables instructors to manage students, assign lessons, and communicate.
The app supports login for both students and instructors via phone or email with verification codes (no JWT sessions used).
- Instructor/Student login using phone number and access code.
- Instructor/Student login using email and access code.
- Twilio SMS setup complete (not yet integrated into backend routes).
- Full backend integration for Twilio-based code delivery.
- Token/JWT sessions (not used in this project).
- Instructor Dashboard
- Add students.
- Edit/Delete student profiles.
- Assign lessons to one or multiple students.
- Real-time chat with students.
- Student Dashboard
- View assigned lessons.
- Mark lessons as completed.
- Edit profile information.
- Real-time chat with instructor.
- Chat via Socket.io (not implemented yet).
- (Optional) Store chat history in Firebase.
Frontend
- React (CRA or Vite)
- Tailwind CSS (styling)
Backend
- Node.js + Express
- Firebase (Firestore for data storage)
- Twilio (configured, pending backend integration)
classroom-management/ ├── Backend/ # Express server │ ├── index.js # Main backend entry point │ ├── .env # Environment variables (Firebase, Twilio) │ ├── serviceAccountKey.json # Firebase admin SDK credentials │ ├── package.json # Backend dependencies │ └── ... │ ├── classroom-frontend/ # React frontend │ ├── src/ │ │ ├── api.js # API service for frontend requests │ │ ├── App.jsx # Main React component │ │ ├── Components/ │ │ │ ├── auth/ # Authentication (Login, Setup Account) │ │ │ ├── instructor/ # Instructor UI: add/edit students, assign lessons │ │ │ └── student/ # Student UI: dashboard, lessons │ │ └── assets/ # Static assets (images, icons) │ ├── public/ # Public static files │ ├── package.json # Frontend dependencies │ └── ... │ └── README.md # Project documentation
This project uses Nodemailer + Gmail to send verification emails.
Because of Google’s security, you can’t use your normal Gmail password.
Instead, you need to create a 16-digit App Password.
- Open Google My Account → Security.
- Under “Signing in to Google”, turn on 2-Step Verification.
- Go to Google App Passwords.
- Log in again if needed.
- At the bottom, select:
- App → choose Mail
- Device → choose Other (Custom name) → type
ClassroomApp
- Click Generate.
- Copy the 16-digit App Password (looks like
abcd efgh ijkl mnop).
Create or edit your .env file in the project root:
EMAIL_USER=yourgmail@gmail.com
EMAIL_PASS=your-16-digit-app-password