Skip to content

KeshavDaBoss/TheRevisionLab

Repository files navigation



TheRevisionLab Logo

TheRevisionLab

A collaborative study platform for teachers and students —
build syllabi, create quizzes, study flashcards, and share materials.

React 19 TypeScript Tailwind CSS 4 Vite 6 Express Turso LibSQL GSAP



Overview

TheRevisionLab is a full-stack web application that transforms how study groups collaborate. Teachers (mentors) create workspaces, build chapter-based syllabi, write quiz questions, design flashcards, and upload study materials. Students join with a simple 6-digit code and dive straight into interactive learning — timed quizzes, untimed practice, and 3D flip-card decks.

Built with React 19, TypeScript, Tailwind CSS 4, Vite, Express, and Turso (LibSQL).


Features

For Students

  • Join Workspaces — Enter a 6-digit alphanumeric code to access any study room.
  • Chapter Dashboard — Browse chapters and topics with live question/flashcard counts.
  • Quiz Module — Multiple-choice tests with instant feedback. Choose between untimed practice or timed challenges.
  • Flashcard Decks — Interactive 3D flip cards with shuffle, progress tracking, and smooth GSAP animations.
  • Study Materials — View, read, and download uploaded documents (PDFs, notes, images, links, and more).

For Mentors (Teachers)

  • Mentor Dashboard — Password-protected admin panel for each workspace.
  • Syllabus Builder — Create, rename, and delete chapters and topics via an interactive sidebar tree.
  • Quiz Workshop — Build multiple-choice questions with up to 6 options, hints, and correct-answer marking.
  • Flashcard Workshop — Create front/back study cards for any topic.
  • Material Uploader — Publish documents (PDF, Word, PowerPoint, Excel, images, text, ZIP), lecture notes, or web links.
  • Workspace Settings — Customize workspace name, icon, and mentor password.

Tech Stack

Layer Technology
Frontend React 19, TypeScript, Tailwind CSS 4, GSAP, Lucide React Icons
Build Vite 6
Backend Express 4 (Node.js)
Database Turso (LibSQL) — SQLite-compatible edge database
Animations GSAP 3
Icons Lucide React

📁 Project Structure

therevisionlab/
├── api/                    # Vercel serverless API entry
│   └── index.ts
├── public/
│   └── favicon.svg
├── src/
│   ├── components/
│   │   ├── WorkspaceLogin.tsx       # Join / Create workspace gateway
│   │   ├── StudentView.tsx          # Student dashboard & learning engines
│   │   ├── MentorView.tsx           # Mentor admin panel
│   │   ├── DocumentViewerModal.tsx  # Document preview modal
│   │   └── WorkspaceIconPicker.tsx  # Icon selector for workspaces
│   ├── data/
│   │   └── (empty — users create their own content)
│   ├── lib/
│   │   ├── api.ts                   # API client functions
│   │   ├── documentUtils.ts         # Document type helpers
│   │   └── workspaceIcons.ts        # Icon component registry
│   ├── App.tsx                      # Root app component
│   ├── main.tsx                     # Entry point
│   ├── index.css                    # Global styles & Tailwind imports
│   └── types.ts                     # TypeScript type definitions
├── server.ts                # Express + Vite dev server
├── vite.config.ts           # Vite configuration
├── tsconfig.json            # TypeScript configuration
├── package.json
└── .env.example             # Environment variables template

Getting Started

Prerequisites

  • Node.js 18+ (LTS recommended)
  • npm or bun

Installation

# Clone the repository
git clone https://github.com/KeshavDaBoss/TheRevisionLab.git
cd TheRevisionLab

# Install dependencies
npm install

# Set up environment variables
cp .env.example .env

Environment Variables

Variable Description Default
TURSO_DATABASE_URL LibSQL database URL file:workspace.db
TURSO_AUTH_TOKEN LibSQL auth token (optional for local)
PORT Server port 3000

Run Locally

# Start the development server (Express + Vite HMR)
npm run dev

Open http://localhost:3000 in your browser.

Build for Production

npm run build
npm start

How It Works

  1. Create a Workspace — A mentor creates a workspace and receives a unique 6-digit code (e.g., 7K2M9P).
  2. Share the Code — Students enter the code on the login page to join.
  3. Build the Syllabus — The mentor adds chapters, topics, quiz questions, and flashcards.
  4. Upload Materials — Mentors can upload PDFs, notes, links, and other study resources.
  5. Study & Practice — Students explore chapters, take quizzes (timed or untimed), flip through flashcards, and view study materials.


Deployment

The project includes a vercel.json configuration for easy deployment to Vercel:

npm run vercel-build

The API routes are handled via api/index.ts as Vercel serverless functions.



Built with ❤️ by KeshavDaBoss


Releases

Packages

Contributors

Languages