Skip to content

AccessALI Customer Portal

Welcome to the comprehensive documentation for the AccessALI Customer Portal - a modern, scalable full-stack customer portal for AccessHomes property buyers.

Overview

AccessALI is a Next.js 15 application that enables property buyers to track construction progress, manage payments, handle documents, and communicate with AccessHomes. Built with modern web technologies and designed for 10,000+ concurrent users.

Key Features

For Property Buyers

  • Property Dashboard - View units and real-time construction progress
  • Payment Management - Track payments, view history, and make online payments
  • Document Management - Upload and manage property-related documents
  • Milestone Tracking - Visual construction progress with photo updates
  • Message Center - Direct communication with AccessHomes support
  • Appointment Booking - Schedule property viewings and consultations

For Developers

  • Container-First Development - Docker and Kubernetes ready
  • Hot-Reload - Instant feedback during development
  • Type-Safe - End-to-end TypeScript with Prisma
  • Mock APIs - Develop independently without external dependencies
  • Comprehensive Documentation - Everything you need to contribute

For DevOps

  • Production-Ready - Optimized Docker images (~200MB)
  • Auto-Scaling - Kubernetes HPA configuration (3-10 replicas)
  • Health Checks - Docker and Kubernetes health probes
  • Security - Non-root containers, resource limits, security headers
  • Monitoring - Built-in health endpoints and metrics

Technology Stack

graph TB
    subgraph Frontend
        A[Next.js 15.5.6]
        B[React 19.2.0]
        C[TypeScript 5.7.2]
        D[Tailwind CSS 3.4.18]
        E[shadcn/ui]
    end

    subgraph Backend
        F[Next.js Server Actions]
        G[NextAuth.js v5]
        H[Prisma 6.2.1]
    end

    subgraph Infrastructure
        I[PostgreSQL 16]
        J[Redis 7]
        K[Docker]
        L[Kubernetes]
    end

    A --> F
    B --> A
    C --> A
    D --> A
    E --> A
    F --> G
    F --> H
    H --> I
    F --> J
    K --> A
    L --> K

Quick Start

Choose your preferred development environment:

Get started in less than 5 minutes:

# Copy environment file
cp .env.docker .env

# Start all services
cd src
pnpm docker:dev:build

# Run migrations (in new terminal)
cd src
pnpm docker:db:migrate

# Access the application
open http://localhost:3000

For local development without Docker:

# Install dependencies
cd src
pnpm install

# Configure database
cp ../documents/00-references/.env.example .env.local
# Edit .env.local with your DATABASE_URL

# Run migrations
pnpm db:migrate

# Start development server
pnpm dev

Core Architecture

AccessALI follows a layered architecture pattern with clear separation of concerns:

graph TD
    A[Presentation Layer] --> B[Application Layer]
    B --> C[Domain Layer]
    C --> D[Infrastructure Layer]

    A1[React Server Components<br/>Client Components<br/>UI Components] --> A
    B1[Server Actions<br/>API Routes<br/>Middleware] --> B
    C1[Use Cases<br/>Services<br/>Validators] --> C
    D1[Repositories<br/>Adapters<br/>Mocks] --> D

Mock API Pattern

Develop features without waiting for external APIs using our Adapter Pattern:

// Environment variable controls behavior
USE_MOCK_SAP = "true"; // Development
USE_MOCK_SAP = "false"; // Production

// Usage is identical - no code changes needed
import { sapAdapter } from "@/lib/adapters/sap-adapter";
const contract = await sapAdapter.getContract(id);

Documentation Structure

Section Description
Getting Started Installation, prerequisites, and quick start guides
Architecture System design, patterns, and technical decisions
Development Guide Daily workflows, conventions, and best practices
API Reference Server Actions, API routes, and data layer documentation
Components UI component library and usage guidelines
Deployment Docker, Kubernetes, and production deployment
Contributing Guidelines for contributing to the project

Project Status

  • ✅ Foundation complete
  • ✅ Docker setup complete
  • ✅ Database schema defined
  • ✅ Layered architecture established
  • ✅ Mock API pattern implemented
  • ✅ Development environment ready
  • ✅ Documentation comprehensive
  • 🚧 Feature implementation in progress
  • 🚧 Authentication (NextAuth.js integration)
  • 🚧 Real API integrations (planned)

Support

Common Commands

pnpm docker:dev              # Start development environment
pnpm docker:logs             # View all service logs
pnpm docker:logs:app         # View application logs only
pnpm docker:db:studio        # Open Prisma Studio
pnpm docker:shell            # Access container shell
pnpm docker:down             # Stop all services

Next Steps

  1. Read the Getting Started Guide
  2. Learn about the Architecture
  3. Set up your Development Environment
  4. Explore the API Reference
  5. Start Contributing

Built with ❤️ by the AccessALI Development Team