GradeBridge Student Submission

Complete academic assignments with LaTeX support and generate professional PDFs for Gradescope - entirely in your browser.

Live Demo

---

The Problem

Traditional submissions: Inconsistent formatting, broken equations, messy PDFs that are a nightmare to grade.

GradeBridge workflow: Guided, structured submission forms that auto-generate perfectly formatted PDFs.

The GradeBridge apps:

This app handles lab reports, mini-projects, and homework:

1. Assignment Maker - Instructors create structured assignments
2. Student Submission (this app) - Students complete work and generate grading-ready PDFs

Result: No more "my formatting broke" excuses. Consistent submissions that make grading 50% faster.

---

Key Features

• 100% Browser-Based - No server, no account, no data transmission. Everything stays on your computer.
• Auto-Save - Work saved every second to browser storage
• LaTeX Math Support - Live preview with built-in cheatsheet (fractions, integrals, Greek letters, matrices)
• Multiple Answer Types - Text with LaTeX, image uploads, text + image combined, AI-graded responses, AI formative feedback
• Professional PDF Generation - Gradescope-compatible output matching instructor templates
• Images in ZIP - Uploaded images are included as individual files in the submission ZIP so graders can see them without opening the PDF
• Try Demo - One-click sample assignment to explore features instantly
• Backup & Restore - Export/import work as JSON

---

Quick Start

Try It Now

1. Go to the Live Demo
2. Click "Try Demo Assignment" in the sidebar
3. Click "LaTeX Math Help" for math notation reference

Complete an Assignment

1. Get assignment JSON from instructor
2. Click "Upload JSON" in sidebar
3. Enter your full name
4. Complete each problem (text / images / text+image / AI-graded response)
5. Click "Download for Gradescope" — downloads a single ZIP containing the submission JSON and PDF
6. Upload the ZIP file to Gradescope

Local Development

git clone https://github.com/BridgeSuite/GradeBridge-Student-Submission.git
cd GradeBridge-Student-Submission
npm install
npm run dev

---

Assignment JSON Format

Assignments are created using the Assignment Maker:

{
  "courseCode": "ECE416",
  "title": "Mini-Project 1",
  "preamble": "Instructions for the entire assignment...",
  "problems": [
    {
      "name": "System Analysis",
      "description": "Analyze the following system...",
      "subsections": [
        {
          "name": "Transfer Function",
          "description": "Derive the transfer function",
          "points": 50,
          "submissionType": "Text"
        },
        {
          "name": "Step Response",
          "description": "Plot the step response",
          "points": 30,
          "submissionType": "Image",
          "maxImages": 2
        },
        {
          "name": "Reflection",
          "description": "Explain your approach",
          "points": 20,
          "submissionType": "AI Graded: Short",
          "aiGradingConfig": { "gradingPrompt": "..." }
        }
      ]
    }
  ]
}

Submission Types: Text, Image, Text and Image, AI Graded: Binary, AI Graded: Short, AI Graded: Medium, AI Graded: Long, AI Formative

---

Data & Privacy

• All data stored in browser localStorage
• No server communication, no analytics, no account required
• Data persists across browser restarts
• Always export JSON backups - data is lost if you clear browser cache

---

Troubleshooting

Issue	Solution
Assignment won't load	Verify JSON was exported from Assignment Maker (encrypted .json file)
LaTeX not rendering	Refresh page; KaTeX loads from CDN
PDF generation fails	Check internet connection; html2pdf loads from CDN
Lost work	Use "Save Backup" regularly; restore with "Load Work"
Images too large	Files over 4 MB are rejected; compress or use JPG instead of PNG
Word count displayed	Shows current word count as guidance — no minimum or maximum is enforced

---

Gradescope Integration

The "Download for Gradescope" button produces a single ZIP containing:

• *_submission.json — encrypted answer data (text responses, image counts)
• *_submission.pdf — formatted PDF matching the instructor template (one page per subsection)
• p{N}s{N}_image_{N}.jpg — one file per uploaded image, downsampled for fast loading

The PDF is designed to match Assignment Maker templates:

• One page per subsection
• Consistent headers on all pages
• Image answers get dedicated pages

See the Assignment Maker README for technical details on the grading rubric format.

---

Development

Tech Stack

React 19 + TypeScript + Vite + Tailwind CSS + KaTeX (CDN) + html2canvas (CDN) + jsPDF (CDN) + JSZip

Build & Deploy

npm run build      # Production build
npm run deploy     # Deploy to GitHub Pages

---

Known Limitations

• CDN Dependencies - KaTeX, html2canvas, and jsPDF load from CDN; internet required for LaTeX rendering and PDF generation
• Long Text Answers - Very long answers that exceed one page may have imperfect breaks (html2pdf limitation)
• Mobile Experience - Optimized for desktop; functional but not ideal on phones

Browser Support

Chrome 90+, Firefox 88+, Safari 14+, Edge 90+

---

Contributing

1. Fork the repository
2. Create feature branch
3. Make changes with clear commits
4. Submit pull request

---

License

MIT License - Free for personal and commercial use.

---

Links

• Live App: bridgesuite.github.io/GradeBridge-Student-Submission
• Assignment Maker: bridgesuite.github.io/GradeBridge-Assignment-Maker
• Issues: GitHub Issues

---

Built with React, TypeScript, KaTeX, html2canvas, jsPDF, JSZip, and Lucide.

MIT License · © 2026 The Regents of the University of California · Provided free by UC Davis.