As students, we realised that building a strong foundation early in our learning process is crucial for long-term success. However, we struggled to find targeted, high-quality resources that were both collaborative and efficient in helping us understand concepts deeply. Existing platforms like Quizlet and Anki provide great individual learning experiences, but they lack an organized, structured approach for university students to share, verify, and consolidate knowledge in a meaningful way.
That’s why we wanted to create a Flashcard Sharing System within NUS—an intelligent, collaborative platform where students can create, verify, and share flashcards based on module codes. This ensures that learning materials are accurate, relevant, and easily accessible to everyone in the course.
By enabling features like peer verification, private and public sharing, customizable quizzes, and a gamified rewards system, this app bridges the gap between individual learning and collective knowledge-building. It empowers students to not just memorize, but actively engage with and refine their understanding—all while making the process more social and interactive.
The goal is simple: to make structured learning more efficient, reliable, and enjoyable—especially in an academic environment where time and accuracy matter the most.
- As a student who wants to study efficiently, I want to create my own flashcards with text and images so that I can review concepts easily.
- As a student who studies multiple subjects, I want to mix and match flashcards from different topics so I can test myself on all related material in one session.
- As a student who wants control over my learning, I want to edit, remove, and organize my flashcards so that I can focus on what matters.
- As a student who needs to prepare for exams, I want to generate a flashcard quiz that includes multiple topics so I can review everything in one go.
- As a student who makes mistakes, I want to flag difficult questions so I can review them later.
- As a student who enjoys personalization, I want to unlock and buy different flashcard skins to make my learning experience more fun.
- As a student who enjoys competition, I want to earn rewards for completing quizzes to stay motivated.
- As a student who wants to improve, I want to see my strengths and weaknesses based on my quiz performance so I can focus on areas where I struggle.
- As a student who studies over time, I want to track my study history so I can measure my progress.
-
Create Flashcard Sets by Module
Users can create flashcard sets within predefined NUS module codes. This ensures flashcards are organized and relevant to specific academic content.
-
Share Card Sets via Hives
Users can share flashcard sets within Hives – private friend groups where members can view, save, and collaborate on card sets.
-
User Authentication (Students, TAs, Professors)
The system supports account creation and login for students, teaching assistants, and professors, each with role-based permissions.
-
Flashcard Verification by TAs/Professors
Verified users (TAs or professors) can review and approve flashcards, adding an extra layer of academic credibility to shared content.
-
Flashcard Set Reviews & Ratings
Users can leave written reviews (100–200 words) and rate flashcard sets. An average star rating will be shown at the card set selection page.
(Note: Reviews will appear on a future Card Set Intro Page.)
-
Test Mode with Auto-Marking (MCQ Only)
Users can toggle flashcards as MCQ. In test mode, the app auto-generates quizzes using only MCQ flashcards and auto-marks responses.
-
Mix-and-Match Across Card Sets
Users can combine flashcards from multiple card sets to create custom study decks across topics or modules.
-
Paid Customization Options
Premium users can unlock customizable flashcard appearances (e.g., themes, fonts, card animations).
-
Private Card Sets for Friend Groups
Users will be able to create private card sets, shared only within their Hive for internal collaboration and privacy.
While modules will be predefined in the app initially, we plan to allow verified users (TAs or professors) to create and validate new modules, making the system scalable and inclusive of special or elective courses.
-
Milestone 1 - Technical proof of concept (i.e., a minimal working system with both the frontend and the backend integrated for a very simple feature)
Basic User flow: (Choose Module -> Choose Card Set -> Show Flashcards)
- Card Sets: To group flashcards
- Flashcard display: Should be able to display flashcards in a easy-to-test-yourself manner
-
Milestone 2 - Prototype (i.e., a working system with the core features)
- User accounts: Student, Teaching Assistant and Professor
- Teaching Assistant and Professors can verify flashcards
- Students can save Card Sets - need to find out how to set up link between card sets and accounts
- Students can rate and review flashcards/Card Sets
- Flashcard Database in Firebase: Card Sets should be stored in the cloud database so that other people can access them.
- User accounts: Student, Teaching Assistant and Professor
-
Milestone 3 - Extended system (i.e., a working system with both the core + extension features)
- Flashcard creation feature to allow users to at least be able to create simple flashcards. Fields are: Module, Question, Answer
- Tests based on topics/card sets selected - Random flashcards chosen from topics specified
- Customizable skins and appearances for cards/profile/UI elements (Maybe some paid features, but does not affect core functionality)
- Functionality to allow private card sets for internal sharing
| Component | Technology |
|---|---|
| Frontend | Next.js (React) |
| Backend | Node.js (Express/NestJS) + Firebase |
| Database | Supabase |
| Auth | Supabase Auth |
| Hosting | Vercel (frontend) + |
A visual breakdown of how the different components interact.
TODO: Add architecture diagram
/docs/architecture.png or /public/system-diagram.png
This document outlines the key practices and tooling used in this project to ensure maintainable, consistent, and high-quality code delivery.
We use unit tests to verify the functionality of React components using libraries such as:
This ensures each component behaves correctly in isolation and regressions are caught early.
// Example test
import { render, screen } from '@testing-library/react';
import MyComponent from './MyComponent';
test('renders the title correctly', () => {
render(<MyComponent />);
expect(screen.getByText('Welcome!')).toBeInTheDocument();
});
All version control is managed via Git, with GitHub used for remote repository hosting and collaboration.
- Descriptive commit messages (e.g.,
feat: add flashcard grid layout) - Rebased or squashed commits before merging
- Regular pushes to ensure backup and collaboration
GIF: GitHub branch graph
We use lint-staged and husky to enforce code quality before commits are allowed.
- ✅ Linting (
eslint) - ✅ Formatting (
prettier) - ✅ Type checking
- ✅ Running component tests
npx husky add .husky/pre-commit "npx lint"GIF: terminal showing lint-staged running on commit
Each new feature, bugfix, or enhancement is developed in a dedicated Git branch following a naming convention:
feat/cardset-gridfix/modal-close-issuechore/update-readme
- Parallel development
- Easier code review
- Isolated testing before merge
The main branch is protected to prevent direct pushes.
- Lint must pass
- Tests must pass
These checks are enforced locally using Husky (pre-commit and pre-push hooks). To ensure these rules apply consistently across all contributors, they're also reinforced via GitHub Actions CI (Below).
- Lint must pass
- Tests must pass
- Build must succeed (
npm run build)
All of these are enforced via GitHub Actions CI checks.
image: GitHub PR with passing checks & required status checks
We use Vercel for seamless CI/CD.
- Every push to a branch spins up a preview deployment
- Every merge to
maintriggers a production deployment - Environment variables are managed via Vercel Dashboard
Note: Due to free tier limitations:
- We fork and push to personal repos for deploy previews
- PRs are created back to the main repo under the GitHub Organization
image: Vercel dashboard
Project code is managed under a GitHub Organization for:
- Centralized access control
- Audit-friendly code ownership
- Shared CI/CD & environment management
Team members contribute via fork + PR model where necessary.
image: GitHub organization team
graph TD
FB[Feature Branch] -->|Code & Commit| PCLT[Pre-commit lint & tests]
PCLT -->|pass| PTG[Push to GitHub]
PCLT -->|fail| RC[Reject Commit]
RC --> FB
PTG --> PR[Pull Request to Main]
PR --> LTB[GitHub Actions: Lint, Test, Build]
LTB --> |pass| CRAA[Code Review & Approval]
LTB -->|fail| RPR[Reject Pull Request]
RPR -->|Fix the Build & Commit| PCLT
CRAA --> SMTM[Squash & Merge to Main]
SMTM --> PDV[Production Re-deployment via Vercel]
/.husky/ # Husky hooks
/.github/workflows/ # GitHub Actions, integration tests
Create Account → Login → Modules → CS2040S → CS2040S First Set