Portfolio Monorepo

Modern full-stack portfolio application built with a Next.js frontend and an Express + Prisma backend connected to PostgreSQL.

Originally developed as a Vue.js frontend portfolio, the project was later rebuilt and expanded using Next.js and a full backend architecture to deepen frontend engineering skills and gain hands-on experience with modern full-stack development patterns.

The project combines a personal portfolio experience with backend-driven functionality, including secure ephemeral messaging, REST APIs, and database persistence — designed to demonstrate practical frontend and full-stack engineering capability using a modern JavaScript/TypeScript ecosystem.

Overview

This project was built to demonstrate:

Frontend development using modern JavaScript frameworks Migration and adaptation across frontend ecosystems (Vue.js → Next.js) Backend API development with Express Database integration using Prisma ORM and PostgreSQL Full-stack TypeScript development REST API communication between frontend and backend services Secure ephemeral messaging workflows Production-style monorepo architecture Evolution of the Project Phase 1 — Vue.js Portfolio

The original version of the portfolio was built using Vue.js to strengthen frontend fundamentals including:

Component-based architecture Responsive UI development Routing and state management concepts Dynamic project rendering Phase 2 — Migration to Next.js

The portfolio was later redesigned and rebuilt using Next.js and React-based architecture in order to:

Expand frontend framework experience Improve routing and rendering performance Work with a more production-oriented React ecosystem Integrate backend APIs and full-stack workflows more naturally

This migration reflects a continuous learning approach and adaptability across frontend technologies — particularly relevant in collaborative environments using different JavaScript frameworks.

Architecture Next.js Frontend ↓ REST API Layer (Express.js) ↓ Prisma ORM ↓ PostgreSQL Database

Tech Stack

Layer Technology

Frontend Next.js, React, TypeScript

Previous Frontend Vue.js

Backend Node.js, Express.js

Database PostgreSQL

ORM Prisma

Styling CSS / Modern UI Components

Tooling npm, Git, Monorepo structure

Core Features Portfolio Frontend Responsive frontend portfolio experience Component-based UI architecture Dynamic project showcase sections Modern React/Next.js routing and rendering Secure Ephemeral Messaging Temporary message creation and retrieval workflow Backend-managed message lifecycle Database persistence with controlled expiration behavior REST API Integration Structured communication between frontend and backend Separation of frontend and server responsibilities Scalable full-stack architecture approach Database Persistence PostgreSQL integration through Prisma ORM Typed database models and queries Structured data management

Project Structure portfolio-monorepo/ ├── frontend/ # Next.js frontend application ├── backend/ # Express.js API server ├── prisma/ # Prisma schema and migrations ├── shared/ # Shared types/utilities └── package.json

Running Locally Install dependencies npm install Start frontend npm run dev Start backend npm run server Run database migrations npx prisma migrate dev What This Project Demonstrates Frontend development across Vue.js and React/Next.js ecosystems Full-stack TypeScript development REST API design with Express.js Prisma ORM and PostgreSQL integration Monorepo project organization Practical frontend/backend communication patterns Adaptability across frontend frameworks Continuous learning and iterative project evolution Future Improvements Authentication and user accounts Dockerized deployment CI/CD pipeline integration Message encryption enhancements Automated testing coverage Kubernetes deployment manifests