Skip to main content

Overview

The portfolio is built with a modern, production-ready technology stack that emphasizes developer experience, performance, and maintainability. Every technology choice is intentional and serves a specific purpose in the application architecture.

Frontend Technologies

Core Framework

React 18

v18.3.1 - Modern React with concurrent features and automatic batching

TypeScript

v5.8.3 - Full type safety throughout the application

Vite

v5.4.19 - Lightning-fast build tool with HMR and ES modules

React Router

v6.30.1 - Client-side routing with nested routes

Why React?

React’s component model allows for reusable, maintainable UI pieces. Each section of the portfolio (Hero, Projects, Contact) is an independent component that can be developed and tested in isolation.
React has a massive ecosystem with solutions for every need - from form handling (React Hook Form) to data fetching (React Query) to UI components (Radix UI/shadcn).
React 18’s concurrent features enable smooth user experiences even with complex UIs. The virtual DOM efficiently updates only what’s necessary.

Styling & UI

Tailwind CSS

v3.4.17 - Utility-first CSS framework for rapid UI development

shadcn/ui

Beautiful, accessible component library built on Radix UI

Radix UI

Unstyled, accessible primitives (Accordion, Toast, Tooltip)

Lucide React

v0.462.0 - Modern icon library with 1000+ icons

Tailwind CSS Benefits

// Traditional CSS
<div className="hero-section">
  <h1 className="hero-title">André Ruperto</h1>
</div>

// With Tailwind CSS
<div className="min-h-screen flex items-center justify-center">
  <h1 className="text-4xl font-bold text-gradient">André Ruperto</h1>
</div>
Tailwind eliminates context switching between HTML and CSS files. Styles are defined inline, making components self-contained and easy to understand.

State Management & Data Fetching

@tanstack/react-query v5.83.0Handles server state with automatic caching, background updates, and optimistic updates:
const { data: projects } = useQuery({
  queryKey: ['projects'],
  queryFn: fetchProjects
});
Benefits:
  • Automatic caching and invalidation
  • Background refetching
  • Loading and error states
  • Optimistic updates

Backend Technologies

Core Framework

Express.js

v4.18.2 - Minimal, flexible Node.js web framework

Node.js

v18+ - JavaScript runtime with ESM module support

JWT

jsonwebtoken v9.0.3 - Token-based authentication

Resend

v6.9.2 - Modern email API for transactional emails

Why Express?

Express is unopinionated and minimalist. It provides just enough structure without forcing architectural decisions. Perfect for a portfolio where full framework overhead isn’t needed.
Massive ecosystem of middleware for every need - CORS, rate limiting, authentication, body parsing, logging, etc.
Express is lightweight and fast. It doesn’t get in the way and allows direct control over request/response handling.

Express Code Example

server.js
import express from 'express';
import cors from 'cors';
import rateLimit from 'express-rate-limit';

const app = express();

// Middleware
app.use(cors());
app.use(express.json({ limit: '1mb' }));

// Rate limiting
const contactLimiter = rateLimit({
  windowMs: 60 * 60 * 1000, // 1 hour
  max: 5
});

// Routes
app.post('/api/contact', contactLimiter, async (req, res) => {
  // Handle contact form
});

Database & ORM

PostgreSQL

Powerful, open-source relational database

Prisma ORM

v6.19.1 - Next-generation TypeScript ORM

Why Prisma?

Prisma generates TypeScript types from your schema:
schema.prisma
model Project {
  id          Int      @id @default(autoincrement())
  title       String
  description String
  tags        String[]
  createdAt   DateTime @default(now())
}
Generated types:
const project: Project = await prisma.project.findUnique({
  where: { id: 1 }
});
// TypeScript knows all fields and their types!

Development Tools

Code Quality

ESLint

v9.32.0 - Linting for JavaScript/TypeScript

TypeScript ESLint

v8.38.0 - TypeScript-specific linting rules

Husky

v9.1.7 - Git hooks for pre-commit checks

lint-staged

v16.2.7 - Run linters on staged files only

Vitest

v4.0.18 - Fast unit testing framework

Testing Library

v16.3.2 - React component testing

Testing Example

ErrorBoundary.test.tsx
import { render, screen } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import { ErrorBoundary } from './ErrorBoundary';

describe('ErrorBoundary', () => {
  it('renders children when no error', () => {
    render(
      <ErrorBoundary>
        <div>Test content</div>
      </ErrorBoundary>
    );
    expect(screen.getByText('Test content')).toBeInTheDocument();
  });
});

Build & Deployment

Vite Build

Production builds with tree-shaking and minification

npm Scripts

Organized scripts for development, testing, and deployment

Concurrently

v9.2.1 - Run frontend and backend simultaneously

Cross-env

v7.0.3 - Cross-platform environment variables

Build Process

package.json
# Development
npm run deploy:local    # Runs frontend + backend concurrently

# Production
npm run build:prod      # Builds frontend into backend/dist
npm run backend:start   # Serves built files with Express

Package Version Summary

Frontend Dependencies

{
  "react": "^18.3.1",
  "react-dom": "^18.3.1",
  "react-router-dom": "^6.30.1",
  "@tanstack/react-query": "^5.83.0",
  "react-hook-form": "^7.61.1",
  "zod": "^3.25.76",
  "lucide-react": "^0.462.0",
  "tailwind-merge": "^2.6.0",
  "clsx": "^2.1.1"
}

Backend Dependencies

{
  "express": "^4.18.2",
  "@prisma/client": "^6.19.1",
  "prisma": "^6.19.1",
  "jsonwebtoken": "^9.0.3",
  "resend": "^6.9.2",
  "cors": "^2.8.5",
  "express-rate-limit": "^8.2.1",
  "dotenv": "^17.2.3"
}

Dev Dependencies

{
  "vite": "^5.4.19",
  "typescript": "^5.8.3",
  "@vitejs/plugin-react-swc": "^3.11.0",
  "tailwindcss": "^3.4.17",
  "vitest": "^4.0.18",
  "eslint": "^9.32.0",
  "husky": "^9.1.7",
  "lint-staged": "^16.2.7"
}

Why This Stack?

1

Modern & Production-Ready

Every technology is actively maintained with large communities and regular updates.
2

Type Safety

TypeScript + Prisma + Zod provide end-to-end type safety from database to UI.
3

Developer Experience

Vite’s instant HMR, TypeScript’s autocomplete, and Prisma Studio make development a joy.
4

Performance

Vite builds, React 18 concurrent features, and Prisma optimizations ensure fast user experiences.
5

Scalability

Modular architecture allows easy addition of features without major refactoring.
This tech stack balances modern best practices with practical considerations. It’s complex enough to be impressive but not over-engineered for a portfolio site.

Next Steps

Get Started

Install and run the portfolio locally

Explore Architecture

Understand how these technologies work together

Build docs developers (and LLMs) love