Simple LMS

📖 About the project

Inspiration

The idea for Simple LMS came from watching how complicated most Learning Management Systems have become. Platforms like Moodle, Google Classroom, and Canvas are powerful, but for a small tutoring setup, a bootcamp, or even a single teacher running weekend classes, they feel overwhelming — too many menus, too many settings, and too steep a learning curve.

I wanted to build something that captures only the essentials: a teacher creates a course, uploads a video lecture, writes a short MCQ test, and assigns it to students. The student logs in, watches the lecture, takes the test, and immediately sees a score. That single loop — watch → test → score — is the heart of Simple LMS.

Another inspiration was Firebase. I wanted to see how far I could go using only Firebase Auth, Firestore, and Storage without spinning up a custom backend, and whether the result would still feel like a real, production-ready product.

What I learned

Building this project taught me a lot across the full stack:

• React + Vite: how Vite's fast HMR and ESM-based dev server make React development feel instant compared to older bundlers.
• Tailwind CSS: how utility-first styling lets you prototype UI quickly without leaving the JSX, and how to keep the design system consistent with a small tailwind.config.js.
• Firebase:
  • Auth — email/password registration with role-based UX (teacher vs student).
  • Firestore — designing a clean, normalized data model (see the schema below) and writing security rules that prevent students from reading other students' data.
  • Storage — uploading video files and serving them through public download URLs while still restricting uploads to authenticated teachers.
• react-router-dom v6: nested routes, protected routes, and redirect flows for unauthenticated users.
• State management: keeping auth state global via React Context instead of pulling in Redux for a project this size.
• UX thinking: small things like showing the best score per test, an empty-state component for empty dashboards, and a modal pattern for creating courses/tests.

How I built it

The app is a single-page React application bootstrapped with Vite:

npm create vite@latest simple-lms -- --template react
npm install firebase react-router-dom
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Built With

• firebase
• google-drive
• react