Billora

A modern invoicing platform built with Angular and FastAPI, designed for freelancers and small businesses to manage clients, generate invoices, and track revenue with a clean, responsive UI.

---

Overview

Billora is a full-stack SaaS-style invoicing system where the frontend drives the product experience:

• Dashboard-first UI for revenue tracking
• Mobile-friendly interface
• Real-time interaction with a FastAPI backend
• Seamless invoice creation and PDF export

---

Core Features

Frontend Experience

• Responsive Angular
• Authentication flows (login / signup / logout)
• Protected routes with guards
• Dashboard with revenue overview
• Client management interface
• Invoice builder (dynamic line items UI)
• Invoice status tracking (paid / unpaid)
• PDF invoice download UI trigger
• Clean form validation & UX feedback states

---

Backend Capabilities

• JWT authentication
• Multi-user data isolation
• Invoice & client CRUD APIs
• PDF generation (ReportLab)
• Revenue analytics endpoints
• PostgreSQL-ready schema

---

Tech Stack

Frontend (Primary)

• Angular
• RxJS (state + async handling)
• Angular Router (navigation + guards)
• HTTP Client (API communication)

Backend

• FastAPI
• SQLAlchemy
• PostgreSQL
• JWT Auth

---

Frontend Architecture

Pages (UI Screens)
    ↓
Components (Reusable UI blocks)
    ↓
Services (API communication layer)
    ↓
State Management (Angular Signals)
    ↓
FastAPI Backend

---

Frontend Structure

src/app/
├── core/
│   ├── guards/
│   ├── interceptors/
│   ├── services/
│   └── auth/
├── features/
│   ├── dashboard/
│   ├── invoices/
│   ├── clients/
│   ├── analytics/
├── shared/
│   ├── components/
│   ├── pipes/
│   └── utils/
├── app-routing.module.ts
├── app.module.ts

---

UI Modules

Dashboard

• Total revenue cards
• Invoice status summary
• Recent activity feed
• Quick actions (Create invoice, Add client)

Invoices

• Invoice list with filters
• Create/edit invoice form (dynamic line items)
• Status toggles (paid/unpaid)
• Download PDF button(Disabled)

Clients

• Client directory
• Add/edit client modal
• Client invoice history

Analytics

• Revenue charts
• Invoice performance metrics
• Client revenue breakdown

---

Frontend Data Flow

User Action (UI)
      ↓
Angular Service (HTTP request)
      ↓
FastAPI Endpoint
      ↓
Database
      ↓
Response → UI update (RxJS stream)

---

Screenshots

• Login screen

• Dashboard overview

• Invoice builder UI

• Client management screen

---

Why This Project Exists

Billora was built to explore:

• Frontend architecture in Angular
• Building real SaaS UI systems
• Designing scalable component systems
• Connecting frontend workflows to a real backend API
• Turning backend logic into usable product UX

---

Author

Built by vicciDev