ClientSpace ✦ Premium Freelancer Delivery Workspace

ClientSpace is a high-fidelity, luxury-minimal portal designed for premium freelancers to deliver digital products, manage milestone-based invoicing, and collaborate securely with clients under a unified, light-and-warm aesthetic.

---

✦ System Architecture & Core Ecosystem

ClientSpace operates on a modern serverless stack leveraging Next.js, Supabase PostgreSQL, and transactional system integrations:

graph TD
    A[Client Portal / Guest View] -->|E-Sign Contract| B[Supabase Database]
    A -->|Approved Deliverables| B
    C[Freelancer Dashboard] -->|Create Projects/Milestones| B
    C -->|Upload Assets with client-side canvas compression| D[Supabase Storage bucket: deliverables]
    B -->|Database Triggers / RPCs| E[Brevo Transactional Email Gateway]
    F[Lemon Squeezy Webhooks] -->|Subscription Event Webhook| B

Loading

1. Security & Guest Portal Access

• Role-Based Protection: All management console pathways (/dashboard/*) are strictly guarded using Next.js middleware and Supabase JWT authentication.
• Cryptographically Secure Portals: Clients access their dedicated project view via single-use secure tokens (/portal/[token]). Security Definer RPCs (e.g., get_project_by_token) permit read/write interactions to project metadata without exposing the main postgres dashboard to the public.

2. Deliverables & Client-Side Image Compression

• To prevent oversized uploads, all assets go through a client-side HTML5 Canvas-based compression engine (lib/compress.ts) which constraints images to a maximum width of 1920px at 0.85 JPEG quality factor before transfer, keeping bucket costs optimized.
• Version tracking (e.g. v1, v2, v3) is managed automatically on a per-deliverable basis in storage buckets.

3. Transactional Notifications & Email Gateway

• A unified endpoint /api/notifications intercepts database changes (such as file approval, invoicing, status changes, and signing milestones) and triggers Brevo Transactional Email templates to inform freelancers and clients instantly.

---

✦ Design System & Visual Guidelines

ClientSpace inherits a brutalist, flat-blended minimal design system that mirrors a high-end agency theme:

Property	Value	Description
Primary Background	#FAFAF8	Warm off-white
Surface	#FFFFFF	Card surface panels
Borders	#E4E4E7	Thin, crisp borders
Accent Primary	#C8F04B	Electric Lime Green
Text Dark	#18181B	Deep Charcoal Gray
Interactive Edges	border-radius: 0px	Solid, brutalist sharp corners

Visual Identity Principles:

1. Contrast & Hierarchy: We avoid system gradients. Highlights utilize bg-brand-accent with deep contrast text-brand-text.
2. Interactive Hover Animations: Links use thin underlines matching the primary accent color (border-b border-brand-accent hover:border-brand-text) for a sleek signature feel.
3. Pixar-Style 3D Art Integration: Visual illustrations are flat-blended using CSS mix-blend modes (mix-blend-multiply) to sit organically on the warm off-white background without artificial shadows.

---

✦ Audit of Rebranding & Stabilization Refactoring

We completed a comprehensive code audit and aesthetic refinement:

1. Folder Structure Repair (404 Resolution)

• Problem: The dashboard components were stored inside a Next.js Route Group directory app/(dashboard). Because Next.js route groups omit their folder names from paths, requests navigating to /dashboard threw a 404 Page Not Found error.
• Fix: Remapped the directory structure from app/(dashboard) to app/dashboard. This aligned Next.js routing with the internal redirection logic, enabling clean routing across:
  • /dashboard
  • /dashboard/projects
  • /dashboard/billing
  • /dashboard/settings
  • /dashboard/admin

2. High-Contrast Text Fixes

• Problem: Contrast ratios for #C8F04B (Electric Lime Green) text on white background were unreadable and failed accessibility guidelines.
• Fix: Replaced all instances of text-brand-accent on text links, icons, list items, and toggles with high-contrast text-brand-text or #3D4A00 dark-olive tones. Reserved brand-accent exclusively for background plates, borders, and active tab highlights.

3. Scrollbar & Button Refinements

• Standardized globals.css track styles to align with the warm #FAFAF8 color scheme.
• Refactored the core <Button /> and <Badge /> components to support dark hover states and readable typography configurations.

---

✦ Installation & Setup

1. Clone the repository:

   git clone https://github.com/shakeeb567/clientspace.git
   cd clientspace

2. Install dependencies:

   npm install

3. Configure Environment Variables: Create a .env.local file in your root workspace:

   NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
   NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
   SUPABASE_SERVICE_ROLE_KEY=your_service_role_key
   BREVO_API_KEY=your_brevo_api_key
   LEMONSQUEZY_WEBHOOK_SECRET=your_secret
   NEXT_PUBLIC_APP_URL=http://localhost:3000

4. Run local dev server:

   npm run dev

5. Build for production:

   npm run build