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?
Component-Based Architecture
Component-Based Architecture
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.
Rich Ecosystem
Rich Ecosystem
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).
Performance
Performance
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
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
- React Query
- React Hook Form
- Zod
@tanstack/react-query v5.83.0Handles server state with automatic caching, background updates, and optimistic updates: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?
Simplicity
Simplicity
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.
Middleware Ecosystem
Middleware Ecosystem
Massive ecosystem of middleware for every need - CORS, rate limiting, authentication, body parsing, logging, etc.
Performance
Performance
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
Database & ORM
PostgreSQL
Powerful, open-source relational database
Prisma ORM
v6.19.1 - Next-generation TypeScript ORM
Why Prisma?
- Type Safety
- Developer Experience
- Performance
Prisma generates TypeScript types from your schema:Generated types:
schema.prisma
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
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
Package Version Summary
Frontend Dependencies
Backend Dependencies
Dev Dependencies
Why This Stack?
Modern & Production-Ready
Every technology is actively maintained with large communities and regular updates.
Developer Experience
Vite’s instant HMR, TypeScript’s autocomplete, and Prisma Studio make development a joy.
Performance
Vite builds, React 18 concurrent features, and Prisma optimizations ensure fast user experiences.
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
