# itssubhojit/remetra architecture

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

- Interactive diagram: https://gitdiagram.com/itssubhojit/remetra
- Repository: https://github.com/itssubhojit/remetra

## Overview

Remetra is a household bill and subscription tracker: users authenticate, manage recurring payment commitments, receive due-date reminders, and review spending insights. The client also supports receipt-assisted entry and Cashfree Sandbox settlement with synchronous verification and webhook reconciliation. The graph follows documented and indexed calls; some page behaviors and the webhook/reminder internals are not excerpted, so their undocumented links are omitted or marked unverified.

Main entry points: [`Frontend/src/pages/PaymentsPage.jsx`](https://github.com/itssubhojit/remetra/blob/main/Frontend/src/pages/PaymentsPage.jsx) (Payments page), [`Frontend/src/pages/DashboardPage.jsx`](https://github.com/itssubhojit/remetra/blob/main/Frontend/src/pages/DashboardPage.jsx) (Dashboard), [`Backend/src/routes/paymentRoutes.js`](https://github.com/itssubhojit/remetra/blob/main/Backend/src/routes/paymentRoutes.js) (Payment routes), [`Frontend/src/services/api.js`](https://github.com/itssubhojit/remetra/blob/main/Frontend/src/services/api.js) (API client)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Client application"]
  node_app["App router<br/>[App.jsx]"]
  node_landing["Landing page<br/>[LandingPage.jsx]"]
  node_authpage["Auth page<br/>[AuthPage.jsx]"]
  node_payments["Payments page<br/>[PaymentsPage.jsx]"]
  node_dashboard["Dashboard<br/>[DashboardPage.jsx]"]
  node_insights["Spend insights"]
  node_settings["Account settings<br/>[SettingsPage.jsx]"]
  node_drawer["Payment editor"]
  node_detailmodal["Payment details"]
  node_deletemodal["Delete confirmation"]
  node_sidebar["Navigation<br/>[Sidebar.jsx]"]
  node_api["API client<br/>[api.js]"]
  node_cashfreeclient["Checkout bridge<br/>[cashfree.js]"]
  node_contactpage["Contact page<br/>[ContactPage.jsx]"]
end

subgraph group_identity["Identity and access"]
  node_authctx["Auth context<br/>[AuthContext.jsx]"]
  node_firebaseclient["Firebase Auth<br/>[firebase.js]"]
  node_authroutes["Auth routes<br/>[authRoutes.js]"]
  node_authcontroller["Email verification<br/>[authController.js]"]
  node_verification[("OTP records")]
  node_authmiddleware["Token middleware<br/>[authMiddleware.js]"]
end

subgraph group_bill["Bill management"]
  node_paymentroutes["Payment routes<br/>[paymentRoutes.js]"]
  node_paymentcontroller["Payment operations"]
  node_paymentmodel[("Payment commitments<br/>[Payment.model.js]")]
  node_receipt["Receipt analysis"]
end

subgraph group_services["Backend services"]
  node_backend["Express API<br/>[app.js]"]
  node_ratelimiter["Rate limiting<br/>[rateLimiter.js]"]
  node_cashfree["Cashfree gateway<br/>[cashfreeService.js]"]
  node_cashfreeexternal["Cashfree Sandbox"]
  node_reminder["Reminder scheduler<br/>[reminderJob.js]"]
  node_email["Email delivery<br/>[emailService.js]"]
  node_resend["Resend"]
  node_contactroutes["Contact routes<br/>[contactRoutes.js]"]
  node_contactcontroller["Contact inquiry"]
end

node_user(("Household user"))

node_user -->|"uses"| node_app
node_app -->|"provides auth"| node_authctx
node_app -->|"routes to"| node_landing
node_app -->|"routes to"| node_authpage
node_authpage -->|"uses"| node_authctx
node_authctx -->|"authenticates with"| node_firebaseclient
node_user -.->|"manages bills"| node_payments
node_user -.->|"reviews"| node_dashboard
node_user -.->|"explores spending"| node_insights
node_user -.->|"configures account"| node_settings
node_payments -->|"requests data"| node_api
node_dashboard -->|"requests data"| node_api
node_payments -->|"opens editor"| node_drawer
node_payments -->|"shows details"| node_detailmodal
node_payments -->|"confirms deletion"| node_deletemodal
node_dashboard -->|"opens editor"| node_drawer
node_dashboard -->|"shows details"| node_detailmodal
node_dashboard -->|"confirms deletion"| node_deletemodal
node_api -->|"sends requests"| node_backend
node_backend -->|"mounts routes"| node_paymentroutes
node_backend -->|"mounts routes"| node_authroutes
node_backend -->|"mounts routes"| node_contactroutes
node_backend -->|"applies limits"| node_ratelimiter
node_paymentroutes -->|"protects routes"| node_authmiddleware
node_paymentroutes -->|"limits routes"| node_ratelimiter
node_paymentroutes -->|"dispatches to"| node_paymentcontroller
node_paymentcontroller -->|"reads and writes"| node_paymentmodel
node_paymentcontroller -->|"creates and verifies"| node_cashfree
node_cashfree -.->|"uses gateway"| node_cashfreeexternal
node_payments -->|"starts checkout"| node_cashfreeclient
node_dashboard -->|"starts checkout"| node_cashfreeclient
node_cashfreeclient -.->|"requests settlement"| node_api
node_cashfreeexternal -.->|"sends webhook"| node_paymentroutes
node_drawer -->|"submits bill and receipt"| node_api
node_paymentroutes -->|"dispatches analysis"| node_receipt
node_paymentcontroller -->|"analyzes receipt"| node_receipt
node_authroutes -->|"protects confirmation"| node_authmiddleware
node_authroutes -->|"dispatches to"| node_authcontroller
node_authcontroller -->|"reads and updates"| node_verification
node_authcontroller -->|"sends OTP"| node_email
node_reminder -->|"checks due bills"| node_paymentmodel
node_reminder -->|"sends reminders"| node_email
node_email -->|"delivers mail"| node_resend
node_contactpage -->|"submits inquiry"| node_api
node_contactroutes -->|"dispatches to"| node_contactcontroller
node_contactcontroller -->|"sends inquiry"| node_email
node_sidebar -->|"uses session"| node_authctx

click node_app "https://github.com/itssubhojit/remetra/blob/main/Frontend/src/App.jsx"
click node_landing "https://github.com/itssubhojit/remetra/blob/main/Frontend/src/pages/LandingPage.jsx"
click node_authpage "https://github.com/itssubhojit/remetra/blob/main/Frontend/src/pages/AuthPage.jsx"
click node_authctx "https://github.com/itssubhojit/remetra/blob/main/Frontend/src/context/AuthContext.jsx"
click node_firebaseclient "https://github.com/itssubhojit/remetra/blob/main/Frontend/src/config/firebase.js"
click node_authroutes "https://github.com/itssubhojit/remetra/blob/main/Backend/src/routes/authRoutes.js"
click node_authcontroller "https://github.com/itssubhojit/remetra/blob/main/Backend/src/controllers/authController.js"
click node_verification "https://github.com/itssubhojit/remetra/blob/main/Backend/src/models/EmailVerification.js"
click node_payments "https://github.com/itssubhojit/remetra/blob/main/Frontend/src/pages/PaymentsPage.jsx"
click node_dashboard "https://github.com/itssubhojit/remetra/blob/main/Frontend/src/pages/DashboardPage.jsx"
click node_insights "https://github.com/itssubhojit/remetra/blob/main/Frontend/src/pages/SpendInsightsPage.jsx"
click node_settings "https://github.com/itssubhojit/remetra/blob/main/Frontend/src/pages/SettingsPage.jsx"
click node_drawer "https://github.com/itssubhojit/remetra/blob/main/Frontend/src/components/Modals/PaymentFormDrawer.jsx"
click node_detailmodal "https://github.com/itssubhojit/remetra/blob/main/Frontend/src/components/Modals/PaymentDetailsModal.jsx"
click node_deletemodal "https://github.com/itssubhojit/remetra/blob/main/Frontend/src/components/Modals/DeleteConfirmModal.jsx"
click node_sidebar "https://github.com/itssubhojit/remetra/blob/main/Frontend/src/components/Navigation/Sidebar.jsx"
click node_api "https://github.com/itssubhojit/remetra/blob/main/Frontend/src/services/api.js"
click node_backend "https://github.com/itssubhojit/remetra/blob/main/Backend/app.js"
click node_authmiddleware "https://github.com/itssubhojit/remetra/blob/main/Backend/src/middlewares/authMiddleware.js"
click node_ratelimiter "https://github.com/itssubhojit/remetra/blob/main/Backend/src/middlewares/rateLimiter.js"
click node_paymentroutes "https://github.com/itssubhojit/remetra/blob/main/Backend/src/routes/paymentRoutes.js"
click node_paymentcontroller "https://github.com/itssubhojit/remetra/blob/main/Backend/src/controllers/paymentController.js"
click node_paymentmodel "https://github.com/itssubhojit/remetra/blob/main/Backend/src/models/Payment.model.js"
click node_receipt "https://github.com/itssubhojit/remetra/blob/main/Backend/src/services/receiptAiService.js"
click node_cashfree "https://github.com/itssubhojit/remetra/blob/main/Backend/src/services/cashfreeService.js"
click node_cashfreeclient "https://github.com/itssubhojit/remetra/blob/main/Frontend/src/services/cashfree.js"
click node_reminder "https://github.com/itssubhojit/remetra/blob/main/Backend/src/jobs/reminderJob.js"
click node_email "https://github.com/itssubhojit/remetra/blob/main/Backend/src/services/emailService.js"
click node_contactpage "https://github.com/itssubhojit/remetra/blob/main/Frontend/src/pages/ContactPage.jsx"
click node_contactroutes "https://github.com/itssubhojit/remetra/blob/main/Backend/src/routes/contactRoutes.js"
click node_contactcontroller "https://github.com/itssubhojit/remetra/blob/main/Backend/src/controllers/contactController.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_app,node_landing,node_authpage,node_payments,node_dashboard,node_insights,node_settings,node_drawer,node_detailmodal,node_deletemodal,node_sidebar,node_api,node_cashfreeclient,node_contactpage,node_user toneBlue
class node_authctx,node_firebaseclient,node_authroutes,node_authcontroller,node_verification,node_authmiddleware toneAmber
class node_paymentroutes,node_paymentcontroller,node_paymentmodel,node_receipt toneMint
class node_backend,node_ratelimiter,node_cashfree,node_cashfreeexternal,node_reminder,node_email,node_resend,node_contactroutes,node_contactcontroller toneRose
```

## Components

### Client application

- [App router](https://github.com/itssubhojit/remetra/blob/main/Frontend/src/App.jsx): `Frontend/src/App.jsx`
- [Landing page](https://github.com/itssubhojit/remetra/blob/main/Frontend/src/pages/LandingPage.jsx): `Frontend/src/pages/LandingPage.jsx`
- [Auth page](https://github.com/itssubhojit/remetra/blob/main/Frontend/src/pages/AuthPage.jsx): `Frontend/src/pages/AuthPage.jsx`
- [Payments page](https://github.com/itssubhojit/remetra/blob/main/Frontend/src/pages/PaymentsPage.jsx): `Frontend/src/pages/PaymentsPage.jsx`
- [Dashboard](https://github.com/itssubhojit/remetra/blob/main/Frontend/src/pages/DashboardPage.jsx): `Frontend/src/pages/DashboardPage.jsx`
- [Spend insights](https://github.com/itssubhojit/remetra/blob/main/Frontend/src/pages/SpendInsightsPage.jsx): `Frontend/src/pages/SpendInsightsPage.jsx`
- [Account settings](https://github.com/itssubhojit/remetra/blob/main/Frontend/src/pages/SettingsPage.jsx): `Frontend/src/pages/SettingsPage.jsx`
- [Payment editor](https://github.com/itssubhojit/remetra/blob/main/Frontend/src/components/Modals/PaymentFormDrawer.jsx): `Frontend/src/components/Modals/PaymentFormDrawer.jsx`
- [Payment details](https://github.com/itssubhojit/remetra/blob/main/Frontend/src/components/Modals/PaymentDetailsModal.jsx): `Frontend/src/components/Modals/PaymentDetailsModal.jsx`
- [Delete confirmation](https://github.com/itssubhojit/remetra/blob/main/Frontend/src/components/Modals/DeleteConfirmModal.jsx): `Frontend/src/components/Modals/DeleteConfirmModal.jsx`
- [Navigation](https://github.com/itssubhojit/remetra/blob/main/Frontend/src/components/Navigation/Sidebar.jsx): `Frontend/src/components/Navigation/Sidebar.jsx`
- [API client](https://github.com/itssubhojit/remetra/blob/main/Frontend/src/services/api.js): `Frontend/src/services/api.js`
- [Checkout bridge](https://github.com/itssubhojit/remetra/blob/main/Frontend/src/services/cashfree.js): `Frontend/src/services/cashfree.js`
- [Contact page](https://github.com/itssubhojit/remetra/blob/main/Frontend/src/pages/ContactPage.jsx): `Frontend/src/pages/ContactPage.jsx`

### Identity and access

- [Auth context](https://github.com/itssubhojit/remetra/blob/main/Frontend/src/context/AuthContext.jsx): `Frontend/src/context/AuthContext.jsx`
- [Firebase Auth](https://github.com/itssubhojit/remetra/blob/main/Frontend/src/config/firebase.js): `Frontend/src/config/firebase.js`
- [Auth routes](https://github.com/itssubhojit/remetra/blob/main/Backend/src/routes/authRoutes.js): `Backend/src/routes/authRoutes.js`
- [Email verification](https://github.com/itssubhojit/remetra/blob/main/Backend/src/controllers/authController.js): `Backend/src/controllers/authController.js`
- [OTP records](https://github.com/itssubhojit/remetra/blob/main/Backend/src/models/EmailVerification.js): `Backend/src/models/EmailVerification.js`
- [Token middleware](https://github.com/itssubhojit/remetra/blob/main/Backend/src/middlewares/authMiddleware.js): `Backend/src/middlewares/authMiddleware.js`

### Bill management

- [Payment routes](https://github.com/itssubhojit/remetra/blob/main/Backend/src/routes/paymentRoutes.js): `Backend/src/routes/paymentRoutes.js`
- [Payment operations](https://github.com/itssubhojit/remetra/blob/main/Backend/src/controllers/paymentController.js): `Backend/src/controllers/paymentController.js`
- [Payment commitments](https://github.com/itssubhojit/remetra/blob/main/Backend/src/models/Payment.model.js): `Backend/src/models/Payment.model.js`
- [Receipt analysis](https://github.com/itssubhojit/remetra/blob/main/Backend/src/services/receiptAiService.js): `Backend/src/services/receiptAiService.js`

### Backend services

- [Express API](https://github.com/itssubhojit/remetra/blob/main/Backend/app.js): `Backend/app.js`
- [Rate limiting](https://github.com/itssubhojit/remetra/blob/main/Backend/src/middlewares/rateLimiter.js): `Backend/src/middlewares/rateLimiter.js`
- [Cashfree gateway](https://github.com/itssubhojit/remetra/blob/main/Backend/src/services/cashfreeService.js): `Backend/src/services/cashfreeService.js`
- **Cashfree Sandbox**
- [Reminder scheduler](https://github.com/itssubhojit/remetra/blob/main/Backend/src/jobs/reminderJob.js): `Backend/src/jobs/reminderJob.js`
- [Email delivery](https://github.com/itssubhojit/remetra/blob/main/Backend/src/services/emailService.js): `Backend/src/services/emailService.js`
- **Resend**
- [Contact routes](https://github.com/itssubhojit/remetra/blob/main/Backend/src/routes/contactRoutes.js): `Backend/src/routes/contactRoutes.js`
- [Contact inquiry](https://github.com/itssubhojit/remetra/blob/main/Backend/src/controllers/contactController.js): `Backend/src/controllers/contactController.js`

### Other components

- **Household user**

## Connections

- Household user → App router: uses (evidence: `Frontend/src/App.jsx`)
- App router → Auth context: provides auth (evidence: `Frontend/src/App.jsx`)
- App router → Landing page: routes to (evidence: `Frontend/src/App.jsx`)
- App router → Auth page: routes to (evidence: `Frontend/src/App.jsx`)
- Auth page → Auth context: uses (evidence: `Frontend/src/pages/AuthPage.jsx`)
- Auth context → Firebase Auth: authenticates with (evidence: `Frontend/src/context/AuthContext.jsx`)
- Household user → Payments page: manages bills (evidence: `README.md`)
- Household user → Dashboard: reviews (evidence: `README.md`)
- Household user → Spend insights: explores spending (evidence: `README.md`)
- Household user → Account settings: configures account
- Payments page → API client: requests data (evidence: `Frontend/src/pages/PaymentsPage.jsx`)
- Dashboard → API client: requests data (evidence: `Frontend/src/pages/DashboardPage.jsx`)
- Payments page → Payment editor: opens editor (evidence: `Frontend/src/pages/PaymentsPage.jsx`)
- Payments page → Payment details: shows details (evidence: `Frontend/src/pages/PaymentsPage.jsx`)
- Payments page → Delete confirmation: confirms deletion (evidence: `Frontend/src/pages/PaymentsPage.jsx`)
- Dashboard → Payment editor: opens editor (evidence: `Frontend/src/pages/DashboardPage.jsx`)
- Dashboard → Payment details: shows details (evidence: `Frontend/src/pages/DashboardPage.jsx`)
- Dashboard → Delete confirmation: confirms deletion (evidence: `Frontend/src/pages/DashboardPage.jsx`)
- API client → Express API: sends requests (evidence: `Frontend/src/services/api.js`)
- Express API → Payment routes: mounts routes (evidence: `Backend/app.js`)
- Express API → Auth routes: mounts routes (evidence: `Backend/app.js`)
- Express API → Contact routes: mounts routes (evidence: `Backend/app.js`)
- Express API → Rate limiting: applies limits (evidence: `Backend/app.js`)
- Payment routes → Token middleware: protects routes (evidence: `Backend/src/routes/paymentRoutes.js`)
- Payment routes → Rate limiting: limits routes (evidence: `Backend/src/routes/paymentRoutes.js`)
- Payment routes → Payment operations: dispatches to (evidence: `Backend/src/routes/paymentRoutes.js`)
- Payment operations → Payment commitments: reads and writes (evidence: `Backend/src/controllers/paymentController.js`)
- Payment operations → Cashfree gateway: creates and verifies (evidence: `Backend/src/controllers/paymentController.js`)
- Cashfree gateway → Cashfree Sandbox: uses gateway (evidence: `README.md`)
- Payments page → Checkout bridge: starts checkout (evidence: `Frontend/src/pages/PaymentsPage.jsx`)
- Dashboard → Checkout bridge: starts checkout (evidence: `Frontend/src/pages/DashboardPage.jsx`)
- Checkout bridge → API client: requests settlement (evidence: `README.md`)
- Cashfree Sandbox → Payment routes: sends webhook (evidence: `README.md`)
- Payment editor → API client: submits bill and receipt (evidence: `Frontend/src/components/Modals/PaymentFormDrawer.jsx`)
- Payment routes → Receipt analysis: dispatches analysis (evidence: `Backend/src/routes/paymentRoutes.js`)
- Payment operations → Receipt analysis: analyzes receipt (evidence: `Backend/src/controllers/paymentController.js`)
- Auth routes → Token middleware: protects confirmation (evidence: `Backend/src/routes/authRoutes.js`)
- Auth routes → Email verification: dispatches to (evidence: `Backend/src/routes/authRoutes.js`)
- Email verification → OTP records: reads and updates (evidence: `Backend/src/controllers/authController.js`)
- Email verification → Email delivery: sends OTP (evidence: `Backend/src/controllers/authController.js`)
- Reminder scheduler → Payment commitments: checks due bills (evidence: `Backend/src/jobs/reminderJob.js`)
- Reminder scheduler → Email delivery: sends reminders (evidence: `Backend/src/jobs/reminderJob.js`)
- Email delivery → Resend: delivers mail (evidence: `Backend/src/services/emailService.js`)
- Contact page → API client: submits inquiry (evidence: `Frontend/src/pages/ContactPage.jsx`)
- Contact routes → Contact inquiry: dispatches to (evidence: `Backend/src/routes/contactRoutes.js`)
- Contact inquiry → Email delivery: sends inquiry (evidence: `Backend/src/controllers/contactController.js`)
- Navigation → Auth context: uses session (evidence: `Frontend/src/components/Navigation/Sidebar.jsx`)