Spring Boot • Java • REST API • PostgreSQL • Next.js • TypeScript • Full-Stack

Developer Portfolio – Full-Stack Project Platform

Portfolio Screenshot

Overview

This project is a production-style full-stack developer portfolio platform designed to showcase software projects through a structured API-driven architecture.

The system centers around a Spring Boot backend that exposes project data through a REST API and a Next.js frontend that dynamically renders project pages using modern React tooling.

The goal of the project is to demonstrate real-world backend architecture, API design, and integration with a modern frontend framework.

Rather than serving static content, project entries are stored in a PostgreSQL database and delivered through the backend API, allowing the site to function more like a small content management system for software projects.

Backend Architecture (Spring Boot)

The backend is built with Java and Spring Boot, focusing on clean API design and layered application structure.

It exposes endpoints that allow the frontend to retrieve project listings and detailed project pages.

Key Backend Features

RESTful API built with Spring Boot
PostgreSQL database for persistent project data
JPA / Hibernate for ORM and entity mapping
DTO-based API responses separating internal models from API output
Pagination support for project listings
Custom API response wrapper for consistent frontend consumption
Markdown-based project descriptions rendered by the frontend

Example API Endpoints

GET /api/projects
GET /api/projects/{slug}

Example response for project list:

{
  "items": [
    {
      "slug": "gtcraft",
      "title": "GTCraft – Minecraft-Style Sandbox Game",
      "tags": ["C++", "OpenGL", "Game Development"],
      "createdAt": "2026-03-02T01:45:04Z"
    }
  ],
  "pageNum": 0,
  "size": 20,
  "totalItems": 1,
  "totalPages": 1,
  "hasNext": false
}

This architecture allows the frontend to easily consume project data without being tightly coupled to database models.

Frontend (Next.js)

The frontend is built with Next.js and TypeScript, consuming the Spring API to render project pages dynamically.

Each project page loads its data through the backend API and renders the description using Markdown, allowing rich project documentation to be written directly in the database.

Frontend Features

Next.js App Router
TypeScript for strict type safety
Server Components for API data fetching
Markdown rendering using React Markdown
TailwindCSS for responsive styling
Dynamic project pages using URL slugs

Example project route:

/projects/gtcraft

The frontend retrieves project data via the API and renders the markdown description as a formatted page.

Technology Stack

Backend

Java
Spring Boot
Spring Data JPA
PostgreSQL
Hibernate
Flyway (database migrations)
Maven

Frontend

Next.js
React
TypeScript
TailwindCSS
React Markdown

Purpose of the Project

This project demonstrates how to build a production-style backend system and integrate it with a modern frontend framework.

Key skills highlighted include:

Designing clean REST APIs
Structuring Spring Boot backend services
Building database-driven applications
Integrating modern frontend frameworks with backend services
Rendering dynamic content through API-driven architectures

Future Improvements

Admin interface for managing projects
Authentication for editing project content
Image upload support
Project search and filtering
Deployment with containerized infrastructure

Developer Portfolio - Full-Stack Project Platform