Skip to main content

​
Introduction

PC Fix is a modern full-stack e-commerce platform built for selling PC hardware and components. The architecture follows a monorepo structure using NPM Workspaces, enabling efficient code sharing and unified development workflows.
This is a production-ready SaaS application deployed on Vercel (frontend) and Railway (backend + database).

​
High-Level Architecture

The system consists of three main layers:

Frontend

Astro 5 with React islands for optimal performance

Backend API

Express 5 REST API with modular architecture

Database

PostgreSQL with Prisma ORM

​
System Architecture Diagram

​
Technology Stack

​
Frontend Stack

  • Astro 5.16.3 - Meta-framework for SSR and static generation
  • React 18.3 - UI library for interactive islands
  • Tailwind CSS 3.4 - Utility-first CSS framework
  • TypeScript 5.9 - Type safety across the codebase
  • Zustand 5.0 - Lightweight state management
  • React Hook Form 7.67 - Performant form handling
  • Zod 3.25 - Schema validation
  • Lucide React - Icon library
  • Swiper 11.1 - Touch-enabled carousels
  • Recharts 3.5 - Data visualization
  • Sonner 2.0 - Toast notifications

​
Backend Stack

  • Express 5.2.1 - Web application framework
  • Prisma 6.18 - Next-generation ORM
  • PostgreSQL - Relational database
  • TypeScript 5.9 - Type-safe backend code
  • JWT (jsonwebtoken 9.0.2) - Stateless authentication
  • Bcrypt 3.0.3 - Password hashing
  • Helmet 8.1 - HTTP header security
  • CORS 2.8 - Cross-origin resource sharing
  • Express Rate Limit 8.2 - Rate limiting protection
  • Cloudinary 2.8 - Image CDN
  • MercadoPago 2.11 - Payment gateway
  • Google Auth Library 10.5 - OAuth integration
  • Resend 6.6 - Transactional email
  • Node-cron 4.2 - Background job scheduler

​
Key Features

1

Extreme Performance

95+ Lighthouse score thanks to Astro’s partial hydration and View Transitions
2

Real Inventory Management

Automated stock alerts, product tracking, and soft delete functionality
3

Hybrid Payment Gateway

Native MercadoPago integration, cryptocurrency (USDT), and offline payments
4

Comprehensive Admin Dashboard

Full CRUD operations, analytics, charts, and support ticket management
5

Authentication & Authorization

JWT-based auth with Google OAuth, role-based access control (USER/ADMIN)

​
Deployment Architecture

Frontend Deployment

  • Platform: Vercel
  • Features: Edge functions, preview deployments
  • CDN: Global edge network
  • Analytics: Built-in web analytics

Backend Deployment

  • Platform: Railway
  • Services: API + PostgreSQL database
  • Monitoring: Sentry error tracking
  • Scaling: Automatic container scaling

​
Development Workflow

The monorepo structure allows for:
  • Shared TypeScript types between frontend and backend
  • Unified dependency management with NPM Workspaces
  • Consistent testing setup with Vitest across packages
  • Docker Compose for local development environment

​
Development Ports

​
Testing Strategy

Unit Testing

Vitest 4.0 for fast unit and integration tests
  • Component testing with @testing-library/react
  • Store testing with vitest-mock-extended
  • Backend service testing

E2E Testing

Playwright 1.57 for end-to-end testing
  • Critical user flows (checkout, login)
  • Visual regression testing
  • Cross-browser compatibility

​
Monitoring & Observability

1

Error Tracking

Sentry integration on both frontend and backend for real-time error monitoring
2

Request Logging

Morgan middleware for HTTP request logging in development
3

Database Monitoring

Health check endpoint at /health for database connectivity verification
4

Performance Metrics

Vercel Web Analytics for frontend performance tracking

​
Next Steps

Monorepo Structure

Explore the NPM Workspace setup

Frontend Architecture

Learn about Astro and React integration

Backend Architecture

Dive into the Express API structure

Database Schema

Understand the data model