How robiul-hasan-jisan/finlife works
1. Overall shape
- FinLife is a split-stack app: a Next.js frontend and an Express/Node backend.
- The frontend handles UI, routing, auth state, and formatting; the backend exposes REST endpoints, validates Firebase tokens, and persists data in MongoDB Atlas.
2. External services
- Firebase Authentication is the identity provider for email/password login and registration.
- Firebase Admin SDK is used on the backend to verify bearer tokens.
- MongoDB Atlas stores all user-owned finance and productivity records.
3. Frontend application shell
- The frontend uses the Next.js App Router under frontend/app.
- app/layout.tsx provides the root shell and app-wide providers.
- app/page.tsx acts as the entry entry/redirect point, while app/auth/* contains login and registration screens.
4. Authenticated dashboard area
- app/dashboard/layout.tsx wraps the private area with the main navigation chrome, including sidebar/topbar.
- app/dashboard/page.tsx is the dashboard home with summaries and charts.
- Feature pages exist per domain: expenses, income, budgets, goals, investments, subscriptions, habits, tasks, notes, settings, and profile.
5. Frontend state and integration layer
- lib/auth-context.tsx holds the signed-in user/session state.
- lib/currency-context.tsx manages the selected currency across the UI.
- lib/firebase.ts initializes the Firebase client SDK.
- lib/api.ts centralizes HTTP calls to the backend and attaches the Firebase auth token automatically.
6. Reusable UI pattern
- components/CrudPage.tsx is a shared CRUD surface used by many feature pages.
- This suggests the UI is mostly table/form driven, with a common interaction model across finance and productivity modules rather than bespoke screens for each domain.
7. Backend request pipeline
- backend/server.js is the Express entry point.
- Requests enter through middleware, especially middleware/auth.js, which verifies the Firebase bearer token before protected routes execute.
- The backend is effectively a protected API layer for the frontend.
8. Data model layer
- models/User.js, Expense.js, Income.js, and Budget.js are explicit Mongoose models.
- models/index.js aggregates the remaining domain models such as goals, investments, subscriptions, habits, tasks, notes, and settings.
- The model layer is the persistence boundary between request handlers and MongoDB.
9. CRUD-oriented domain routes
- Most backend endpoints are organized by domain under routes/ and expose standard GET/POST/PUT/DELETE operations.
- routes/crudFactory.js is a shared router generator, indicating many modules use a consistent CRUD pattern.
- Domain routers include expenses, income, budgets, goals, investments, subscriptions, tasks, notes, and settings.
10. Specialized backend endpoints
- routes/dashboard.js provides aggregated analytics for the dashboard summary rather than raw CRUD.
- routes/habits.js includes habit-specific logic such as streak/completion handling, including a dedicated completion action.
- routes/users.js and /users/me handle user profile access and updates.
11. Main data flow
- User signs in through Firebase on the frontend.
- The frontend stores/authenticates the session, then sends the Firebase ID token as Authorization: Bearer ... on API calls.
- The backend verifies the token, loads or updates MongoDB documents for the current user, and returns JSON to the UI.
- Dashboard views combine multiple backend reads into summaries and charts.
12. Architectural boundaries
- The frontend never talks directly to MongoDB; all persistence goes through the Express API.
- Firebase is used strictly for authentication, while MongoDB is the system of record for app data.
- The backend enforces user ownership at the API boundary, making the app multi-user and data-isolated by authenticated identity.
13. Cross-cutting concerns
- Currency handling is centralized in the frontend so monetary values can be rendered consistently in USD, EUR, GBP, INR, JPY, and BDT.
- The app supports responsive layouts and theme switching, but those are UI concerns rather than separate architectural subsystems.
14. What to diagram
- A good architecture diagram should show:
- Browser/Next.js frontend
- Firebase Authentication
- Express API with auth middleware
- MongoDB Atlas
- Domain modules grouped around finance, habits/tasks/notes, and dashboard analytics
- Shared frontend contexts and shared backend CRUD factory as internal reuse points
Main entry points: server.js API server · index.js Models · api.ts API client · page.tsx Feature pages
Components 19
Frontend
Next.js UI, auth state, and shared client integration
- App shell · Root layout and entry pages for the client app
frontend/app/layout.tsx - Auth screens · Login and registration pages
frontend/app/auth/login/page.tsx - Dashboard shell · Private dashboard chrome and section routing
frontend/app/dashboard/layout.tsx - Dashboard home · Overview with summaries and charts
frontend/app/dashboard/page.tsx - Feature pages · Budget, expense, income, goals, habits, investments, subscriptions, tasks, notes, settings, and profile screens
frontend/app/dashboard/expenses/page.tsx - Auth state · Signed-in user and session state
frontend/lib/auth-context.tsx - Currency state · Selected currency shared across the UI
frontend/lib/currency-context.tsx - Firebase client · Client-side Firebase authentication initialization
frontend/lib/firebase.ts - API client · Centralized backend requests with auth token attachment
frontend/lib/api.ts - CRUD page · Reusable table and form surface for many feature pages
frontend/components/CrudPage.tsx
Backend
Express API, middleware, routes, and persistence
- API server · Backend application entry point
backend/server.js - Auth middleware · Verifies Firebase bearer tokens before protected routes
backend/middleware/auth.js - CRUD factory · Shared generator for standard resource routes
backend/routes/crudFactory.js - Dashboard route · Aggregated summary endpoint for dashboard views
backend/routes/dashboard.js - Habits route · Habit completion and streak logic
backend/routes/habits.js - Users route · Current user profile access and updates
backend/routes/users.js - Models · User and domain persistence models
backend/models/index.js
External services
Identity provider and database
- Firebase Auth · Email/password sign-in and registration
- MongoDB Atlas · System of record for user-owned app data
Connections 21
- App shell → Auth state: provides · Root app wiring supplies session state to the UI
- App shell → Currency state: provides · Root app wiring supplies currency preference to the UI
- Auth screens → Firebase Auth: signs in · Login and registration use Firebase authentication
- Auth state → Firebase client: uses · Session state is backed by the Firebase client SDK
- Dashboard shell → API client: loads data · Private screens fetch backend data through the API client
- Dashboard home → API client: summaries · Dashboard overview reads aggregated API data
- Feature pages → CRUD page: reuses · Many domain pages share the CRUD surface
- Feature pages → API client: loads data · Feature screens read and write through the API client
- Currency state → Feature pages: formats · Shared currency preference affects monetary views
- API client → API server: calls · Browser requests target the Express API
- API server → Auth middleware: protects · Protected routes pass through token verification
- Auth middleware → Firebase Auth: verifies token · Backend validates Firebase bearer tokens via admin auth
- API server → Dashboard route: routes · Dashboard summary endpoint is mounted on the API server
- API server → Habits route: routes · Habit-specific actions are mounted on the API server
- API server → Users route: routes · Profile endpoints are mounted on the API server
- Dashboard route → Models: reads · Aggregated analytics are computed from persisted models
- Habits route → Models: writes · Habit completion updates persistent records
- Users route → Models: reads/writes · Profile data is stored through the model layer
- API server → CRUD factory: shares pattern · Many resource routes are built from the shared CRUD generator
- CRUD factory → Models: uses · Generated routes operate on Mongoose models
- Models → MongoDB Atlas: persists · Mongoose models store app data in MongoDB Atlas