Financial management system for small businesses — full-stack application built with modern technologies, from authentication to interactive dashboards with charts and data export.
🔗 Live Demo · 📦 Backend API
⚠️ Note: The backend is hosted on Render's free tier and may take up to 1 minute to wake up after inactivity. Please wait a moment if the first request is slow.
- 🔐 Authentication — Register and login with JWT stored in httpOnly cookies
- 📊 Dashboard — KPI cards, cash flow chart (Recharts), expense by category and recent transactions
- 💳 Transactions — Full CRUD with filters by type, month, account and text search
- 🏦 Accounts — Manage bank accounts with balance tracking, type and color
- 🏷️ Categories — Organize transactions with custom categories, type and color
- 📈 Reports — Monthly/yearly breakdown by category and account, with CSV export
- 📱 Responsive — Mobile-first layout with collapsible sidebar
| Technology | Purpose |
|---|---|
| Node.js + Express | REST API server |
| TypeScript | Type safety |
| MongoDB + Mongoose | Database and ODM |
| JWT + bcrypt | Authentication and password hashing |
| Zod | Schema validation |
| Cookie-parser | httpOnly cookie management |
| Technology | Purpose |
|---|---|
| Next.js 15 (App Router) | React framework with SSR |
| TypeScript | Type safety |
| Tailwind CSS | Utility-first styling |
| shadcn/ui | Accessible component library |
| Recharts | Interactive charts |
| Axios | HTTP client with credentials |
| Service | Purpose |
|---|---|
| MongoDB Atlas | Cloud database (M0 free tier) |
| Render | Backend hosting |
| Vercel | Frontend hosting |
| GitHub | Version control |
financeflow/
├── backend/ # Node.js + Express API
│ └── src/
│ ├── config/ # Database connection
│ ├── controllers/ # Business logic
│ ├── middlewares/ # Auth middleware
│ ├── models/ # Mongoose schemas
│ ├── routes/ # Express routes
│ └── utils/ # Token generation
│
└── frontend/ # Next.js App Router
└── src/
├── app/
│ ├── (auth)/ # Login/register pages
│ └── (dashboard)/ # Protected pages
│ ├── dashboard/
│ ├── transactions/
│ ├── accounts/
│ ├── categories/
│ └── reports/
├── lib/
│ ├── api.ts # Axios instance
│ └── hooks/ # Custom hooks with cache
└── types/ # TypeScript interfaces
- JWT in httpOnly cookies — More secure than localStorage, prevents XSS attacks
- Zod validation — Runtime schema validation on all API endpoints
- Custom hooks with cache — Module-level cache to avoid unnecessary re-fetches
- Mongoose populate — Avoids N+1 queries by joining category and account data
- Next.js App Router — Route groups
(auth)and(dashboard)for layout separation - CORS with credentials — Configured to allow cross-origin cookies between Vercel and Render
- Node.js 18+
- MongoDB Atlas account (free tier)
cd backend
npm installCreate a .env file:
PORT=5000
MONGO_URI=mongodb+srv://user:password@cluster.mongodb.net/financeflow
JWT_SECRET=your_secret_key_herenpm run devcd frontend
npm installCreate a .env.local file:
NEXT_PUBLIC_API_URL=http://localhost:5000/apinpm run devAccess at http://localhost:3000
POST /api/auth/register
POST /api/auth/login
POST /api/auth/logout
GET /api/auth/me
GET /api/transactions
POST /api/transactions
GET /api/transactions/:id
PUT /api/transactions/:id
DELETE /api/transactions/:id
GET /api/categories
POST /api/categories
PUT /api/categories/:id
DELETE /api/categories/:id
GET /api/accounts
POST /api/accounts
PUT /api/accounts/:id
DELETE /api/accounts/:id
- Building a production-ready REST API with Express + TypeScript
- JWT authentication with httpOnly cookies for security
- MongoDB aggregations and populate for relational-like queries
- Next.js App Router with route groups and nested layouts
- Full-stack deployment with Render + Vercel + MongoDB Atlas
- CORS configuration for cross-origin authentication
- Custom React hooks with client-side caching strategy
Samara Caldas
Built as a portfolio project to demonstrate full-stack development skills with modern technologies.