CodeStudio PRO — Enterprise Software Showcase & Engineering Hub

A modern, full-featured digital software marketplace, developer showcase, and interactive engineering platform built with Next.js 16 App Router, React 19, TypeScript, and Tailwind CSS v4, communicating with a decoupled Laravel headless backend and real-time Laravel Reverb WebSockets.

Explore Showcase • System Architecture • Getting Started • Theming Engine • API Contracts

---

📌 Overview

CodeStudio PRO is engineered for high-performance software showcasing, live product demos, and client lead acquisition. Designed with an ultra-modern cyber-glassmorphism aesthetic, it bridges the gap between software development studios and prospective clients/investors.

It features real-time event broadcasting (via Laravel Echo & Laravel Reverb), dynamic multi-palette theming, instant sandbox credential access, cross-platform software distribution (Web, Android APK, and iOS TestFlight), an interactive project cost estimator, and an engineering team showcase.

---

🚀 Key Features

1. 📦 Software Catalog & Dynamic Filtering

• Cross-Platform Categorization: Filter solutions across Web Applications, Android APKs, iOS TestFlight builds, and Custom Enterprise Suites.
• Server-Side Search & Sorting: Real-time URL search parameters, category filters, and tag queries powered by Next.js 16 ISR (Incremental Static Regeneration) for lightning-fast TTFB.
• Rich Metadata & Specifications: Detailed product views featuring multi-image galleries, tech stack tags, feature lists, pricing models, and direct deployment channels.

2. 🔑 Interactive Sandbox & Live Demo Access

• One-Click Admin Demo Modal: Users can launch live admin panels and instantly copy test credentials (admin@demo.com / password) with clipboard feedback.
• Direct Binary Distribution: Direct links for Android APK downloads and iOS TestFlight onboarding.

3. ⚡ Real-Time WebSocket Notifications (Laravel Reverb)

• Sub-100ms Event Broadcasting: Subscribes to backend events via laravel-echo and pusher-js over WebSocket channels (notifications and test-channel).
• Live Toast Notifications & Navbar Badge: Floating dynamic toast alerts with auto-dismiss and an animated live unread counter on the navigation bar.

4. 🎨 5-Palette Luxury Theming & Dual-Mode UI

• Custom CSS Variable Design System: Instant runtime switching between 5 curated luxury palettes:
  • 🌊 Oceanic Blue (Royal Azure & Electric Blue — Stripe/SaaS style)
  • 🌿 Emerald Luxe (Mint Jade & Deep Emerald — Fintech style)
  • 🔮 Violet Aura (Electric Violet & Deep Indigo — AI/Modern Tech)
  • 🌅 Sunset Amber (Crimson Flame & Warm Gold — High-energy)
  • 🌑 Obsidian Slate (Titanium & Pure Monochrome — Apple minimalist)
• Light / Dark Dual Mode: Seamless mode switching with zero layout shift and automatic localStorage persistence.

5. 👥 Engineering Team & Developer Directory

• Role-Based Filtering: Filter engineers by specialization (Frontend, Backend, Mobile, DevOps, UI/UX, Fullstack).
• Interactive Profile Cards: Displays real-time availability badges, experience years, skills pills, custom role-specific color accents, and direct links to GitHub, LinkedIn, Twitter/X, and personal portfolios.

6. 📝 Interactive Project Estimator & Scope Builder

• Multi-Platform Scoping: Clients can customize target platform, budget tiers, and delivery timelines.
• Direct Headless Submission: Validated inquiries are directly dispatched to the Laravel backend support API with instant UX feedback.

---

🏗️ System Architecture

┌─────────────────────────────────────────────────────────────────────────┐
│                           CLIENT BROWSER                                │
│                                                                         │
│   Next.js 16 (React 19) • Tailwind CSS v4 • Context API (Theme/Notif)  │
└───────────────────▲──────────────────────────────────▲──────────────────┘
                    │                                  │
      HTTPS / REST  │                                  │  WebSockets (WSS)
      ISR (30s-60s) │                                  │  Sub-100ms Broadcast
                    │                                  │
┌───────────────────▼─────────────┐   ┌────────────────▼──────────────────┐
│     LARAVEL 12 REST API         │   │      LARAVEL REVERB SERVER        │
│   (Headless Microservice)       │   │      (WebSocket Server)           │
│                                 │   │                                   │
│ • Products & Categories         │───► • Public Channel: 'notifications' │
│ • Developers & Team Roles       │   │ • Live Channel:   'test-channel'  │
│ • Contact & Custom Quotes       │   └───────────────────────────────────┘
│ • Newsletter Subscriptions      │
└─────────────────────────────────┘

---

🛠️ Tech Stack & Dependencies

Layer	Technologies
Framework	Next.js 16 (App Router, Server Components & Client Boundaries)
Library	React 19
Language	TypeScript 5
Styling	Tailwind CSS v4, PostCSS, Custom CSS Variables
WebSockets	Laravel Echo, Pusher JS, Laravel Reverb
Icons	Lucide React
Utilities	clsx, tailwind-merge
Data Fetching	Native fetch with Next.js ISR Cache Revalidation (revalidate: 30)

---

📂 Project Structure

code-studio-nextjs/
├── public/                     # Static assets and icons
├── src/
│   ├── app/                    # Next.js 16 App Router
│   │   ├── contact/            # Direct contact & support desk
│   │   ├── products/           # Software catalog
│   │   │   └── [slug]/         # Dynamic product detail & sandbox page
│   │   ├── request-quote/      # Interactive project estimator
│   │   ├── services/           # Engineering services & capabilities hub
│   │   ├── team/               # Developer team directory & profiles
│   │   ├── globals.css         # Tailwind CSS v4 tokens, themes & glassmorphism
│   │   ├── layout.tsx          # Root layout with theme & notification providers
│   │   └── page.tsx            # High-conversion landing page & hero
│   ├── components/
│   │   ├── common/             # Reusable UI components
│   │   │   ├── Footer.tsx      # Multi-column footer & newsletter opt-in
│   │   │   ├── Navbar.tsx      # Sticky glass nav, active routes & notif bell
│   │   │   ├── NotificationToast.tsx # Floating real-time alert banner
│   │   │   └── ThemeSwitcher.tsx     # Color palette & dark mode toggle
│   │   └── products/
│   │       ├── DemoModal.tsx   # Live sandbox credentials modal
│   │       └── ProductCard.tsx # Software card with badges & action triggers
│   ├── context/
│   │   ├── NotificationContext.tsx # Reverb WebSocket listener & state
│   │   └── ThemeContext.tsx        # 5-palette & light/dark mode manager
│   ├── lib/
│   │   ├── api.ts              # Strongly-typed backend API client
│   │   ├── echo.ts             # Laravel Echo & Reverb singleton instance
│   │   └── utils.ts            # Currency formatters, badges & safe image resolution
│   └── types/
│       ├── index.ts            # Global TypeScript interfaces & API types
│       └── theme.ts            # Theme presets & color definitions
├── .env.example                # Environment variable configuration template
├── next.config.ts              # Next.js configuration & remote image patterns
├── package.json                # Project dependencies & scripts
└── tsconfig.json               # TypeScript configuration

---

⚙️ Getting Started

Prerequisites

• Node.js: v20.x or later (LTS recommended)
• Package Manager: npm, yarn, pnpm, or bun
• Backend Service: Running Laravel 11/12 instance with Laravel Reverb enabled (optional for local mock/static development)

1. Clone the Repository

git clone https://github.com/sajusun/code-studio-nextjs.git
cd code-studio-nextjs

2. Install Dependencies

npm install
# or
pnpm install
# or
yarn install

3. Configure Environment Variables

Copy .env.example to .env.local:

cp .env.example .env.local

Configure your environment variables:

# Backend API Endpoints (Laravel Headless Microservice)
NEXT_PUBLIC_API_URL=http://backend.test/api/v1
NEXT_PUBLIC_BACKEND_URL=http://backend.test

# Real-Time WebSocket Engine (Laravel Reverb)
NEXT_PUBLIC_REVERB_APP_KEY=local-key
NEXT_PUBLIC_REVERB_HOST=127.0.0.1
NEXT_PUBLIC_REVERB_PORT=8080
NEXT_PUBLIC_REVERB_SCHEME=http

# UI / Theming System Defaults
# Options: oceanic_blue | emerald_luxe | violet_aura | sunset_amber | obsidian_slate
NEXT_PUBLIC_DEFAULT_THEME=oceanic_blue
# Options: light | dark
NEXT_PUBLIC_DEFAULT_MODE=light

4. Run Development Server

npm run dev

Open http://localhost:3000 in your browser to view the application.

---

🎨 Theming Engine & Design System

The application implements a decoupled, variable-driven styling architecture using Tailwind CSS v4 @layer base.

/* Dynamic CSS Variable Injection */
:root, [data-theme="oceanic_blue"] {
  --accent-primary: #2563eb;
  --accent-glow: rgba(37, 99, 235, 0.35);
  --accent-gradient: linear-gradient(135deg, #2563eb 0%, #0284c7 50%, #6366f1 100%);
}

html.dark[data-theme="oceanic_blue"] {
  --accent-primary: #38bdf8;
  --accent-glow: rgba(56, 189, 248, 0.35);
  --accent-gradient: linear-gradient(135deg, #38bdf8 0%, #818cf8 50%, #c084fc 100%);
}

• Persistence: User theme selection and dark/light preference are saved in localStorage (app_theme_color and app_theme_mode).
• Micro-Interactions: Custom Cyber-Grid backgrounds, glass-morphism panels (backdrop-filter: blur(16px)), and smooth hover card transforms (translateY(-3px)).

---

📡 API Integration & Endpoints

All external HTTP requests are handled inside src/lib/api.ts with Next.js caching strategy:

Method	Endpoint	Description	Cache Policy
GET	/public/products	Paginated product list with search & filters	ISR 30s
GET	/public/products/featured	Curated featured software items	ISR 60s
GET	/public/products/{slug}	Full product details with related software	ISR 30s
POST	/public/support/contact	Project quote requests & contact messages	No-Cache
POST	/newsletter/subscribe	Email newsletter subscription	No-Cache
GET	/public/developers	Team member directory with role query	ISR 60s
GET	/public/developer-roles	List of developer roles & badge schemes	ISR 300s

---

🚀 Deployment

Deploy on Vercel (Recommended)

1. Push your repository to GitHub.
2. Import the project into the Vercel Dashboard.
3. Set your Production Environment Variables (NEXT_PUBLIC_API_URL, NEXT_PUBLIC_REVERB_*).
4. Click Deploy.

Production Build Test

npm run build
npm run start

---

👨‍💻 Author

Sakhawat Hossain
Full Stack Software Engineer

• GitHub: @sajusun
• Email: sajuislam266@gmail.com

---

📄 License

This project is licensed under the MIT License.