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!
- π 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
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
- Rust (nightly toolchain)
- Node.js (for TailwindCSS)
- Azure Cosmos DB account (or Azure Cosmos DB Emulator)
-
Install cargo-leptos:
cargo install cargo-leptos --locked
-
Clone the repository:
git clone https://github.com/your-username/finance-tracker cd finance-tracker -
Install dependencies:
# Rust dependencies are automatically installed npm install # For TailwindCSS processing
-
Set up environment variables:
cp .env.example .env
Configure your
.envfile:# 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
-
Run the development server:
cargo leptos watch
Visit http://localhost:3000 to see your application!
cargo leptos build --releaseThis generates:
- Server binary:
target/server/release/finance-tracker - Static assets:
target/site/
# 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- Hot reloading: Changes are automatically reflected
- TailwindCSS: Styles are compiled on-the-fly
- Type checking: Full-stack type safety with Rust
This application is optimized for deployment on Azure Static Web Apps with Azure Functions backend.
-
Build the application:
cargo leptos build --release
-
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/andtarget/server/release/
For manual deployment to any server:
-
Copy the built files to your server:
your-server/ βββ finance-tracker # Server binary βββ site/ # Static assets βββ pkg/ βββ favicon.ico βββ output.css -
Set environment variables and run the binary.
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- β Authentication flows
- β Transaction management
- β Dashboard functionality
- β API endpoints
- β Database operations
This project is part of a comprehensive blog series on Medium:
- Part 1: Introduction and Project Setup
- Part 2: Domain Modeling & Data Layer
- Part 3: Handling Environment Variables, Application State & Token-Based Authentication
π Read the full series on Medium β
- JWT Authentication with secure token management
- Password hashing using bcrypt
- Input validation on all endpoints
- CORS configuration for production
- Environment-based configuration management
We welcome contributions! Please see our Contributing Guide for details.
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Commit your changes:
git commit -m 'Add amazing feature' - Push to the branch:
git push origin feature/amazing-feature - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- 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
- π Found a bug? Open an issue
- π¬ Have questions? Start a discussion
- π Documentation: Check out the blog series for detailed guides