How skycinema-dmani/skycirrus works
Purpose and Top-Level Shape
This is a pnpm workspace with a TypeScript React/Vite client and a Node.js API server. It appears to support a branded product/services/projects website plus a protected admin area for managing business content and appointments. Primary runtime entry points are client/src/main.tsx and server/src/index.ts.
Client Application Shell
The browser application is bootstrapped by client/src/main.tsx, with client/src/App.tsx acting as the application composition/routing root. Shared site chrome is centralized in client/src/components/layout/Layout.tsx, client/src/components/layout/Header.tsx, and client/src/components/layout/Footer.tsx; public pages should pass through this boundary rather than independently recreating navigation or footer behavior.
Public Content Pages
Page-level feature boundaries are in client/src/pages/, including catalog, detail, and informational views: ProductsPage.tsx, ProductDetailPage.tsx, ProjectsPage.tsx, ProjectDetailPage.tsx, ServicesPage.tsx, and ServiceDetailPage.tsx. The home experience is assembled from independently reusable sections under client/src/components/home/, notably HeroSection.tsx, FeaturedProductsSection.tsx, and ProjectsSection.tsx. This separates route orchestration from homepage content blocks.
Client Data and Domain Boundary
Client-side API access is intended to flow through client/src/lib/api.ts; shared domain contracts live in client/src/types/index.ts. client/src/lib/mockData.ts suggests the UI can be populated without the backend, while client/src/lib/constants.ts centralizes static application values. Components and pages should consume typed data through this layer rather than binding directly to server response shapes.
Admin Surface and Authentication
Administrative routes are isolated under client/src/pages/admin/, with entry/login and operational areas in AdminLogin.tsx, AdminDashboard.tsx, AdminProducts.tsx, AdminProjects.tsx, and AdminAppointments.tsx. This represents a distinct control plane from public browsing and depends on the server authentication boundary in server/src/routes/auth.ts and server/src/middleware/auth.ts.
API Server and Content Resources
The Express-style server starts from server/src/index.ts. Route modules expose major resource boundaries: authentication in server/src/routes/auth.ts, product/catalog operations in server/src/routes/products.ts, category operations in server/src/routes/categories.ts, and additional business resources through server/src/routes/extended.ts. Route handlers should use shared output and transformation conventions from server/src/utils/response.ts and server/src/utils/mappers.ts.
Persistence, Environment, and Request Middleware
Database setup is encapsulated in server/src/config/db.ts; environment loading/validation belongs in server/src/config/env.ts, with expected deployment variables documented by server/.env.example. Cross-cutting server controls are middleware: authorization in server/src/middleware/auth.ts, centralized failures in server/src/middleware/errorHandler.ts, and asset/form upload handling in server/src/middleware/upload.ts. The database initialization path is server/scripts/setup-db.js.
Runtime and Delivery Boundaries
The client is a Vite-built React application configured by client/vite.config.ts, styled through Tailwind/PostCSS configuration and client/src/index.css. The server is an independently packaged Node TypeScript service (server/package.json), and workspace orchestration is defined by pnpm-workspace.yaml. External infrastructure is implied primarily by the configured database and environment-driven service settings; no specific hosted provider is identifiable from the supplied tree.
Main entry points: index.ts Server entry · App.tsx App and routing · api.ts Client API boundary · products.ts Catalog routes
Components 19
React Client
Vite browser application.
- Client bootstrap
client/src/main.tsx - App and routing
client/src/App.tsx - Shared site layout · Owns shared header and footer chrome.
client/src/components/layout/Layout.tsx - Public catalog pages · Products, projects, and services listing/detail views.
- Home sections · Hero, featured products, and projects sections.
client/src/components/home/HeroSection.tsx - Client API boundary
client/src/lib/api.ts - Domain contracts
client/src/types/index.ts - Mock data · Supports UI population without the API.
client/src/lib/mockData.ts
Admin Control Plane
Protected content and appointment management.
- Admin routes · Login, dashboard, products, projects, and appointments.
client/src/pages/admin/AdminDashboard.tsx
Node API Server
Express-style API service.
- Server entry
server/src/index.ts - Authentication routes
server/src/routes/auth.ts - Catalog routes · Product and category resource endpoints.
server/src/routes/products.ts - Business resource routes · Additional business resources such as projects and appointments.
server/src/routes/extended.ts - Authorization middleware
server/src/middleware/auth.ts - Request safeguards · Central error handling and upload processing.
server/src/middleware/errorHandler.ts - Response mapping · Shared response and domain transformation conventions.
server/src/utils/response.ts - Environment configuration
server/src/config/env.ts - Database · Connection setup and initialized schema.
server/src/config/db.ts
Other components
- pnpm workspace · Coordinates client and server packages.
pnpm-workspace.yaml
Connections 27
- pnpm workspace → Client bootstrap: runs
- pnpm workspace → Server entry: runs
- Client bootstrap → App and routing: mounts
- App and routing → Shared site layout: wraps public routes
- App and routing → Public catalog pages: routes to
- App and routing → Home sections: composes home
- App and routing → Admin routes: routes to
- Public catalog pages → Client API boundary: loads data through
- Home sections → Client API boundary: loads data through
- Public catalog pages → Mock data: can use
- Client API boundary → Domain contracts: uses
- Admin routes → Client API boundary: authenticates and manages via
- Client API boundary → Server entry: HTTP requests
- Server entry → Authentication routes: registers
- Server entry → Catalog routes: registers
- Server entry → Business resource routes: registers
- Server entry → Request safeguards: applies
- Authentication routes → Authorization middleware: establishes access control
- Catalog routes → Authorization middleware: protects writes
- Business resource routes → Authorization middleware: protects admin operations
- Authentication routes → Response mapping: formats responses
- Catalog routes → Response mapping: maps responses
- Business resource routes → Response mapping: maps responses
- Catalog routes → Database: reads and writes
- Business resource routes → Database: reads and writes
- Server entry → Environment configuration: loads
- Environment configuration → Database: supplies connection settings