Complete academic assignments with LaTeX support and generate professional PDFs for Gradescope - entirely in your browser.
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:
- Assignment Maker - Instructors create structured assignments
- 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.
- 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
- Go to the Live Demo
- Click "Try Demo Assignment" in the sidebar
- Click "LaTeX Math Help" for math notation reference
- Get assignment JSON from instructor
- Click "Upload JSON" in sidebar
- Enter your full name
- Complete each problem (text / images / text+image / AI-graded response)
- Click "Download for Gradescope" — downloads a single ZIP containing the submission JSON and PDF
- Upload the ZIP file to Gradescope
git clone https://github.com/BridgeSuite/GradeBridge-Student-Submission.git
cd GradeBridge-Student-Submission
npm install
npm run devAssignments 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
- 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
| 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 |
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 submission JSON is encoded in one of two formats. The autograder detects which by prefix; the choice is driven entirely by the assignment file:
| Spec field | Format | Payload |
|---|---|---|
no coursePublicKey |
gb1: — shared-key AES-256-GCM |
includes student_name |
coursePublicKey present |
gb2: — public-key envelope |
de-identified: student_name, email, sid, student_id removed |
gb2: wraps a per-submission random AES-256-GCM content key with the course RSA public key (RSA-OAEP, SHA-256/MGF1-SHA256, empty label) and lays out the envelope as wrappedKeyLen[uint16 BE] | wrappedKey | iv[12] | ciphertext+tag, standard-base64 encoded. Only the course private key — held by the autograder, never by this app — can open it.
The PDF and all filenames are identical in both cases and still carry the student's name; de-identification applies to the JSON payload only. Identity is taken from Gradescope's authenticated submitter metadata. If a spec carries a coursePublicKey that cannot be read, the submission fails with an error rather than downgrading to gb1:.
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.
React 19 + TypeScript + Vite + Tailwind CSS + KaTeX (CDN) + html2canvas (CDN) + jsPDF (CDN) + JSZip
npm run build # Production build
npm run deploy # Deploy to GitHub Pagesnpm test # cryptoService gb1 / gb2 suiteThe gb2 round-trip checks need the verified test fixture (test keypair + plaintext + a known-good gb2: string). It is deliberately not committed — it contains a private key. The runner looks for ../Encryption/gb2_test_fixture.json relative to the repo, or wherever GB2_FIXTURE points:
GB2_FIXTURE=/path/to/gb2_test_fixture.json npm testWithout it the suite still runs everything using an ephemeral keypair and marks the fixture-bound checks SKIPPED.
gb2:hardened submission encoding. When the loaded assignment spec carries acoursePublicKey(SPKI PEM), the submission JSON is encoded as a public-key envelope and de-identified —student_name,email,sid, andstudent_idare stripped from the payload. Specs without that field are unaffected and still producegb1:. See Gradescope Integration.- A spec whose
coursePublicKeycannot be imported now fails the download with a clear message instead of silently falling back togb1:. - PDF, ZIP filename, and image files are unchanged in both paths.
- Added
npm test— a dependency-freecryptoServicesuite covering the gb2 round trip, envelope layout, de-identification, key-failure handling, and gb1 regression.
- Uploaded images are written into the submission ZIP as individual downsampled JPEGs (
p{N}s{N}_image_{n}.jpg) so human graders can see them inline.
- HEIC image support — iPhone photos are converted on upload.
- "Download for Gradescope" produces a single ZIP containing both the submission JSON and the PDF.
- 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
Chrome 90+, Firefox 88+, Safari 14+, Edge 90+
- Fork the repository
- Create feature branch
- Make changes with clear commits
- Submit pull request
MIT License - Free for personal and commercial use.
- 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.