# rebwaromer/flashcard architecture

> Architecture diagram of the GitHub repository rebwaromer/flashcard, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-13). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/rebwaromer/flashcard
- Repository: https://github.com/rebwaromer/flashcard

## Overview

FlashCard is a study platform whose main workflow is: users sign in, organize sets and flashcards, take quizzes, and track progress; they can also manage study tasks. The React routes lead to feature pages and components, which use API modules to reach the Express server. Server routes dispatch to authentication, study, quiz, and user logic backed by PostgreSQL. The README documents spaced repetition, guest todos, profile settings, and responsive use; unsampled frontend and backend links are shown only where supported by the README or source index.

Main entry points: [`frontend/src/routes.js`](https://github.com/rebwaromer/flashcard/blob/main/frontend/src/routes.js) (App routes), [`backend/server.js`](https://github.com/rebwaromer/flashcard/blob/main/backend/server.js) (Express server), [`backend/db.js`](https://github.com/rebwaromer/flashcard/blob/main/backend/db.js) (PostgreSQL), [`backend/users/streak.js`](https://github.com/rebwaromer/flashcard/blob/main/backend/users/streak.js) (Streak tracking)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Study interface"]
  node_routes["App routes<br/>[routes.js]"]
  node_home["Study home<br/>[Home.js]"]
  node_setsui["Set browser<br/>[sets.js]"]
  node_setdetails["Set details<br/>[SetDetails .js]"]
  node_cardcreate["Card creation<br/>[FlashcardCreate.js]"]
  node_quizui["Quiz experience<br/>[quiz.js]"]
  node_todo["Todo pages<br/>[todo.js]"]
  node_guesttodo["Guest todo<br/>[todo-guest.js]"]
  node_settings["Profile settings<br/>[settings.js]"]
  node_usercontext["User context<br/>[UserContext.js]"]
  node_apiuser["User API<br/>[apiUser.js]"]
end

subgraph group_server["API and access"]
  node_server["Express server<br/>[server.js]"]
  node_useroutes["User routes<br/>[userRoutes.js]"]
  node_cardroutes["Card routes<br/>[CardsRoutes.js]"]
  node_setroutes["Set routes<br/>[SetsRoutes.js]"]
  node_todoroutes["Todo routes<br/>[todoRoutes.js]"]
  node_quizroutes["Quiz routes<br/>[quizRoutes.js]"]
  node_auth["Authentication<br/>[authMiddleware.js]"]
end

subgraph group_learning["Study features"]
  node_cards["Card operations"]
  node_sets["Set operations"]
  node_todos["Todo operations"]
  node_quizprogress["Quiz and review<br/>[quizRoutes.js]"]
end

subgraph group_accounts["Account and progress"]
  node_userlogic["User operations"]
  node_streak["Streak tracking<br/>[streak.js]"]
end

subgraph group_storage["Persistence and email"]
  node_database[("PostgreSQL<br/>[db.js]")]
  node_mailer["Verification email<br/>[emailSender.js]"]
end

node_learner(("Learner"))
node_emailservice["Email provider"]

node_learner -->|"opens app"| node_routes
node_routes -->|"routes to"| node_home
node_routes -->|"routes to"| node_setsui
node_routes -->|"routes to"| node_setdetails
node_routes -->|"routes to"| node_cardcreate
node_routes -->|"routes to"| node_quizui
node_routes -->|"routes to"| node_todo
node_routes -->|"routes to"| node_guesttodo
node_routes -->|"routes to"| node_settings
node_usercontext -->|"checks login"| node_apiuser
node_setdetails -->|"uses card API"| node_cards
node_server -->|"mounts"| node_useroutes
node_server -->|"mounts"| node_cardroutes
node_server -->|"mounts"| node_setroutes
node_server -->|"mounts"| node_todoroutes
node_server -->|"mounts"| node_quizroutes
node_useroutes -->|"protects routes"| node_auth
node_cardroutes -->|"protects routes"| node_auth
node_setroutes -->|"protects routes"| node_auth
node_todoroutes -->|"protects routes"| node_auth
node_quizroutes -->|"protects routes"| node_auth
node_cardroutes -->|"dispatches CRUD"| node_cards
node_setroutes -->|"dispatches CRUD"| node_sets
node_todoroutes -->|"dispatches CRUD"| node_todos
node_useroutes -->|"dispatches account actions"| node_userlogic
node_quizroutes -->|"reads and writes"| node_database
node_cardroutes -->|"updates streak"| node_streak
node_setroutes -->|"updates streak"| node_streak
node_todoroutes -->|"updates streak"| node_streak
node_quizroutes -->|"updates streak"| node_streak
node_streak -->|"reads and writes"| node_database
node_userlogic -->|"sends verification"| node_mailer
node_mailer -->|"sends email"| node_emailservice
node_cards -->|"queries"| node_database
node_sets -->|"queries"| node_database
node_todos -->|"queries"| node_database
node_userlogic -->|"queries"| node_database

click node_routes "https://github.com/rebwaromer/flashcard/blob/main/frontend/src/routes.js"
click node_home "https://github.com/rebwaromer/flashcard/blob/main/frontend/src/pages/Home.js"
click node_setsui "https://github.com/rebwaromer/flashcard/blob/main/frontend/src/pages/sets.js"
click node_setdetails "https://github.com/rebwaromer/flashcard/blob/main/frontend/src/components/SetDetails%20.js"
click node_cardcreate "https://github.com/rebwaromer/flashcard/blob/main/frontend/src/components/FlashcardCreate.js"
click node_quizui "https://github.com/rebwaromer/flashcard/blob/main/frontend/src/pages/quiz.js"
click node_todo "https://github.com/rebwaromer/flashcard/blob/main/frontend/src/pages/todo.js"
click node_guesttodo "https://github.com/rebwaromer/flashcard/blob/main/frontend/src/pages/todo-guest.js"
click node_settings "https://github.com/rebwaromer/flashcard/blob/main/frontend/src/pages/settings.js"
click node_usercontext "https://github.com/rebwaromer/flashcard/blob/main/frontend/src/components/UserContext.js"
click node_apiuser "https://github.com/rebwaromer/flashcard/blob/main/frontend/src/api/apiUser.js"
click node_server "https://github.com/rebwaromer/flashcard/blob/main/backend/server.js"
click node_useroutes "https://github.com/rebwaromer/flashcard/blob/main/backend/routes/userRoutes.js"
click node_cardroutes "https://github.com/rebwaromer/flashcard/blob/main/backend/routes/CardsRoutes.js"
click node_setroutes "https://github.com/rebwaromer/flashcard/blob/main/backend/routes/SetsRoutes.js"
click node_todoroutes "https://github.com/rebwaromer/flashcard/blob/main/backend/routes/todoRoutes.js"
click node_quizroutes "https://github.com/rebwaromer/flashcard/blob/main/backend/routes/quizRoutes.js"
click node_auth "https://github.com/rebwaromer/flashcard/blob/main/backend/middleware/authMiddleware.js"
click node_cards "https://github.com/rebwaromer/flashcard/tree/main/backend/Cards"
click node_sets "https://github.com/rebwaromer/flashcard/tree/main/backend/Sets"
click node_todos "https://github.com/rebwaromer/flashcard/tree/main/backend/todo"
click node_quizprogress "https://github.com/rebwaromer/flashcard/blob/main/backend/routes/quizRoutes.js"
click node_userlogic "https://github.com/rebwaromer/flashcard/tree/main/backend/users"
click node_streak "https://github.com/rebwaromer/flashcard/blob/main/backend/users/streak.js"
click node_database "https://github.com/rebwaromer/flashcard/blob/main/backend/db.js"
click node_mailer "https://github.com/rebwaromer/flashcard/blob/main/backend/utils/emailSender.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_routes,node_home,node_setsui,node_setdetails,node_cardcreate,node_quizui,node_todo,node_guesttodo,node_settings,node_usercontext,node_apiuser toneBlue
class node_server,node_useroutes,node_cardroutes,node_setroutes,node_todoroutes,node_quizroutes,node_auth toneAmber
class node_cards,node_sets,node_todos,node_quizprogress toneMint
class node_userlogic,node_streak toneRose
class node_database,node_mailer,node_learner,node_emailservice toneIndigo
```

## Components

### Study interface

- [App routes](https://github.com/rebwaromer/flashcard/blob/main/frontend/src/routes.js): `frontend/src/routes.js`
- [Study home](https://github.com/rebwaromer/flashcard/blob/main/frontend/src/pages/Home.js): `frontend/src/pages/Home.js`
- [Set browser](https://github.com/rebwaromer/flashcard/blob/main/frontend/src/pages/sets.js): `frontend/src/pages/sets.js`
- [Set details](https://github.com/rebwaromer/flashcard/blob/main/frontend/src/components/SetDetails%20.js): `frontend/src/components/SetDetails .js`
- [Card creation](https://github.com/rebwaromer/flashcard/blob/main/frontend/src/components/FlashcardCreate.js): `frontend/src/components/FlashcardCreate.js`
- [Quiz experience](https://github.com/rebwaromer/flashcard/blob/main/frontend/src/pages/quiz.js): `frontend/src/pages/quiz.js`
- [Todo pages](https://github.com/rebwaromer/flashcard/blob/main/frontend/src/pages/todo.js): `frontend/src/pages/todo.js`
- [Guest todo](https://github.com/rebwaromer/flashcard/blob/main/frontend/src/pages/todo-guest.js): `frontend/src/pages/todo-guest.js`
- [Profile settings](https://github.com/rebwaromer/flashcard/blob/main/frontend/src/pages/settings.js): `frontend/src/pages/settings.js`
- [User context](https://github.com/rebwaromer/flashcard/blob/main/frontend/src/components/UserContext.js): `frontend/src/components/UserContext.js`
- [User API](https://github.com/rebwaromer/flashcard/blob/main/frontend/src/api/apiUser.js): `frontend/src/api/apiUser.js`

### API and access

- [Express server](https://github.com/rebwaromer/flashcard/blob/main/backend/server.js): `backend/server.js`
- [User routes](https://github.com/rebwaromer/flashcard/blob/main/backend/routes/userRoutes.js): `backend/routes/userRoutes.js`
- [Card routes](https://github.com/rebwaromer/flashcard/blob/main/backend/routes/CardsRoutes.js): `backend/routes/CardsRoutes.js`
- [Set routes](https://github.com/rebwaromer/flashcard/blob/main/backend/routes/SetsRoutes.js): `backend/routes/SetsRoutes.js`
- [Todo routes](https://github.com/rebwaromer/flashcard/blob/main/backend/routes/todoRoutes.js): `backend/routes/todoRoutes.js`
- [Quiz routes](https://github.com/rebwaromer/flashcard/blob/main/backend/routes/quizRoutes.js): `backend/routes/quizRoutes.js`
- [Authentication](https://github.com/rebwaromer/flashcard/blob/main/backend/middleware/authMiddleware.js): `backend/middleware/authMiddleware.js`

### Study features

- [Card operations](https://github.com/rebwaromer/flashcard/tree/main/backend/Cards): `backend/Cards`
- [Set operations](https://github.com/rebwaromer/flashcard/tree/main/backend/Sets): `backend/Sets`
- [Todo operations](https://github.com/rebwaromer/flashcard/tree/main/backend/todo): `backend/todo`
- [Quiz and review](https://github.com/rebwaromer/flashcard/blob/main/backend/routes/quizRoutes.js): `backend/routes/quizRoutes.js`

### Account and progress

- [User operations](https://github.com/rebwaromer/flashcard/tree/main/backend/users): `backend/users`
- [Streak tracking](https://github.com/rebwaromer/flashcard/blob/main/backend/users/streak.js): `backend/users/streak.js`

### Persistence and email

- [PostgreSQL](https://github.com/rebwaromer/flashcard/blob/main/backend/db.js): `backend/db.js`
- [Verification email](https://github.com/rebwaromer/flashcard/blob/main/backend/utils/emailSender.js): `backend/utils/emailSender.js`

### Other components

- **Learner**
- **Email provider**

## Connections

- Learner → App routes: opens app (evidence: `frontend/src/routes.js`)
- App routes → Study home: routes to (evidence: `frontend/src/routes.js`)
- App routes → Set browser: routes to (evidence: `frontend/src/routes.js`)
- App routes → Set details: routes to (evidence: `frontend/src/routes.js`)
- App routes → Card creation: routes to (evidence: `frontend/src/routes.js`)
- App routes → Quiz experience: routes to (evidence: `frontend/src/routes.js`)
- App routes → Todo pages: routes to (evidence: `frontend/src/routes.js`)
- App routes → Guest todo: routes to (evidence: `frontend/src/routes.js`)
- App routes → Profile settings: routes to (evidence: `frontend/src/routes.js`)
- User context → User API: checks login (evidence: `frontend/src/components/UserContext.js`)
- Set details → Card operations: uses card API (evidence: `frontend/src/components/SetDetails .js`)
- Express server → User routes: mounts (evidence: `backend/server.js`)
- Express server → Card routes: mounts (evidence: `backend/server.js`)
- Express server → Set routes: mounts (evidence: `backend/server.js`)
- Express server → Todo routes: mounts (evidence: `backend/server.js`)
- Express server → Quiz routes: mounts (evidence: `backend/server.js`)
- User routes → Authentication: protects routes (evidence: `backend/routes/userRoutes.js`)
- Card routes → Authentication: protects routes (evidence: `backend/routes/CardsRoutes.js`)
- Set routes → Authentication: protects routes (evidence: `backend/routes/SetsRoutes.js`)
- Todo routes → Authentication: protects routes (evidence: `backend/routes/todoRoutes.js`)
- Quiz routes → Authentication: protects routes (evidence: `backend/routes/quizRoutes.js`)
- Card routes → Card operations: dispatches CRUD (evidence: `backend/routes/CardsRoutes.js`)
- Set routes → Set operations: dispatches CRUD (evidence: `backend/routes/SetsRoutes.js`)
- Todo routes → Todo operations: dispatches CRUD (evidence: `backend/routes/todoRoutes.js`)
- User routes → User operations: dispatches account actions (evidence: `backend/routes/userRoutes.js`)
- Quiz routes → PostgreSQL: reads and writes (evidence: `backend/routes/quizRoutes.js`)
- Card routes → Streak tracking: updates streak (evidence: `backend/routes/CardsRoutes.js`)
- Set routes → Streak tracking: updates streak (evidence: `backend/routes/SetsRoutes.js`)
- Todo routes → Streak tracking: updates streak (evidence: `backend/routes/todoRoutes.js`)
- Quiz routes → Streak tracking: updates streak (evidence: `backend/routes/quizRoutes.js`)
- Streak tracking → PostgreSQL: reads and writes (evidence: `backend/users/streak.js`)
- User operations → Verification email: sends verification (evidence: `backend/users/register.js`)
- Verification email → Email provider: sends email (evidence: `backend/utils/emailSender.js`)
- Card operations → PostgreSQL: queries (evidence: `backend/Cards/createCard.js`)
- Set operations → PostgreSQL: queries (evidence: `backend/Sets/createSet.js`)
- Todo operations → PostgreSQL: queries (evidence: `backend/todo/createTodo.js`)
- User operations → PostgreSQL: queries (evidence: `backend/users/login.js`)