DWELIX Client-Side Application

A React + TypeScript + Vite application for the DWELIX multi-tenant property rental platform, designed for deployment on Google Cloud Platform.

🏗️ Architecture Overview

• Frontend Framework: React 18 with TypeScript
• Build Tool: Vite for fast development and optimized builds
• UI Library: shadcn/ui components with Tailwind CSS
• State Management: Zustand for global state
• Routing: React Router v6 with role-based dashboard routing
• Deployment: GCP Cloud Run with automated CI/CD

🎯 Key Features

• 8 Role-Based Dashboards: Tenant, Landlord, Scout, Agent, Lawyer, Support, Admin, Super Admin
• Scout-Only Property Access: Secure key custody management system
• Real-time GPS Tracking: For scout check-in/check-out operations
• Lawyer-Verified Agreements: Legal document management workflow
• Paystack Integration: Secure payment processing for Nigerian market

🚀 Quick Start

Prerequisites

• Node.js 18+
• npm or yarn
• GCP account (for deployment)

Local Development

1. Clone and Install

   cd client-side
   npm install

2. Environment Setup

   cp .env.example .env
   # Edit .env with your configuration

3. Start Development Server

   npm run dev

   Application will be available at http://localhost:3000

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build locally
• npm run lint - Run ESLint
• npm run type-check - Run TypeScript type checking

🔐 User Roles & Access

The application supports 8 distinct user roles with separate dashboards:

Role	Dashboard Features	Key Responsibilities
Tenant	Property search, viewing requests, applications	Find and rent properties
Landlord	Property management, key handover, applications	List and manage properties
Scout	Task management, GPS tracking, property verification	Field operations and verification
Agent	Key custody, checkout/return management	Secure key storage and distribution
Lawyer	Ownership verification, agreement drafting	Legal services and documentation
Support	User assistance, issue resolution	Customer support operations
Admin	Platform management, user oversight	System administration
Super Admin	Full system access, configuration	Complete platform control

🏗️ Project Structure

src/
├── components/          # Reusable UI components
│   └── ui/             # shadcn/ui components
├── pages/              # Page components
│   └── dashboards/     # Role-specific dashboards
├── store/              # Zustand state management
├── types/              # TypeScript type definitions
├── lib/                # Utility functions
└── hooks/              # Custom React hooks

🌐 GCP Deployment

Automated Deployment with Cloud Build

1. Setup GCP Project

   gcloud config set project YOUR_PROJECT_ID
   gcloud services enable cloudbuild.googleapis.com
   gcloud services enable run.googleapis.com

2. Deploy via Cloud Build

   gcloud builds submit --config cloudbuild.yaml

Manual Docker Deployment

1. Build Container

   docker build -t gcr.io/YOUR_PROJECT_ID/dwelix-client .
   docker push gcr.io/YOUR_PROJECT_ID/dwelix-client

2. Deploy to Cloud Run

   gcloud run deploy dwelix-client \
     --image gcr.io/YOUR_PROJECT_ID/dwelix-client \
     --platform managed \
     --region us-central1 \
     --allow-unauthenticated

🔧 Configuration

Environment Variables

Variable	Description	Example
VITE_API_BASE_URL	Backend API endpoint	https://api.dwelix.com
VITE_PAYSTACK_PUBLIC_KEY	Paystack public key	pk_live_...
VITE_GOOGLE_MAPS_API_KEY	Google Maps API key	AIza...
VITE_GCP_PROJECT_ID	GCP project identifier	dwelix-prod
No special Google OAuth setup required	The app uses a manual "Add to Google Calendar" link which opens a pre-filled Google Calendar event in the browser. No OAuth or API credentials are needed for this flow.

Feature Flags

• VITE_ENABLE_SCOUT_GPS - Enable GPS tracking for scouts
• VITE_ENABLE_KEY_CUSTODY - Enable key custody management
• VITE_ENABLE_LAWYER_VERIFICATION - Enable lawyer verification workflow

🎨 UI Components

Built with shadcn/ui and Tailwind CSS for consistent, accessible design:

• Design System: Consistent color palette and typography
• Responsive: Mobile-first responsive design
• Accessible: WCAG 2.1 compliant components
• Themeable: Light/dark mode support

🔒 Security Features

• Role-Based Access Control: Strict dashboard separation
• Input Validation: Client-side validation with TypeScript
• Secure Headers: CSP, HSTS, and other security headers
• Environment Isolation: Separate configs for dev/staging/prod

📱 Mobile Responsiveness

• Progressive Web App: PWA-ready with service worker support
• Touch-Friendly: Optimized for mobile interactions
• Offline Support: Basic offline functionality for critical features

🚀 Performance Optimizations

• Code Splitting: Route-based code splitting
• Tree Shaking: Unused code elimination
• Asset Optimization: Image compression and lazy loading
• CDN Ready: Static asset optimization for CDN delivery

🧪 Testing Strategy

• Unit Tests: Component and utility function testing
• Integration Tests: User flow and API integration testing
• E2E Tests: Critical path automation testing
• Performance Tests: Core Web Vitals monitoring

📊 Monitoring & Analytics

• Error Tracking: Integrated error reporting
• Performance Monitoring: Real User Monitoring (RUM)
• Usage Analytics: User behavior tracking
• Health Checks: Application health monitoring

🤝 Contributing

1. Follow the established code style and patterns
2. Ensure TypeScript strict mode compliance
3. Add tests for new features
4. Update documentation for API changes

📄 License

Proprietary - DWELIX Platform © 2026