Webapp

Overview

The Webapp is the main application of BudgetBuddyDE, providing users with an intuitive and user-friendly interface to manage their finances. It is based on Next.js with TypeScript and uses the Auth-Service as well as the Backend to process and store data.

Features

Authentication

User registration and login
Password reset via email
Email verification after registration
OAuth2 login (Google, Github)

Budgeting

Create and manage budgets
Categorization of expenses
Visualization of expenses and income
Monthly reports and analytics (upcoming)

Architecture

Technologies

Framework: Next.js
UI Library: Material UI
Language: TypeScript

API Documentation

Method	Path	Description
GET	`/api/health`	Health Check Endpoint

Development

Start service locally

# Install dependencies
npm install
 
# Start in development mode
npm run dev

Linting & Formatting

# Check linter
npm run check
 
# Automatically fix linter errors
npm run check:write
 
# Format code
npm run format

Configuration

Environment Variables

Variable	Description	Default Value
`NEXT_PUBLIC_AUTH_SERVICE_HOST`	Host URL of the Auth-Service	-
`NEXT_PUBLIC_BACKEND_SERVICE_HOST`	Host URL of the Backend-Service	-
`TEMPO_URL`	Ingest URL for the Tempo tracing service	`http://tempo:4318`
`NEXT_OTEL_VERBOSE`	Enable verbose OpenTelemetry tracing	`undefined`

Logs & Traces

The environment variable TEMPO_URL is only required if the server is started with tracing functionality. Next.js traces more spans than are emitted by default. To see more spans, you must set NEXT_OTEL_VERBOSE=1.

For more information on setting up OpenTelemetry for Next.js, refer to the official documentation.

Deployment

The service is automatically deployed via a Railway CI/CD pipeline on every push to the main branch.

Railway

BudgetBuddyDE is designed to be easily deployable on Railway.

Dependencies

The Webapp uses the following internal packages:

and requires the following internal services:

Webapp

On this page