> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/Antony-Figueroa/my-evershop-app/llms.txt
> Use this file to discover all available pages before exploring further.
# System Architecture Overview
> Understanding EverShop modular architecture, request flow, and core concepts
## Introduction
EverShop is built on a modular, extension-based architecture that separates business logic from presentation. This design allows you to extend functionality without modifying core files, ensuring upgradability and maintainability.
## Core Technology Stack
* **Runtime**: Node.js
* **Framework**: Express.js
* **Database**: PostgreSQL
* **API**: REST + GraphQL
* **Library**: React 19
* **Styling**: Tailwind CSS
* **Rendering**: SSR (Server-Side Rendering)
* **Build**: Webpack + Parcel
## Architectural Principles
### 1. Modular Extension System
EverShop uses a **plugin architecture** where all custom functionality is encapsulated in extensions:
```json theme={null}
// config/default.json
{
"system": {
"extensions": [
{
"name": "productCatalog",
"resolve": "extensions/productCatalog",
"enabled": true
},
{
"name": "offlinePayments",
"resolve": "extensions/offlinePayments",
"enabled": true
}
]
}
}
```
Extensions are **isolated modules** that can provide APIs, GraphQL types, page components, event subscribers, and scheduled jobs.
### 2. Theme System
Themes handle **visual presentation only** and are separate from business logic:
```json theme={null}
// config/default.json
{
"system": {
"theme": "anasuplements"
},
"shop": {
"language": "es",
"currency": "USD"
}
}
```
Never put business logic in themes. Use extensions for APIs, database operations, and business rules.
### 3. Component-Based Pages
Pages are assembled from **React components** using an area-based layout system:
```tsx theme={null}
// Example: themes/anasuplements/src/pages/all/Header.tsx
export default function Header({ storeName = "Ana's Suplements", categories = [] }) {
return (
);
}
export const layout = {
areaId: 'header',
sortOrder: 1
};
```
The `layout` export determines **where** (`areaId`) and **when** (`sortOrder`) the component renders.
## Request Flow
Client sends request to Express server
EverShop routes the request based on `route.json` files in extensions
Request passes through middleware functions (named with `[middleware]` prefix)
Extension handles the request (API endpoint, page component, etc.)
* **API**: Returns JSON response
* **Page**: Renders React components server-side with GraphQL data
### API Request Example
```typescript theme={null}
// extensions/sample/src/api/createFoo/route.json
{
"methods": ["POST"],
"path": "/foos",
"access": "private"
}
// extensions/sample/src/api/createFoo/[bodyParser]createFoo.ts
import { EvershopRequest, EvershopResponse } from '@evershop/evershop';
export default (request: EvershopRequest, response: EvershopResponse, next) => {
const { name, description } = request.body;
if (!name || !description) {
return response
.status(400)
.json({ error: 'Name and description are required' });
}
const newFoo = { id: Date.now(), name, description };
response.status(201).json({
success: true,
data: { foo: newFoo }
});
};
```
Middleware functions are executed in **alphabetical order** based on their `[middleware]` prefix.
### Page Request Example
```tsx theme={null}
// extensions/sample/src/pages/frontStore/homepage/FooList.tsx
export default function FooList({ foos }: FooListProps) {
return (
{foos?.map((foo) => (
{foo.name}
{foo.description}
))}