42 lines
2.5 KiB
Markdown
42 lines
2.5 KiB
Markdown
|
# Architecture: Webapp Rental Peralatan Camping
|
||
|
|
|
||
|
|
## System Architecture
|
||
|
|
The system will follow a client-server architecture with a clear separation between the frontend and backend.
|
||
|
|
|
||
|
|
```mermaid
|
||
|
|
graph TD
|
||
|
|
A[User/Renter] -->|Accesses| B(Frontend React.js)
|
||
|
|
B -->|API Calls| C(Backend n8n)
|
||
|
|
C -->|Database Queries| D[PostgreSQL Database]
|
||
|
|
E[Admin/Business Owner] -->|Manages| F(Admin Dashboard React.js)
|
||
|
|
F -->|API Calls| C
|
||
|
|
C -->|Webhooks/Triggers| G[Payment Gateway]
|
||
|
|
C -->|Triggers| H[Email Service Provider]
|
||
|
|
```
|
||
|
|
|
||
|
|
## Source Code Paths
|
||
|
|
- Frontend (React.js): `src/frontend/` (to be created)
|
||
|
|
- Backend (n8n workflows): `src/backend/n8n/` (to be created)
|
||
|
|
- Database (PostgreSQL schema/migrations): `src/backend/database/` (to be created)
|
||
|
|
|
||
|
|
## Key Technical Decisions
|
||
|
|
- **Frontend Framework:** React.js for a dynamic and interactive user interface.
|
||
|
|
- **Backend Orchestration:** n8n for workflow automation, API endpoint creation, and integration with external services (payment gateways, email). This allows for rapid development and flexible workflow management.
|
||
|
|
- **Database:** PostgreSQL for robust and scalable data storage, supporting complex queries and relationships.
|
||
|
|
- **Real-time Availability:** Calendar integration on the frontend will pull real-time availability data from PostgreSQL via n8n APIs.
|
||
|
|
- **Payment Processing:** Integration with local payment gateways via n8n webhooks for secure transactions.
|
||
|
|
|
||
|
|
## Design Patterns in Use
|
||
|
|
- **MVC/MVVM (Conceptual):** While n8n handles much of the backend logic, the React frontend will conceptually follow an MVVM pattern for UI separation.
|
||
|
|
- **API-driven Development:** Frontend and backend communicate exclusively via RESTful APIs exposed by n8n.
|
||
|
|
- **Event-driven Architecture (for integrations):** n8n's workflow capabilities enable event-driven interactions with payment gateways and email services.
|
||
|
|
|
||
|
|
## Component Relationships
|
||
|
|
- **Frontend & Backend:** The React.js frontend consumes APIs provided by the n8n backend.
|
||
|
|
- **Backend & Database:** n8n interacts directly with the PostgreSQL database for all data persistence.
|
||
|
|
- **Backend & External Services:** n8n acts as an intermediary for payment gateways and email services.
|
||
|
|
|
||
|
|
## Critical Implementation Paths
|
||
|
|
- **Booking Process:** Ensuring seamless date selection, cart management, and secure payment integration.
|
||
|
|
- **Inventory Management:** Real-time stock updates and calendar synchronization are crucial.
|
||
|
|
- **Order Status Updates:** Manual status changes by admins must correctly trigger availability updates.
|