Common Portal Platform

A white-label, multi-tenant portal framework built with Laravel, Tailwind CSS, and PostgreSQL.

Quick Start

Prerequisites

• Docker & Docker Compose
• Git

Setup

# 1. Clone repository
git clone https://github.com/common-portal/platform.git
cd platform

# 2. Install Laravel + dependencies
make setup

# 3. Start containers
make up

# 4. Run migrations
make migrate

# 5. Visit app
open http://localhost:8080

Tech Stack

Commands

make setup     # Initial installation
make up        # Start containers
make down      # Stop containers
make migrate   # Run migrations
make fresh     # Fresh migrate + seed
make shell     # Shell into container
make logs      # View logs
make test      # Run tests

Environment

Copy .env.example to .env:

cp .env.example .env

Project Structure

Page Layouts

Guest Layout (layouts/guest.blade.php)

All public/unauthenticated pages use a shared guest layout with:

Public pages using this layout:

Platform Layout (layouts/platform.blade.php)

Authenticated pages use the platform layout with sidebar navigation.

Responsive Sidebar Solution

The sidebar uses a dual-mode CSS approach with explicit media queries:

Why this combination works

Key CSS

/* Mobile: sidebar hidden off-screen */
#sidebar {
    transform: translateX(-100%);
    position: fixed;
}
#sidebar.translate-x-0 {
    transform: translateX(0);
}

/* Desktop (768px+): sidebar always visible, sticky, full height */
@media (min-width: 768px) {
    #sidebar {
        transform: translateX(0) !important;
        position: sticky !important;
        top: 0 !important;
        height: 100vh !important;
        flex-shrink: 0 !important;
    }
    .mobile-header {
        display: none !important;
    }
}

/* Sidebar flexbox layout for language selector at bottom */
#sidebar {
    display: flex !important;
    flex-direction: column !important;
}
#sidebar .language-selector-container {
    margin-top: auto !important;  /* Pushes to bottom */
    flex-shrink: 0 !important;
}

Why explicit CSS instead of Tailwind responsive classes: Tailwind's -translate-x-full md:translate-x-0 had specificity conflicts with JavaScript toggle classes. Explicit !important rules guarantee correct behavior.

File Uploads (Avatars & Logos)

Storage Paths

Files are accessible via /storage/uploads/... after running php artisan storage:link.

Filename Format

{sanitized_original_name}_{hash_prefix}_{datetime}.{extension}

Example: profile-photo_a1b2c3d4_20260108_063500.jpg

Upload Constraints

• Max file size: 2MB
• Allowed types: JPEG, PNG, GIF, WebP (+ SVG for account logos)
• Validation: Server-side via Laravel validation rules

Database Storage

// Member avatar
$member->update([
    'profile_avatar_image_path' => 'uploads/members/icons/filename.jpg',
]);

// Account logo
$account->update([
    'branding_logo_image_path' => 'uploads/accounts/icons/filename.png',
]);

Displaying Uploaded Images

{{-- Member Avatar --}}
@if(auth()->user()->profile_avatar_image_path)
    <img src="{{ asset('storage/' . auth()->user()->profile_avatar_image_path) }}" alt="Avatar">
@endif

{{-- Account Logo --}}
@if($account->branding_logo_image_path)
    <img src="{{ asset('storage/' . $account->branding_logo_image_path) }}" alt="Logo">
@endif

Key Concepts

Document Cross-References

Production Deployment

# Configure managed PostgreSQL
cp .env.example .env.production
# Edit .env.production with managed DB credentials

# Deploy
make prod-up

License

MIT License — see LICENSE for details.

An NSDB Group product — © 2026 NSDB Group