# 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.