feat: initial commit for camping rental webapp
This commit establishes the foundational structure for the Karyaman project, focusing on the camping equipment rental web application. Key additions include: - Scaffolding for three React applications: `adventure-rental-app`, `motel-app`, and `pakrete-app` using Create React App. - Initial implementation of `HomePage` and `CategoriesPage` components for the `adventure-rental-app`, based on provided design mockups. - Project documentation including PRDs and design files for the applications. - Configuration of the Kilo Code memory bank with core project details such as architecture, product vision, and tech stack.
This commit is contained in:
42
.kilocode/rules/memory-bank/architecture.md
Normal file
42
.kilocode/rules/memory-bank/architecture.md
Normal file
@@ -0,0 +1,42 @@
|
||||
# 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.
|
||||
3
.kilocode/rules/memory-bank/brief.md
Normal file
3
.kilocode/rules/memory-bank/brief.md
Normal file
@@ -0,0 +1,3 @@
|
||||
# Project Brief: Webapp Rental Peralatan Camping
|
||||
|
||||
This project aims to develop a web application for renting camping equipment. The primary goal is to provide an intuitive platform for customers to browse, rent, and return equipment, while enabling business owners to efficiently manage inventory, orders, and customer interactions.
|
||||
10
.kilocode/rules/memory-bank/context.md
Normal file
10
.kilocode/rules/memory-bank/context.md
Normal file
@@ -0,0 +1,10 @@
|
||||
# Context
|
||||
|
||||
## Current work focus
|
||||
Initializing the memory bank for the Webapp Rental Peralatan Camping project.
|
||||
|
||||
## Recent changes
|
||||
- Created `architecture.md` and `tech.md` based on `adventure-rental-app/prd.md`.
|
||||
|
||||
## Next steps
|
||||
- Summarize project understanding and ask for user verification.
|
||||
32
.kilocode/rules/memory-bank/product.md
Normal file
32
.kilocode/rules/memory-bank/product.md
Normal file
@@ -0,0 +1,32 @@
|
||||
# Product: Webapp Rental Peralatan Camping
|
||||
|
||||
## Why this project exists
|
||||
This project exists to provide a modern, efficient, and user-friendly solution for renting camping equipment. Many existing rental processes are manual, inefficient, and lack real-time inventory visibility. This web application aims to streamline operations for business owners and simplify the rental experience for customers.
|
||||
|
||||
## Problems it solves
|
||||
- Inefficient manual inventory tracking
|
||||
- Difficulties for customers to check equipment availability
|
||||
- Lack of a centralized platform for managing orders and customer data
|
||||
- Limited reach for rental businesses beyond physical locations
|
||||
|
||||
## How it should work
|
||||
The web application will consist of two main modules:
|
||||
1. **User Module (Renter):**
|
||||
- **Search & Discovery:** Users can search by category, keyword, and apply filters/sorts (price, availability, capacity, brand, reviews).
|
||||
- **Product Details:** Comprehensive information including name, description, price, images, availability calendar, specifications, and customer reviews.
|
||||
- **Booking Process:** Users select rental dates via an interactive calendar, add items to a shopping cart, review order summary, fill in personal details, and choose a payment method. Order confirmation is sent via email/notification.
|
||||
- **User Account Management:** Registration/login, profile management, order history, and notifications.
|
||||
|
||||
2. **Admin/Business Owner Module:**
|
||||
- **Inventory Management:** Add, edit, delete equipment with full details (name, description, price, stock, images, category, specifications). Manage categories. Real-time stock tracking integrated with the calendar, allowing admins to block dates for maintenance.
|
||||
- **Order Management:** View all orders with statuses, detailed order information, and manual status changes (which update calendar availability). Search and filter orders.
|
||||
- **Customer Management:** View customer list and order history.
|
||||
- **Return Management:** Record returned equipment, note condition, and calculate penalties for damage/late returns.
|
||||
- **Reports & Analytics:** Revenue reports, inventory reports (popular, rarely rented, frequently damaged items), and availability forecasts.
|
||||
|
||||
## User experience goals
|
||||
- **Intuitive Interface:** Easy to navigate for both renters and admins.
|
||||
- **Seamless Booking:** A straightforward and clear booking process, especially with calendar interactions.
|
||||
- **Real-time Information:** Instant updates on equipment availability and order statuses.
|
||||
- **Responsive Design:** Accessible and functional on both desktop and mobile devices.
|
||||
- **Secure Transactions:** Ensuring safe and reliable payment processing and data handling.
|
||||
29
.kilocode/rules/memory-bank/tech.md
Normal file
29
.kilocode/rules/memory-bank/tech.md
Normal file
@@ -0,0 +1,29 @@
|
||||
# Tech: Webapp Rental Peralatan Camping
|
||||
|
||||
## Technologies Used
|
||||
- **Frontend:** React.js (with Create React App)
|
||||
- **Backend Orchestration:** n8n
|
||||
- **Database:** PostgreSQL
|
||||
- **Payment Gateway Integration:** Local payment providers (e.g., Midtrans, Xendit, Duitku)
|
||||
- **Email Service Provider:** (To be determined, integrated via n8n)
|
||||
|
||||
## Development Setup
|
||||
- **Frontend:** Node.js, npm/yarn, React development server (from CRA).
|
||||
- **Backend:** Docker for n8n, PostgreSQL database instance.
|
||||
- **Version Control:** Git.
|
||||
|
||||
## Technical Constraints
|
||||
- **n8n Limitations:** Understanding and working within n8n's capabilities for complex logic and custom integrations.
|
||||
- **Scalability:** Initial setup might focus on a single server, with future considerations for horizontal scaling.
|
||||
- **Security:** Adherence to best practices for data security and user authentication.
|
||||
|
||||
## Dependencies
|
||||
- React libraries (e.g., React Router, state management library like Redux/Context API).
|
||||
- PostgreSQL client library for n8n.
|
||||
- Payment gateway SDKs/APIs.
|
||||
- Email service provider APIs.
|
||||
|
||||
## Tool Usage Patterns
|
||||
- **Frontend Development:** Standard React development workflow (component-based, JSX, state management).
|
||||
- **Backend Development:** n8n workflow creation (nodes, expressions, webhooks).
|
||||
- **Database Management:** SQL for schema definition, migrations, and direct queries if needed.
|
||||
Reference in New Issue
Block a user