Kids Party Shop + Rental Portal ERP
- [Deliverables]
- Public Website + Admin Portal ERP
- [Stack]
- React/Vite, Express API handlers, PostgreSQL, Prisma, Shared Workspace Packages
- [Role]
- Full-Stack Product Engineer
- [Service]
- Architecture + Product Delivery
[Overview]
A live React/Vite storefront paired with a role-aware operations ERP and Express/Prisma backend for CRM intake, POS, orders, rental bookings, inventory, finance, fulfillment, maintenance, workforce workflows, and decision-ready analytics.
Designed for Customers, admin, managers, delivery crew, finance, HR, operations staff. Built around Storefront, shop, rentals, cart, checkout, CRM, POS, bookings, orders, inventory, finance, receipts, delivery, maintenance, team access, reports, and dashboard analytics. Delivered with React + Vite, Express API handlers, PostgreSQL (Railway), Prisma schema and migrations, shared shell/runtime packages.
[The Challenges]
#1
"The customer-facing website and internal ERP needed clearer ownership so public pages could stay lightweight while admin workflows, functions, and Prisma migrations lived in the portal app."
#2
"Retail sales, staff-created POS orders, and rental reservations shared inventory but followed different workflows, creating overbooking risk and inconsistent stock state transitions."
#3
"Delivery, documents, accounting, CRM follow-up, marketing, maintenance, HR, timesheets, and newer operations workflows needed to stay visible in the portal without leaking admin concerns back into the public website."
[Discovery Phase]
Discovery started with a practical audit of Kids party shop and rental business website + portal backend/admin ERP, mapping how people were actually using the system before any redesign or implementation decisions were made.
I mapped core user groups (Customers, admin, managers, delivery crew, finance, HR, operations staff) and traced their task paths. The initial scope focused on Storefront, shop, rentals, cart, checkout, CRM, POS, bookings, orders, inventory, finance, receipts, delivery, maintenance, team access, reports, and dashboard analytics. The customer-facing website and internal ERP needed clearer ownership so public pages could stay lightweight while admin workflows, functions, and Prisma migrations lived in the portal app.
Design System Map
Patterns, states, and tokens working as one kit.
Component
Live storefront
Primary surface for high-priority actions
Interaction
Shared States
Default, active, warning, and empty states
Token
Operations ERP
Spacing, type scale, and alignment rhythm
Built By Design
Shared rules keep new screens aligned.
System
Architecture + Product Delivery
Consistent rules applied across modules
Scale
Reusable Patterns
Built for iterative expansion without rework
[Design System]
For Kids party shop and rental business website + portal backend/admin ERP, I defined a reusable design system that aligned layout, component behavior, and content hierarchy across every major user flow.
Patterns were shaped around real user groups (Customers, admin, managers, delivery crew, finance, HR, operations staff) so screens stayed consistent while still supporting different operational tasks.
Using React + Vite, Express API handlers, PostgreSQL (Railway), Prisma schema and migrations, shared shell/runtime packages, I created modular UI building blocks and predictable state rules, so new pages could be launched faster without introducing visual drift.
[Architecture + Database Class Diagrams]
Architecture Diagram
Public website, admin portal, portal-owned functions, data layer, shared packages, and external integrations.
Architecture Diagram
- Modules
- 13
- Flows
- 6
Public Website
Shop, rentals, book, cart
Checkout Flow
Customer orders
Booking Flow
Rental intake
Admin Portal
ERP and staff routes
Core Modules
Independent pieces working from one operating record.
Shared Packages
Shell, org, template config
POS Order Builder
Search, SKU, barcode input
Future Camera Scan
Planned item lookup flow
Portal Functions API
Auth, rules, writes
Prisma ORM
Schema and migrations
PostgreSQL Database
Operational source of truth
WhatsApp Alerts
Manager messages
Push Notifications
Manager alerts
Geocoding Services
Nominatim with Google fallback
How a Request Flows
Readable steps without connector clutter.
public APIs
Public Website -> Portal Functions API
orders
Checkout Flow -> Portal Functions API
bookings
Booking Flow -> Portal Functions API
staff APIs
Admin Portal -> Portal Functions API
walk-in sales
Admin Portal -> POS Order Builder
create order
POS Order Builder -> Portal Functions API
Database Class Diagram
Core portal-owned classes and relationships behind customer flows, operations, inventory, and finance.
Class diagram
Database Class Diagram
- Classes
- 20
- Relations
- 27
entity
Organization
- id: uuid
- name: string
- slug: string
- settings: json
- status: enum
entity
User
- id: uuid
- organizationId: fk
- roleId: fk
- email: string
- status: enum
entity
EmployeeProfile
- id: uuid
- userId: fk
- name: string
- phone: string
- position: string
entity
Role
- id: uuid
- organizationId: fk
- name: string
- permissions: json
entity
Customer
- id: uuid
- organizationId: fk
- name: string
- phone: string
- address: json
entity
ContactRequest
- id: serial
- customerId: fk
- status: string
- followUpDueAt: datetime
entity
CustomerActivity
- id: serial
- customerId: fk
- type: string
- status: string
- dueAt: datetime
entity
Product
- id: uuid
- organizationId: fk
- sku: string
- barcode: string
- stockType: enum
entity
Order
- id: uuid
- customerId: fk
- channel: enum
- status: enum
- total: decimal
entity
Booking
- id: uuid
- customerId: fk
- eventDate: datetime
- status: enum
- total: decimal
entity
OrderItem
- id: uuid
- orderId: fk
- productId: fk
- quantity: int
- unitPrice: decimal
entity
BookingItem
- id: uuid
- bookingId: fk
- productId: fk
- quantity: int
- rentalPrice: decimal
entity
StockMovement
- id: uuid
- productId: fk
- sourceType: enum
- quantityDelta: int
- createdAt: datetime
entity
Delivery
- id: uuid
- orderId: fk
- bookingId: fk
- status: enum
- scheduledAt: datetime
entity
Document
- id: uuid
- orderId: fk
- bookingId: fk
- type: enum
- fileUrl: string
entity
Expense
- id: uuid
- organizationId: fk
- category: string
- amount: decimal
- postedAt: datetime
entity
FinancialRecord
- id: uuid
- organizationId: fk
- sourceType: enum
- amount: decimal
- postedAt: datetime
entity
Maintenance
- id: uuid
- productId: fk
- vendorId: fk
- status: enum
- scheduledAt: datetime
entity
Vendor
- id: uuid
- organizationId: fk
- name: string
- phone: string
- serviceType: string
entity
Timesheet
- id: uuid
- userId: fk
- clockIn: datetime
- clockOut: datetime
- status: enum
Relationships
Entity links and ownership rules.
[01] Operational Dashboard and Analytics
Operational Dashboard and Analytics
The portal home turns live operational records into role-aware priorities, trend context, and direct routes into the work that needs attention.
Windowed KPIs
Orders, bookings, revenue, stock value, and average order value can be reviewed across practical time windows.
Revenue mix + trend
Retail and rental revenue are compared with operating expenses and net-profit context.
Assigned work
Due-today, overdue, and personally assigned orders or bookings are surfaced without searching across modules.
Inventory risk
Low-stock items, booking conflicts, reorder pressure, and operational exceptions become actionable dashboard signals.
[02] Commerce Layer (Public Website)
Commerce Layer (Public Website)
The public layer stays focused on the kids party shop and rental customer journey: informational pages, product discovery, rentals, cart, checkout, and booking forms.
Shop + rentals
Public browsing for retail items and rental inventory without exposing admin routes.
Checkout path
Customer capture and order creation through the portal-owned createOrder function.
Booking intake
Event details and rental items posted from the website into the bookings function.
Support content
FAQ, contact, delivery, refund, privacy, and terms pages reduce pre-booking friction.
CRM requests
Contact briefs create CRM customer records, request rows, and follow-up activity for staff.
[03] CRM and Lead Follow-up Module
CRM and Lead Follow-up Module
The contact form is no longer only an email path. Planning briefs are persisted into the portal CRM, linked to customers, and given follow-up activity so the team can track requests from intake to conversion.
Customer linking
Incoming briefs match or create CRM customers by email, phone, or normalized name.
Request inbox foundation
Each brief stores topic, date, venue, status, source, message, and follow-up due date.
Activity timeline
Customer detail now shows planning requests and follow-up tasks alongside orders and bookings.
Email as notification
Email alerts still go out, but the CRM record becomes the operational source of truth.
[04] POS and In-Store Sales Module
POS and In-Store Sales Module
The portal includes a POS/order builder path for staff-created sales, with a future camera scanning workflow scoped for faster item lookup.
Order builder
Staff can build walk-in sales from portal inventory and submit order records through the backend.
SKU and barcode lookup
Product search supports name, SKU, and barcode-style lookup so counter sales stay tied to catalog data.
Stock-aware cart lines
Selected products feed order totals while staying aligned with available inventory and downstream stock movement logic.
Future camera scanning
Next POS iteration can add camera-based barcode scanning for faster item capture on mobile or tablet devices.
[05] Booking and Order Operations Module
Booking and Order Operations Module
Retail orders, POS-created orders, and rental bookings are handled as dedicated flows but consolidated inside the portal-owned operational system.
Before
- Bookings, counter sales, and online orders managed across separate surfaces
- Manual availability checks
- No fast scan path for in-store item capture
- No shared lifecycle status model
With Portal ERP
- Unified POS order + booking records under one platform
- Product search and barcode/SKU lookup for staff sales
- Future camera scanning planned for faster item capture
- Availability-aware validations at API level
[06] Inventory and Stock Movement Module
Inventory and Stock Movement Module
Inventory is managed as a portal-owned core service with stock movement logs, counts, and availability support for website, POS, and rental workflows.
Stock endpoint
Controlled stock in/out operations with user attribution.
Activity logs
Historical movement trail for audits and variance checks.
Inventory counts
Count snapshots and stock valuation support.
Unified catalog
Products supporting website sales, POS order building, and rental workflows.
[07] Accounting and Financials Module
Accounting and Financials Module
Financial reporting, expense capture, invoicing, and P&L visibility are connected directly to live order and booking data in the portal backend.
Integer-based money model
Values stored in integer cents to avoid floating-point drift.
Financials endpoint
Revenue split, expense totals, and profitability windows.
Expenses module
Category-driven operational expenses tied to users and dates.
Accounting view
Receipts, invoices, trends, and finance-oriented KPIs.
[08] Delivery and Logistics Module
Delivery and Logistics Module
Delivery planning and operational fulfillment are tracked from booking context through dispatch updates.
- Delivery board tracks route ownership and status progression.
- Geocoding support maps venue addresses for planning.
- Operational handoffs are visible to admin and manager roles.
- Delivery context links back to order/booking records for clarity.
[09] Documents and Invoicing Module
Documents and Invoicing Module
Document service
Centralized storage for operational and finance files.
Invoice generation
Branded invoice creation from transaction context.
Invoice retrieval
Detail endpoint supports review and downstream sharing.
Close-ready records
Receipts and invoices connected to accounting workflows.
[10] Maintenance and Asset Health Module
Maintenance and Asset Health Module
- Maintenance logs track service events against equipment and assets.
- Vendor records support supplier contacts and lead-time context.
- Asset lifecycle activity links maintenance events to operations reliability.
- Operational visibility improves readiness before booking allocation.
[11] HR, Timesheets, Roles, and Access
HR, Timesheets, Roles, and Access
Staff authentication
Role-aware login and token-based API access.
HR profiles
Employee records with contact and job details.
Timesheets
Clock-in/out workflow support for operational crews.
Roles and permissions
Admin/manager/staff access control by route and module.
[12] Platform Infrastructure and Integrations
Platform Infrastructure and Integrations
The backend is built as portal-owned Express API handlers with organization-level scoping, shared workspace utilities, and optional third-party integrations.
- Functions layer covers auth, inventory, bookings, orders, delivery, documents, HR, marketing, maintenance, and financial services.
- Organization scoping supports multi-tenant-ready behavior and data isolation.
- WhatsApp and push-notification hooks keep managers informed on transactional events.
- Module registry metadata drives admin navigation grouping and is ready for future database-backed module toggles.
- Editable configuration is being moved gradually into settings/config modules, starting with finance and CRM foundations rather than hardcoded operational text.
- Prisma schema and migrations maintain consistent data contracts across releases.
- Public website and admin portal routes stay separated while sharing one operational source of truth through the backend.
Portfolio Website (Astro + React)
