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

• Frontend: http://localhost
• Backend API: http://localhost:3000
• pgAdmin: http://localhost:5050 (Credentials: admin@catalogx.com / admin)

Manual Setup

1. Backend

See backend/README.md for detailed instructions.

2. Frontend

See frontend/README.md for detailed instructions.