Skip to content

Latest commit

 

History

History
72 lines (57 loc) · 1.65 KB

File metadata and controls

72 lines (57 loc) · 1.65 KB

CatalogX

A modern, high-performance product catalog application with a glassmorphism blue theme. Built with React, Node.js, PostgreSQL, and Redis.

Project Structure

  • frontend/: React + Vite + TypeScript application.
  • backend/: Node.js + Express + TypeScript API.
  • docker-compose.yml: Root orchestration for all services.

Architecture

System Components

graph TD
    User([User])
    Frontend[Frontend - React/Vite]
    API[Backend API - Node.js/Express]
    PostgreSQL[(PostgreSQL)]
    Redis[(Redis Cache)]
    pgAdmin[pgAdmin GUI]

    User --> Frontend
    User --> pgAdmin
    Frontend --> API
    API --> PostgreSQL
    API --> Redis
    pgAdmin -.-> PostgreSQL
Loading

Data Flow (Caching Pattern)

sequenceDiagram
    participant User
    participant Frontend
    participant API
    participant Redis
    participant PostgreSQL

    User->>Frontend: List Products
    Frontend->>API: GET /products
    API->>Redis: Check Cache
    alt Cache Hit
        Redis-->>API: Return products
    else Cache Miss
        API->>PostgreSQL: Query products
        PostgreSQL-->>API: Data
        API->>Redis: Update Cache
    end
    API-->>Frontend: Products JSON
    Frontend-->>User: Display List
Loading

Quick Start (Docker)

To run the entire stack:

docker-compose up --build

Manual Setup

1. Backend

See backend/README.md for detailed instructions.

2. Frontend

See frontend/README.md for detailed instructions.