About This Project

Student Finance Tracker - A comprehensive expense management tool built with vanilla web technologies

Overview

The Student Finance Tracker is a progressive web application designed to help students manage their personal finances effectively. Built entirely with vanilla HTML, CSS, and JavaScript (ES6+ modules), it demonstrates modern web development practices including client-side state management, data persistence, and responsive design—all without external frameworks.

Key Features

  • Transaction Management: Add, edit, delete, and view all your financial transactions with full CRUD operations
  • Advanced Search: Use regex patterns to search and filter transactions by description, category, amount, or date
  • Budget Tracking: Set a monthly budget cap and monitor spending with real-time progress indicators and warnings
  • Statistics Dashboard: View spending trends, category breakdowns, and last 7 days spending summary
  • Multi-Currency Support: Work with USD, EUR, and RWF with instant currency conversion
  • Data Portability: Import and export your data as JSON for backup and migration
  • Offline Storage: All data stored locally using localStorage API—works offline
  • Service Worker Support: Progressive Web App capabilities for enhanced offline functionality
  • Dark Mode: Toggle between light and dark themes with theme preference persistence

Technical Implementation

Technologies Used

  • HTML5 with semantic markup and accessibility features
  • CSS3 with custom properties, CSS Grid, and Flexbox
  • Vanilla JavaScript (ES6+ modules)
  • localStorage API for persistent client-side storage
  • Regular expressions for validation and advanced search
  • Service Workers for offline functionality
  • Google Fonts for typography

Architecture

The application follows a modular architecture with clear separation of concerns:

  • storage.js: Handles all localStorage operations and data persistence
  • validators.js: Comprehensive regex-based validation for all input fields
  • state.js: State management including sorting and currency formatting
  • ui.js: UI rendering utilities and status notifications
  • dashboard.js: Dashboard statistics and budget tracking display
  • form.js: Transaction form handling (add/edit)
  • main.js: Transaction list and general page routing
  • settings.js: Settings management including budget and currency configuration
  • theme.js: Dark mode toggle functionality

Validation Rules

The application implements comprehensive regex-based validation:

  • Description: 3-100 characters, alphanumeric with basic punctuation (no duplicate consecutive words)
  • Amount: Decimal format, 1-4 digits with up to 2 decimal places (0.01 to 9999.99)
  • Date: ISO format (YYYY-MM-DD), cannot be in the future
  • Category: Predefined list (Food, Transport, Entertainment, Education, Shopping, Bills, Health, Other)

Accessibility Features

This application is built with accessibility as a priority:

  • WCAG 2.1 Level AA compliant design and functionality
  • Full keyboard navigation support (Tab, Shift+Tab, Enter, Escape)
  • ARIA labels, live regions, and semantic HTML landmarks
  • Semantic HTML structure for screen readers
  • High contrast color scheme (4.5:1 minimum ratio)
  • Skip navigation links for keyboard users
  • Responsive design that works on all device sizes
  • Focus management and visible focus indicators

Project Structure

student-finance-tracker/
├── index.html              # Dashboard
├── transactions.html       # Transaction list & search
├── add.html               # Add/Edit transaction form
├── settings.html          # Budget & currency settings
├── about.html             # This page
├── styles/
│   └── main.css           # All responsive styles
├── scripts/
│   ├── storage.js         # localStorage operations
│   ├── validators.js      # Regex validation
│   ├── state.js           # State management
│   ├── ui.js              # UI rendering
│   ├── dashboard.js       # Dashboard logic
│   ├── form.js            # Add/Edit form
│   ├── main.js            # Transactions & routing
│   ├── settings.js        # Settings logic
│   ├── theme.js           # Dark mode
│   ├── sw.js              # Service Worker
│   └── sw-register.js     # SW registration
├── seed.json              # Sample data
└── README.md              # Documentation

Data Persistence

All data is stored in the browser's localStorage with JSON serialization. This means:

  • Data persists across browser sessions
  • No server or database required
  • Complete user privacy—data never leaves your device
  • Typical storage limit of 5-10MB per domain
  • Users can export data as JSON backup files

Browser Compatibility

This application requires a modern browser that supports:

  • ES6+ JavaScript (arrow functions, template literals, modules)
  • CSS Custom Properties and CSS Grid/Flexbox
  • localStorage API
  • Fetch API

Tested on: Chrome 90+, Firefox 88+, Safari 14+, Edge 90+

Educational Purpose

This project demonstrates proficiency in:

  • Semantic HTML5 structure and accessibility
  • Responsive CSS design and modern layout techniques
  • JavaScript ES6+ modules and functional programming
  • Regular expressions for validation and pattern matching
  • Client-side data persistence with localStorage
  • Event-driven programming and DOM manipulation
  • User experience design and accessibility best practices
  • Progressive enhancement and offline-first principles

Contact & Resources

For questions, feedback, or contributions: