← Back to portfolio

Selected work

FinanCinno

LiveVisitCode

A personal finance workspace that makes budgeting feel calm instead of chaotic.

Summary

Financcino is a full-stack personal finance application that lets users log expenses, upload and process receipts, set budgets, and get spending insights through analytics dashboards and an AI chatbot. It's the most security- and backend-hardened project in the portfolio set, with rate limiting, security headers, and structured input validation already in place — details that matter a lot for a finance-adjacent app and are worth highlighting explicitly.

Problem

Logging expenses by hand is tedious enough that most people stop doing it within weeks.Receipts pile up physically or in photo albums with no structured way to extract the data.Without categorized analytics, people can see that they overspent, but not where or why.Budgeting tools rarely connect budget limits to real-time actual spending in a way that's visible before the money's already gone.

Solution

Structured expense logging — add, edit, delete, and categorize expenses (Food, Transport, Utilities, etc.), filterable by date/category/amount.Receipt upload and processing — image upload (via Multer) with OCR-based automatic expense extraction, removing manual entry for anything with a receipt.Budget management — set per-category budget limits with budget-vs-actual comparison and alerts, so overspending is visible before it happens, not after.Analytics dashboards — interactive Recharts-based visualizations for category breakdowns and monthly/yearly trends.AI chatbot — financial advice and spending-pattern analysis based on the user's own logged data, rather than generic tips.Security-first backend — Helmet security headers, express-rate-limit, express-validator input validation, and JWT + Clerk auth, which matters more here than in most portfolio projects since the data is financial.

Features

Expense ManagementLog transactions in a few taps so spending tracking stays effortless.Add/edit/delete/categorize expenses; filter by date, category, amount; real-time tracking
Recipet ProccessingFlags spending drift and surfaces practical nudges without overwhelming the user.Upload JPG/PNG receipts, automatic expense extraction, bulk upload, receipt storage/retrieval
Analytics And ReportingInteractive charts (Recharts), category-wise breakdowns, monthly/yearly trend viewsTurns raw activity into plain-English snapshots for the week or month.
Budget ManagementPer-category budget limits, budget-vs-actual comparison, alerts and notificationsKeeps the surface focused on the next best action instead of dense dashboards.
Auth & SecurityJWT-based auth + Clerk integration, role-based access control, bcrypt hashing, rate limiting on API endpoints

Architecture

Frontend

ReactReact
TailwindcssTailwindcss
AxiosAxios

Backend

Node.jsNode.js
ExpressExpress
MongooseMongoose

Database

MongoDBMongoDB

DevOps & Tooling

ClerkClerk
VercelVercel
RenderRender

Financcino follows a secure MERN architecture where a React + Vite frontend communicates with a security-hardened Express.js backend through REST APIs for all financial operations.

Users authenticate using Clerk, which manages secure sign-in, session handling, and protected access before requests reach the backend.

Authenticated requests are validated through JWT middleware, while Helmet, Express Rate Limiting, and Express Validator provide layered protection against common security threats and invalid input.

The backend routes requests through dedicated controllers for authentication, expenses, categories, receipts, analytics, chatbot, and budget management, keeping business logic modular and maintainable.

Expense receipts are uploaded through a Multer-based file processing pipeline, where OCR extracts structured transaction data that can be reviewed and stored as expense records.

Mongoose models interact with MongoDB to manage users, expenses, categories, receipts, budgets, transactions, and analytics, ensuring efficient data persistence and retrieval.

The React frontend updates dashboards, expense tracking, analytics charts, and chatbot interactions dynamically using REST APIs, Context API, and custom hooks without requiring page reloads.

This layered architecture separates authentication, security, business logic, file processing, and data persistence, resulting in a scalable, secure, and maintainable personal finance platform.

Key code

routes/transactions.js
router.post("/api/transactions", requireAuth, async (req, res) => {
  const { amount, category, description, date } = req.body;

  const transaction = await db.transactions.create({
    userId: req.auth.userId,
    amount,
    category,
    description,
    date: new Date(date),
  });

  // Auto-update budget coaching
  const budget = await db.budgets.findByUserAndCategory(
    req.auth.userId, category
  );
  if (budget && budget.spent + amount > budget.limit) {
    transaction.coaching = {
      type: "warning",
      message: `You've used ${Math.round(((budget.spent + amount) / budget.limit) * 100)}% of your ${category} budget.`
    };
  }

  res.json({ transaction });
});

Results

Achieved a Lighthouse Performance score of 90/100

Scored 96/100 for Accessibility and 100/100 for SEO

First Contentful Paint (FCP): 0.9 s

Largest Contentful Paint (LCP): 1.6 s