Financial Dashboard

Panoramica

Started from a Next.js learning project and extended it into a full-stack application by building a custom Spring Boot REST API backend. The frontend uses React and TypeScript with Tailwind CSS. The backend uses Spring Boot 3 with Spring Data JPA, Hibernate, and PostgreSQL (via Supabase). Backend deployed on Azure App Service.

Il Problema

The original Next.js course project communicated directly with a database from the frontend. The goal was to replace that with a proper API layer — a Spring Boot backend — to practice real-world full-stack architecture where the frontend and backend are separated services.

Il mio ruolo

Built the entire Spring Boot backend independently. Refactored the Next.js frontend to consume the new API instead of direct database access. Handled API design, data modelling, JPA entity mapping, and Azure deployment.

Architettura

1. 1Next.js + React frontend (TypeScript, Tailwind CSS)
2. 2REST API layer — JSON over HTTP
3. 3Spring Boot 3 backend (Java 17, Maven)
4. 4Spring Data JPA + Hibernate ORM layer
5. 5PostgreSQL database (Supabase)
6. 6Azure App Service deployment

Decisioni tecniche

• Used Spring Boot for the backend to practice the full Spring ecosystem — dependency injection, JPA integration, REST controller patterns, and exception handling.
• Chose PostgreSQL on Supabase for development convenience while keeping a standard relational database.
• Deployed the backend on Azure App Service to gain experience with cloud deployment outside of Vercel.
• Used DTOs to separate the API contract from internal JPA entity structure.

Stack tecnologico