💰 Spendy - Personal Finance Tracker

Spendy is a modern web application for tracking personal finances, managing expenses and income, and visualizing financial statistics. Built with Next.js 16 and TypeScript, it provides an intuitive interface for managing your budget across all devices.

🔗 Links

Live Demo: https://spendy-expense-tracker-web.vercel.app
Backend Repository: spendy-expence-tracker-api

📋 About the Project

Spendy helps users:

Track transactions - Record income and expenses with categories
Monitor balance - Real-time balance updates with every transaction
Analyze spending - Visual statistics and charts by category and period
Stay informed - Live currency exchange rates (UAH, USD, EUR)
Access anywhere - Fully responsive design for mobile, tablet, and desktop

🚀 Technologies Used

Core Technologies

State Management & Data Fetching

Forms & Validation

UI Components & Visualization

📦 Installation and Setup

Prerequisites

Node.js 20+
npm or yarn

Installation Steps

Clone the repository

git clone https://github.com/helen-akateva/spendy-expense-tracker-web.git
cd spendy-expense-tracker-web

Install dependencies

npm install
# or
yarn install

Run development server

npm run dev
# or
yarn dev

Open http://localhost:3000 in your browser.

Build for production

npm run build
npm start
# or
yarn build
yarn start

🏗️ Project Structure

spendy-expense-tracker-web/
├── app/                      # Next.js App Router
│   ├── (auth)/              # Authentication pages (public routes)
│   │   ├── login/
│   │   └── register/
│   ├── (dashboard)/         # Dashboard pages (private routes)
│   │   ├── transactions/    # Home tab - transaction list
│   │   ├── statistics/      # Statistics with charts
│   │   └── currency/        # Currency rates (mobile)
│   ├── api/                 # API Route Handlers
│   ├── globals.css          # Global styles and CSS variables
│   └── layout.tsx           # Root layout
├── components/              # React components
│   ├── Auth/               # Login & Registration forms
│   ├── HomeTab/            # Transaction list & items
│   ├── StatisticsTab/      # Charts and statistics
│   ├── UserAcountLayout/   # Header, Sidebar, Navigation
│   ├── Modal*/             # Modal windows
│   └── ...
├── lib/                     # Utilities and services
│   ├── api/                # API client functions
│   ├── hooks/              # Custom React hooks
│   ├── stores/             # Zustand stores
│   ├── services/           # Business logic
│   └── validations/        # Yup schemas
├── public/                  # Static assets
├── middleware.ts            # Route protection middleware
└── package.json

🔐 Authentication

The app uses JWT-based authentication with:

Public routes: /login, /register
Private routes: /, /transactions, /statistics, /currency
Middleware protection: Automatic redirects based on auth status
Persistent sessions: Zustand with localStorage

🎨 Features

📊 Transaction Management

Add, edit, and delete transactions
Categorize as income or expenses
Add comments and select dates
Real-time balance updates

📈 Statistics & Analytics

Interactive charts (Recharts)
Filter by month and year
Toggle between income/expenses
Category breakdown

💱 Currency Rates

Live exchange rates from Monobank API
Cached for 1 hour (localStorage)
UAH, USD, EUR support

📱 Responsive Design

Mobile-first approach
Breakpoints: 320px, 768px, 1280px
Optimized layouts for all devices

🌐 Deployment

The application can be deployed on:

Vercel (recommended for Next.js)
Netlify
Custom server with Node.js

Deploy to Vercel

vercel deploy

📝 API Integration

The app connects to a backend API with the following endpoints:

POST /api/auth/register - User registration
POST /api/auth/login - User login
POST /api/auth/logout - User logout
GET /api/users/current - Get current user
GET /api/transactions - Get all transactions
POST /api/transactions - Create transaction
PATCH /api/transactions/:id - Update transaction
DELETE /api/transactions/:id - Delete transaction
GET /api/summary/:period - Get statistics
GET /api/categories - Get categories

📄 License

This project was created for educational purposes.

👥 Team

This project was developed as the final capstone for our Fullstack Development course, showcasing our skills in both Backend and Frontend technologies:

👩‍💻 Olena Akatieva - Team Lead, Fullstack Developer (LinkedIn)

👨‍💻 Denis Shulga - Scrum Master, Fullstack Developer (LinkedIn)

👨‍💻 Roman Kniazhyk - Fullstack Developer (LinkedIn)

👩‍💻 Faina Kusiaka - Fullstack Developer (LinkedIn)

👨‍💻 Anton Shuvalov - Fullstack Developer (LinkedIn)

👩‍💻 Anastasiia Mamatova - Fullstack Developer (LinkedIn)

👨‍💻 Artem Ivanichenko - Fullstack Developer (LinkedIn)

👨‍💻 Dmytro Kravchenko - Fullstack Developer (LinkedIn)

🙏 Acknowledgments

Design inspiration from modern fintech apps
Next.js team for the amazing framework
Monobank API for currency rates
All open-source libraries used in this project

Made with ❤️ for better financial management

helen-akateva/spendy-expense-tracker-web