Expense Tracker

Full-Stack Expense Tracker

48 Hours. One Complete Full-Stack Product.

Over the last 48 hours, alongside my regular work, I built a complete Full-Stack Expense Tracker application from scratch as part of a frontend engineering assignment.

Unlike a frontend-only application, this project involved designing and connecting the complete product — from the user interface and API layer to authentication, database schemas, validation, analytics and performance optimization.

The goal was to build a practical application with a strong focus on clean architecture, security, performance and user experience.

The Goal

The application was designed to provide users with a simple way to manage and understand their expenses.

The core experience includes:

• Secure user authentication
• Expense creation
• Expense editing
• Expense deletion
• Expense search
• Category filtering
• Cursor-based pagination
• Dashboard analytics
• Expense trends
• Category-wise breakdowns

The project combines these capabilities into one complete full-stack experience.

Authentication & Security

The application uses JWT-based authentication to secure user accounts and application data.

Protected routes ensure that authenticated functionality is only accessible to authorized users.

API requests are validated before reaching the core application logic, helping maintain predictable and reliable API behavior.

Expense Management

The application provides complete CRUD functionality for expenses.

Users can:

• Create expenses
• Update existing expenses
• Delete expenses
• Search expenses
• Filter expenses by category
• Browse expenses through pagination

The expense management flow was designed to remain simple while supporting a growing amount of user data.

Search & Pagination

The application includes search and category filtering for quickly finding relevant expenses.

Instead of relying only on traditional page-number pagination, the project uses cursor-based pagination to support more efficient navigation through expense data.

Search is also optimized using debouncing, preventing unnecessary API requests while the user is actively typing.

Dashboard Analytics

The dashboard provides users with an overview of their spending patterns.

It includes:

• Expense trends
• Category-wise expense breakdowns
• Aggregated expense information

The analytics layer is backed by MongoDB aggregation pipelines so that calculations can be performed efficiently at the database level.

MongoDB Aggregation

One of the important backend engineering aspects of this project was using MongoDB Aggregation Pipelines for dashboard analytics and data processing.

Instead of retrieving large amounts of raw expense data and performing all calculations on the application server, aggregation pipelines allow the database to process and group the relevant information efficiently.

This is particularly useful for:

• Expense totals
• Category breakdowns
• Trend calculations
• Dashboard summaries

API Validation

The backend uses Zod for request validation.

Incoming API data is validated against defined schemas before being processed.

This provides a consistent validation layer and helps prevent invalid data from reaching the application's business logic.

Performance

Performance was considered throughout the application rather than being treated as a final optimization step.

The project includes several optimization techniques:

• Debounced search
• Lazy loading
• Dashboard caching
• MongoDB lean queries
• Cursor-based pagination
• Database-level aggregation

These optimizations help reduce unnecessary requests, processing and data transfer while keeping the application responsive.

Architecture

The project follows a separation between the frontend, backend API and database layers.

The frontend handles the user experience and application interaction.

The Express backend manages:

• Authentication
• API endpoints
• Request validation
• Business logic
• Database communication

MongoDB provides the persistence layer for users and expense data.

This separation makes the application easier to reason about and provides a foundation for extending the product later.

Technology

The project is built with:

• React
• TypeScript
• Node.js
• Express
• MongoDB
• JWT
• Zod

React and TypeScript power the frontend, Node.js and Express provide the backend API, MongoDB handles persistence and aggregation, JWT manages authentication, and Zod provides API request validation.

Working Under a Deadline

Building the entire application within 48 hours alongside regular work made prioritization an important part of the project.

A limited timeline forces you to distinguish between what is essential and what can wait.

The project required making practical decisions around:

• API design
• Database schema design
• Authentication
• Feature prioritization
• Performance
• Validation
• Responsive UI
• Analytics

The goal was not simply to build as many features as possible, but to deliver a complete and maintainable product within the available time.

What I Learned

One thing I continue to realize is that building under time constraints forces you to focus on priorities, write cleaner code and make practical engineering decisions.

From designing APIs and database schemas to building the responsive UI and analytics dashboard, this project was a great exercise in delivering a complete product within a limited timeframe.

It was also a good reminder that full-stack engineering is not only about connecting a frontend to a backend.

It is about thinking through the entire system — data, security, APIs, performance, user experience and maintainability.