How saklinefarabee/erp-peer works
1. High-level shape
ERP-PEER is a two-tier full-stack ERP app: a React/Vite frontend for the operator UI and a Node/Express backend for all business data, analytics, and AI calls. The frontend and backend run separately in development on 5173 and 5000, respectively.
2. Frontend: single-page application shell
The client is organized as a SPA with client/src/App.jsx as the main composition point. The UI is built from a small set of shared layout components, notably Header.jsx and Sidebar.jsx, which frame the application and provide navigation across business modules.
3. Frontend: module-based pages
The main screens are separated into page-level views under client/src/pages: Dashboard, Products, Orders, Customers, and AIHelper. This indicates a domain-oriented UI, where each business function gets its own page and interacts with the backend through API requests.
4. Frontend technology boundary
The client uses React 18 with Vite for fast local development and bundling, Tailwind CSS for styling, and Axios for HTTP calls. In architecture terms, the frontend is presentation and interaction only; it does not appear to own business state beyond transient UI state.
5. Backend: Express API layer
The server entry point is server/index.js, which likely boots the Express app and mounts the route modules under /api/*. The backend is the only place where persistent business logic lives: CRUD, analytics aggregation, and AI request handling.
6. Backend domain modules
Route files are separated by business concern: dashboard.js, products.js, orders.js, customers.js, and AI-related routes under ai.js / aiRouter.js. This separation maps cleanly to the app’s functional areas and is the clearest boundary for an architecture diagram.
7. Data storage
Persistence is handled by SQLite, with database setup in server/db/database.js. The README notes that the database initializes automatically on first server start and ships with sample data, so the system is designed to be runnable immediately without external infrastructure.
8. Core data flow
The standard flow is: user interacts with a page in the React client, the page issues an API request to the Express server, the server reads/writes SQLite, and JSON results are returned to update the UI. The dashboard is an aggregation endpoint rather than a separate storage model, pulling metrics from the same underlying business tables.
9. AI helper flow
The AI Helper is a separate backend integration that requires GEMINI_API_KEY. The frontend sends prompts to the AI API, the server forwards them to Google Gemini, and the response is returned to the UI. This is an external-service boundary distinct from the ERP database flow.
10. Operational/configuration boundaries
Runtime configuration is environment-driven, with PORT, NODE_ENV, and GEMINI_API_KEY in server/.env. The root project supports combined install/start workflows, while frontend and backend can also be developed independently. This makes the repo deployable as two units: a static frontend build and a Node backend API.
11. What matters for an architecture diagram
The important nodes are: browser/client SPA, Express API server, SQLite database, and Gemini API. The important arrows are: UI requests to REST endpoints, API reads/writes to SQLite, dashboard aggregation from the same DB, and AI requests from the server to Gemini.
Main entry points: index.js API server · App.jsx App shell · database.js SQLite · Dashboard.jsx Dashboard
Components 17
Client
React/Vite SPA for operator workflows.
- Browser · Operator-facing single-page application runtime.
- App shell · Main client composition point for navigation and page routing.
client/src/App.jsx - Header · Top-level application framing and status area.
client/src/components/Header.jsx - Sidebar · Primary navigation across ERP modules.
client/src/components/Sidebar.jsx - Dashboard · Aggregated operational overview screen.
client/src/pages/Dashboard.jsx - Products · Product catalog management screen.
client/src/pages/Products.jsx - Orders · Order management screen.
client/src/pages/Orders.jsx - Customers · Customer management screen.
client/src/pages/Customers.jsx - AI Helper · Prompt-based assistant interface.
client/src/pages/AIHelper.jsx
Server
Express API, business logic, and persistence.
- API server · Backend entry point for ERP data and AI requests.
server/index.js - Dashboard API · Metrics and summary endpoints.
server/routes/dashboard.js - Products API · Product CRUD endpoints.
server/routes/products.js - Orders API · Order workflow endpoints.
server/routes/orders.js - Customers API · Customer CRUD endpoints.
server/routes/customers.js - AI API · Backend AI prompt handling and Gemini forwarding.
server/routes/ai.js - SQLite · Local ERP data store initialized on server start.
server/db/database.js
External
Outside services used by the backend.
- Gemini API · Google Gemini integration for AI helper responses.
Connections 24
- Browser → App shell: loads · The browser opens the React SPA.
- App shell → Header: composes · App shell renders the shared header.
- App shell → Sidebar: composes · App shell renders the shared navigation.
- App shell → Dashboard: shows · App shell routes to the dashboard view.
- App shell → Products: shows · App shell routes to the products view.
- App shell → Orders: shows · App shell routes to the orders view.
- App shell → Customers: shows · App shell routes to the customers view.
- App shell → AI Helper: shows · App shell routes to the AI helper view.
- Dashboard → API server: requests · Dashboard fetches aggregated metrics from the backend.
- Products → API server: requests · Product screen reads and writes via REST APIs.
- Orders → API server: requests · Order screen reads and writes via REST APIs.
- Customers → API server: requests · Customer screen reads and writes via REST APIs.
- AI Helper → API server: prompts · AI helper sends user prompts to the backend.
- API server → Dashboard API: mounts · Server exposes dashboard endpoints.
- API server → Products API: mounts · Server exposes product endpoints.
- API server → Orders API: mounts · Server exposes order endpoints.
- API server → Customers API: mounts · Server exposes customer endpoints.
- API server → AI API: mounts · Server exposes AI endpoints.
- Dashboard API → SQLite: reads · Dashboard aggregates data from SQLite.
- Products API → SQLite: reads/writes · Product APIs persist catalog data in SQLite.
- Orders API → SQLite: reads/writes · Order APIs persist workflow data in SQLite.
- Customers API → SQLite: reads/writes · Customer APIs persist CRM data in SQLite.
- AI API → Gemini API: calls · Backend forwards prompts to Gemini.
- API server → SQLite: uses · Server shares the local database connection.