ExpenseTracker - Full Stack Application

A modern, full-stack expense tracking application built with NestJS (backend) and React (frontend). This project demonstrates professional-grade architecture, type safety, and modern development practices.

📋 Overview

ExpenseTracker is a comprehensive personal finance management application that allows users to:

• ✅ Track daily expenses with categorization
• 📊 Visualize spending patterns with interactive charts
• 💰 Set and monitor monthly budgets
• 🏷️ Create custom expense categories with colors and icons
• 📱 Responsive design for desktop and mobile use
• 🔐 Secure user authentication with JWT

🎥 Demo Video

waltkthough.mov

Complete walkthrough demonstrating all key features of the ExpenseTracker application

🖼️ Screenshots

Dashboard Overview & Statistics

Interactive charts showing spending patterns and category breakdowns

Expense Timeline

Timeline view of all expenses with filtering and categorization

Category Management

Create and manage custom expense categories with colors and budget limits

Add New Expense

Clean, intuitive expense creation form with category selection

Add New Category

Category creation with icon selection and budget limit setting

User Settings

Currency selection and monthly budget configuration

Authentication

Secure JWT-based authentication with clean UI

🏗️ Architecture

Technology Stack

Backend (NestJS)

• NestJS framework with TypeScript
• PostgreSQL database with TypeORM
• JWT authentication with bcrypt
• REST API with basic OpenAPI/Swagger documentation
• Comprehensive testing (Unit + E2E)

Frontend (React)

• React 18 with TypeScript and Vite
• Tailwind CSS with shadcn/ui components
• Zustand for state management
• React Query for server state
• React Hook Form with Zod validation

Shared Types

• npm workspaces monorepo
• Type-safe API communication
• Consistent data models

🚀 Quick Start

Prerequisites

• Node.js (v18 or higher)
• PostgreSQL (v12 or higher)
• npm or yarn

Installation

1. Clone the repository

   git clone <repository-url>
   cd nestjs-vue-demo

2. Install dependencies

   npm install

3. Setup database

   # Start PostgreSQL with Docker
   docker-compose up -d postgres

4. Configure environment

   # Backend environment
   cp backend/.env.example backend/.env
   # Edit backend/.env with your database credentials
   
   # Frontend environment
   cp frontend/.env.example frontend/.env.local
   # Edit frontend/.env.local with your API endpoint (usually http://localhost:3001)

5. Start development servers

   # Start backend (in one terminal)
   npm run backend:dev
   
   # Start frontend (in another terminal)
   npm run frontend:dev

🧪 Testing

# Backend testing
npm run test          # unit tests
npm run test:e2e      # E2E tests (requires Docker and proper .env setup)
npm run test:all      # All backend tests


# Quality checks
npm run lint          # Lint all code
npm run typecheck     # TypeScript type checking
npm run format        # Format code with Prettier

Note: E2E tests require:

1. Docker running for PostgreSQL
2. Proper .env file with database credentials in backend folder
3. Database connection working

🐳 Production Deployment (Docker)

Prerequisites

• Docker and Docker Compose
• .env file with production configuration

🚀 Quick Production Start

Option 1: Using Scripts (Recommended)

# Make scripts executable (first time only)
chmod +x scripts/*.sh

# Start production environment
./scripts/production-start.sh

Option 2: Using npm scripts

# Start production environment
npm run prod:start

# Stop production environment
npm run prod:stop

# View logs
npm run prod:logs

Option 3: Manual Docker Commands

# Build and start production containers
docker compose -f docker-compose.prod.yml up --build -d

# Stop production containers
docker compose -f docker-compose.prod.yml down

📋 Production Environment Setup

1. Create Production Environment File

   Copy the example environment file and customize:

   cp .env.example .env

   Update .env with your production values

2. Start Production Services

   The production setup includes:

   • PostgreSQL Database (port 5432)
   • NestJS Backend API (port 3001)
   • React Frontend (port 3002)

3. Access Your Application

   • Frontend: http://localhost:3002
   • Backend API: http://localhost:3001
   • API Documentation: http://localhost:3001/api/docs

   Development URLs:

   • Frontend: http://localhost:8080
   • Backend API: http://localhost:3001

🛠️ Production Management

# Start production environment
./scripts/production-start.sh

# Stop all services
./scripts/production-stop.sh

# Restart services (without rebuild)
./scripts/production-restart.sh

# View logs from all services
./scripts/production-logs.sh

# View logs from specific service
./scripts/production-logs.sh backend
./scripts/production-logs.sh frontend
./scripts/production-logs.sh database

🔧 Production Features

• Multi-stage Docker builds for optimized image sizes
• Security hardening with non-root users
• nginx serving React with proper caching headers
• Content Security Policy configured for Google Fonts
• Environment-based configuration
• Health checks for database readiness
• Demo data automatically seeded on first run

📊 Production Architecture

┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
│   Frontend      │    │    Backend      │    │   Database      │
│   (React)       │    │   (NestJS)      │    │ (PostgreSQL)    │
│   Port: 3002    │◄──►│   Port: 3001    │◄──►│   Port: 5432    │
│   nginx         │    │   Node.js       │    │   postgres:15   │
└─────────────────┘    └─────────────────┘    └─────────────────┘

📁 Project Structure

├── backend/                 # NestJS backend application
│   ├── src/
│   │   ├── auth/           # Authentication module
│   │   ├── users/          # User management
│   │   ├── categories/     # Expense categories
│   │   ├── expenses/       # Expense CRUD operations
│   │   ├── statistics/     # Analytics and reporting
│   │   └── database/       # Database configuration
│   └── test/               # E2E tests
├── frontend/               # React frontend application
│   ├── src/
│   │   ├── components/     # Reusable UI components
│   │   ├── pages/          # Route components
│   │   ├── hooks/          # Custom React hooks
│   │   ├── store/          # Zustand state management
│   │   └── lib/            # Utility functions
├── lib/                    # Shared types and utilities
│   └── types/              # TypeScript type definitions
└── docker-compose.yml      # Docker services configuration

🔧 Development

Available Scripts

# Development
npm run backend:dev          # Start backend in development mode
npm run frontend:dev         # Start frontend in development mode

# Building
npm run backend:build        # Build backend
npm run frontend:build       # Build frontend
npm run lib:build           # Build shared types library

# Testing
npm run test                # Backend unit tests
npm run test:e2e            # Backend E2E tests (with Docker)
npm run test:all            # All backend tests

# Quality
npm run lint                # Lint all code
npm run format              # Format code with Prettier
npm run typecheck           # TypeScript type checking

# Docker
npm run docker:up           # Start development Docker services
npm run docker:down         # Stop Docker services
npm run docker:build        # Build and start Docker services

# Production
npm run prod:start          # Start production environment
npm run prod:stop           # Stop production environment
npm run prod:logs           # View production logs

Key Features

• Type Safety: End-to-end type safety with shared types
• Modern UI: Clean, responsive interface with Tailwind CSS
• Real-time Updates: Optimistic updates for smooth UX
• Data Persistence: PostgreSQL with proper relationships
• Authentication: Secure JWT-based authentication
• Testing: Comprehensive test coverage
• Documentation: Auto-generated API documentation

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Built with NestJS framework
• UI components from shadcn/ui
• Icons by Lucide
• Development assistance from Claude Code
• Lovable for initial sketch of the front-end using Lovable
  • git repo: https://github.com/Musta-Pollo/duo-spend