Skip to content

mikeleppane/finance-tracker

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

6 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Leptos Logo

πŸ’° Finance Tracker - Built with Leptos & Rust

A modern, full-stack personal finance tracking application built with Leptos, Rust, and Azure Cosmos DB. This project demonstrates clean architecture, server-side rendering, and type-safe full-stack development.

πŸ“ Blog Series: This repository accompanies the "Track Your Finances with Leptos & Rust" blog series published on Medium. Follow along as we build a complete finance application from scratch!

✨ Features

  • πŸ” JWT Authentication with refresh token support
  • πŸ“Š Dashboard with financial overview and insights
  • πŸ’³ Transaction Management - add, edit, categorize expenses/income
  • 🎯 Budget Planning with tracking and alerts
  • πŸ“ˆ Financial Reports and analytics
  • 🎨 Responsive Design with TailwindCSS
  • ⚑ Server-Side Rendering for optimal performance
  • πŸ›‘οΈ Type Safety across the entire stack
  • ☁️ Azure Cosmos DB integration
  • πŸ§ͺ End-to-End Testing with Playwright

πŸ—οΈ Architecture

This project follows Clean Architecture principles with clear separation of concerns:

src/
β”œβ”€β”€ πŸ›οΈ domain/          # Business logic & entities
β”œβ”€β”€ πŸ”§ application/     # Use cases & services  
β”œβ”€β”€ 🌐 infrastructure/  # External integrations
β”œβ”€β”€ 🎨 components/      # UI components
└── πŸ“„ presentation/    # Pages & routing

πŸš€ Quick Start

Prerequisites

  • Rust (nightly toolchain)
  • Node.js (for TailwindCSS)
  • Azure Cosmos DB account (or Azure Cosmos DB Emulator)

Installation

  1. Install cargo-leptos:

    cargo install cargo-leptos --locked
  2. Clone the repository:

    git clone https://github.com/your-username/finance-tracker
    cd finance-tracker
  3. Install dependencies:

    # Rust dependencies are automatically installed
    npm install  # For TailwindCSS processing
  4. Set up environment variables:

    cp .env.example .env

    Configure your .env file:

    # Azure Cosmos DB Configuration
    COSMOS_DB_URI=https://your-account.documents.azure.com:443/
    COSMOS_DB_KEY=your-primary-key
    COSMOS_DB_DATABASE=finance-tracker
    
    # Authentication
    JWT_SECRET=your-super-secret-jwt-key-at-least-32-characters
    
    # Server Configuration  
    SERVER_HOST=0.0.0.0
    SERVER_PORT=3000
  5. Run the development server:

    cargo leptos watch

    Visit http://localhost:3000 to see your application!

πŸ› οΈ Development

Building for Production

cargo leptos build --release

This generates:

  • Server binary: target/server/release/finance-tracker
  • Static assets: target/site/

Running Tests

# Unit tests
cargo test

# End-to-end tests  
cargo leptos end-to-end

# Run E2E tests in release mode
cargo leptos end-to-end --release

Development Tools

  • Hot reloading: Changes are automatically reflected
  • TailwindCSS: Styles are compiled on-the-fly
  • Type checking: Full-stack type safety with Rust

🌐 Deployment

Azure Static Web Apps (Recommended)

This application is optimized for deployment on Azure Static Web Apps with Azure Functions backend.

  1. Build the application:

    cargo leptos build --release
  2. Deploy to Azure:

    • Follow the Azure Static Web Apps deployment guide
    • Configure environment variables in the Azure portal
    • The build artifacts are in target/site/ and target/server/release/

Manual Deployment

For manual deployment to any server:

  1. Copy the built files to your server:

    your-server/
    β”œβ”€β”€ finance-tracker          # Server binary
    └── site/                     # Static assets
        β”œβ”€β”€ pkg/
        β”œβ”€β”€ favicon.ico
        └── output.css
    
  2. Set environment variables and run the binary.

πŸ§ͺ Testing

End-to-End Tests

E2E tests are located in end2end/tests/ and use Playwright:

# Install E2E dependencies
cd end2end && npm install

# Run E2E tests
cargo leptos end-to-end

Test Coverage

  • βœ… Authentication flows
  • βœ… Transaction management
  • βœ… Dashboard functionality
  • βœ… API endpoints
  • βœ… Database operations

πŸ“– Blog Series

This project is part of a comprehensive blog series on Medium:

  1. Part 1: Introduction and Project Setup
  2. Part 2: Domain Modeling & Data Layer
  3. Part 3: Handling Environment Variables, Application State & Token-Based Authentication

πŸ“š Read the full series on Medium β†’

πŸ›‘οΈ Security

  • JWT Authentication with secure token management
  • Password hashing using bcrypt
  • Input validation on all endpoints
  • CORS configuration for production
  • Environment-based configuration management

🀝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

  1. Fork the repository
  2. Create a feature branch: git checkout -b feature/amazing-feature
  3. Commit your changes: git commit -m 'Add amazing feature'
  4. Push to the branch: git push origin feature/amazing-feature
  5. Open a Pull Request

πŸ“ License

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

πŸ™ Acknowledgments

  • Leptos - The reactive web framework for Rust
  • Axum - Ergonomic web framework built with Tokio and Tower
  • TailwindCSS - Utility-first CSS framework
  • Azure Cosmos DB - Globally distributed database service

πŸ“ž Support


Made with ❀️ and πŸ¦€ Rust

About

A comprehensive finance tracker built with Rust and Leptos

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages