Skip to content
BranchesTags

Latest commit

 

History

16 Commits

Folders and files

NameName
Last commit message
Last commit date
.github
.github
 
 
public
public
 
 
scripts
scripts
 
 
src
src
 
 
tests
tests
 
 
.dockerignore
.dockerignore
 
 
.env.development
.env.development
 
 
.env.example
.env.example
 
 
.env.production
.env.production
 
 
.gitignore
.gitignore
 
 
.npmrc
.npmrc
 
 
.prettierignore
.prettierignore
 
 
.prettierrc
.prettierrc
 
 
ARCHITECTURE.md
ARCHITECTURE.md
 
 
CONTRIBUTING.md
CONTRIBUTING.md
 
 
DEPLOYMENT.md
DEPLOYMENT.md
 
 
Dockerfile
Dockerfile
 
 
ENVIRONMENT.md
ENVIRONMENT.md
 
 
LICENSE
LICENSE
 
 
README.md
README.md
 
 
eslint.config.js
eslint.config.js
 
 
index.html
index.html
 
 
nginx.conf
nginx.conf
 
 
package-lock.json
package-lock.json
 
 
package.json
package.json
 
 
playwright.config.d.ts
playwright.config.d.ts
 
 
playwright.config.js
playwright.config.js
 
 
playwright.config.ts
playwright.config.ts
 
 
prettier.config.js
prettier.config.js
 
 
tsconfig.json
tsconfig.json
 
 
tsconfig.node.json
tsconfig.node.json
 
 
tsconfig.node.tsbuildinfo
tsconfig.node.tsbuildinfo
 
 
tsconfig.tsbuildinfo
tsconfig.tsbuildinfo
 
 
vite.config.d.ts
vite.config.d.ts
 
 
vite.config.js
vite.config.js
 
 
vite.config.ts
vite.config.ts
 
 
vitest.config.d.ts
vitest.config.d.ts
 
 
vitest.config.js
vitest.config.js
 
 
vitest.config.ts
vitest.config.ts
 
 

Repository files navigation

⚡ React Vite Setup 2026 🎨

Enterprise-Grade React 19 + Vite 8 + TypeScript + Tailwind CSS v4 Starter Foundation

Live Demo React 19 Vite 8 TypeScript Tailwind CSS v4 Vitest Build Status License MIT

Production-ready frontend architecture with Dual Resizable Sidebars, 48px Right Activity Dock, AI Engineering Chatbox, MCP Integration Explorer, Production-Ready Audit Logs, Live Git Release Telemetry Badge, 30-Color Scheme & 20-Google Font engine, zero-dependency SVG charts, and domain-driven design.

🌐 Explore Live Demo Application

📑 Table of Contents

🌟 Comprehensive Feature Matrix

Category Feature Description Status
🌐 Deployment Live Edge Deployment Optimized Vercel Edge build with gzip compression & asset hashing ✅ Ready
🔖 Git Telemetry Live Commit Badge Navbar badge showing real-time branch, commit hash, date, author & repo link ✅ Ready
🔐 Audit Logs Production-Ready Audit Trail Searchable, filterable security audit log with severity levels, user tracking & export ✅ Ready
↔️ Left Sidebar 60fps Resizable Handle Drag-to-resize (180px–480px), snap auto-collapse (<130px), keyboard step control & localStorage persistence ✅ Ready
🎨 Sidebar Glow Theme-Reactive Hover Sidebar navigation items dynamically glow and illuminate with active theme colors ✅ Ready
📜 Scrollbars Neutral Translucent Bars Subtle scrollbars that remain constant and elegant across all 30 color schemes ✅ Ready
🎯 Right Dock 48px Activity Dock Ultra-compact dock with live pulse indicators for AI Copilot, MCP Tools & Themes ✅ Ready
🤖 AI Chatbox File & Folder Context AI chat with project directory attachments (src/, package.json), prompt pills & model switcher ✅ Ready
🔌 MCP Integration Third-Party Tool Suite Full Model Context Protocol explorer: Servers, Tool Runner, JSON Schema inspector, Config & Logs ✅ Ready
📊 Live Telemetry Web Vitals & FPS Profiler Real-time 60fps graph, JS Heap memory monitor, Core Web Vitals speedometers (LCP, CLS, INP, FCP), DOM depth & Network waterfall ✅ Ready
🪟 Unified Drawers Backdrop Blur Drawers Resizable right panels (320px–750px) with backdrop-blur-[2px] that uniformly blurs the whole screen ✅ Ready
🎨 Color Engine 30 Color Schemes Instant CSS variable switching with Tailwind v4 HSL tokens ✅ Ready
🔤 Typography 20 Google Web Fonts Sans, Serif, Display, and Monospace families loaded dynamically ✅ Ready
🌓 Theme Modes Zero-Flash Light/Dark Head IIFE script + 0ms repaint transition suppressor ✅ Ready
📊 SVG Charts Zero-Dependency Suite AreaChart with bezier curves, DonutChart with hover expansion, MetricSparklines & BarCharts ✅ Ready
⚡ Data Table Enterprise Table Single-line pagination (Page 1 of 2), multi-column sorting, search & selection ✅ Ready
📝 Form Wizard 4-Step Form Wizard Multi-step form with Zod schema validation, required asterisks & responsive layout ✅ Ready
⌨️ Quick Actions Command Palette Cmd+K / Ctrl+K modal to quickly navigate, search commands, and trigger actions ✅ Ready
🛡️ Security & RBAC Permission Guard Role-based component rendering for SUPER_ADMIN, DEVELOPER, VIEWER ✅ Ready
🚨 Error Handling Axios Interceptor Automatic toast alerts on HTTP 400-500 errors + custom 403, 404, 500 error pages ✅ Ready

🔖 Live Git Release Telemetry Badge

A real-time commit badge embedded in the navbar that always shows the current commit — branch, short hash, date, author, and a clickable link to GitHub.

How It Works

The system uses a 3-layer architecture with zero "unknown" fallbacks:

Layer 1 (always available):  git-info.generated.ts  ← static import, written by Vite plugin
Layer 2 (dev auto-refresh):  GET /__git_info__       ← live endpoint, fetched on page load
Layer 3 (manual refresh):    🔄 Refresh button       ← in badge popover, fetches on demand

The git-info-generator Vite plugin runs git log commands at startup and writes the result to src/components/common/git-release/git-info.generated.ts — a real TypeScript file that's imported directly. This means the badge always has data, even before any fetch completes.

Commit Badge Update Scenarios

Situation Badge Updates Via
npm run dev restart Vite plugin regenerates git-info.generated.ts on startup
git commit → browser refresh Auto-fetches /__git_info__ (live endpoint) on next page load
git commit → no page refresh needed Click 🔄 in the badge popover to fetch instantly
npm run build Git info baked into the production bundle at build time
No git / git command fails Graceful message — never shows "unknown"

Badge Popover Features

  • 🌿 Branch name with GitBranch icon
  • # Short commit hash (7 chars) with GitCommit icon
  • 📅 Commit date formatted as YYYY-MM-DD
  • 👤 Author name
  • 💬 Full commit message
  • 📋 Copy full hash to clipboard (one click)
  • 🔗 View on GitHub — opens the exact commit URL
  • 🏠 Repository link — opens the repo root
  • 🔄 Refresh button — fetches latest commit without page reload (dev only)

File Reference

File Role
vite.config.ts Vite plugin: generates git-info.generated.ts on every startup & exposes /__git_info__
git-info.generated.ts Auto-generated — do not edit — listed in .gitignore
use-git-release.ts React hook: imports generated file, optionally refreshes from live endpoint
git-release-badge.tsx Navbar badge component with popover

Note: git-info.generated.ts is in .gitignore — it is regenerated on every npm run dev or npm run build. Never commit it manually.

🔐 Production-Ready Audit Logs

A complete security audit trail with enterprise-grade filtering, searching, and export capabilities available at /audit-logs.

Features

  • Real-Time Event Stream: Animated live feed indicator with pulsating dot — shows events as they happen.
  • Full-Text Search: Instant search across action names, user emails, resource types, IP addresses, and descriptions.
  • Multi-Dimension Filtering:
    • Severity: Critical / High / Medium / Low / Info
    • Action Type: Authentication, Data Access, User Management, System Config, API Access, Security Events
    • Status: Success / Failed / Pending
    • Date Range: From / To date pickers
    • User Email: Filter by specific user
  • Summary KPI Cards: Total events, critical count, failed count, and unique users — all computed live from the current filtered dataset.
  • Paginated Log Table: Compact, sortable table with severity badges, status chips, user avatars, action icons, timestamps, IP addresses, and resource context.
  • Detail Drawer: Slide-over panel showing full event metadata: request ID, session ID, geo-location, user agent, HTTP method, endpoint, duration, and change diff.
  • Export: Download filtered log entries as CSV with one click.
  • Active Filter Tags: Visual pill chips for every active filter with individual clear buttons.

Severity Color System

Level Color Use Case
critical 🔴 Red Account takeover, mass deletion, privilege escalation
high 🟠 Orange Failed logins, unauthorized access attempts
medium 🟡 Yellow Password changes, role modifications
low 🔵 Blue Profile updates, settings changes
info ⚪ Grey Login success, routine data access

↔️ Left Resizable Navigation Sidebar

The primary application sidebar is engineered for speed, customizability, and accessibility:

  • Smooth 60fps Drag-to-Resize: Disables CSS transitions during active mouse/touch drag to eliminate lag, re-enabling smooth CSS animations when toggled via buttons.
  • Smart Snap Collapse: Automatically snaps to collapsed icon mode (64px) when dragged below 130px, and expands automatically when dragged outward.
  • Accessible Keyboard Controls:
    • ArrowLeft / ArrowRight: Step resize width in 16px increments.
    • Home / End: Instantly snap to minimum (180px) or maximum (480px) width.
    • Enter / Space: Reset to default width (240px).
  • Double-Click Reset: Double-clicking the resize handle resets to the default 240px width.
  • Dynamic Theme Hover Glow: Inactive and active sidebar menu items dynamically reflect the active theme's primary color with high-contrast background highlights (hover:bg-primary/10 hover:text-primary).
  • Neutral Scrollbar Styling: Translucent, neutral scrollbars prevent jarring color flashes during theme transitions.

🎯 Right Activity Dock (48px Compact Bar)

A space-efficient 48px vertical dock pinned to the right edge with quick-toggle icons:

  • Forge AI Copilot Button: Features an animated pulsating emerald status indicator.
  • MCP Integration Button: Displays a live badge with the count of active connected servers (e.g. 4).
  • Theme & Font Customizer Button: Quick access to the 30-color scheme and 20-font drawer.
  • Unified Backdrop Blur: Opening any right drawer dims and smoothly blurs the entire viewport, including the left sidebar, main dashboard, and navbar, while keeping the right dock elevated for quick toggling.

🤖 AI Engineering Copilot (Chatbox)

A built-in AI engineering companion designed for modern React & NestJS development workflows:

  • Multi-Model Selector: Switch seamlessly between Gemini 2.5 Pro (2M context), Claude 3.7 Sonnet (Smartest), and GPT-4o (Multimodal).
  • Project File & Directory Attachment:
    • Attach project folders (src/components/layout/, src/hooks/, src/features/) and source files (package.json, ui-store.ts, schema files) directly to prompts.
    • Extension-aware icon chips with size badges and 1-click removal.
  • Quick Prompt Carousel:
    • ⚡ Refactor Hook: Refactor logic into reusable custom TypeScript React hooks.
    • 🧪 Add Vitest Unit Test: Generate unit tests with 100% edge case coverage.
    • 🔧 Inspect MCP Tools: List connected MCP tools with parameter schemas.
    • 🐛 Debug Errors: Analyze potential runtime exceptions and memory leaks.
  • Formatted Message Stream: Syntax-highlighted code blocks with 1-click clipboard copy, token usage badges, message regeneration, and auto-scrolling.

🔌 Model Context Protocol (MCP) Integration

A complete third-party Model Context Protocol suite supporting AI Agent tool execution:

  • Tab 1: Connected Servers:
    • Monitor health, status, and ping latency for installed servers: filesystem-server, postgresql-server, github-server, brave-search-server, browser-automation-mcp.
    • Toggle enable/disable switches and jump straight into tool execution.
  • Tab 2: Interactive Tool Runner:
    • Inspect JSON schema parameter types, descriptions, and required fields.
    • Edit arguments in a real-time JSON editor and execute simulated tools with formatted JSON output, latency timers, and error validation.
  • Tab 3: Config JSON (mcp_config.json):
    • Standard Model Context Protocol JSON config generator with 1-click copy for Antigravity IDE, Claude Desktop, and VS Code.
  • Tab 4: Real-time Event Logs:
    • Live activity stream monitoring heartbeat pings, schema discoveries, and tool calls.

📊 Live Telemetry & Core Web Vitals Profiler

A developer-first diagnostic suite delivering real-time performance and web vitals telemetry:

  • Live 60fps & Memory Graphs: Animated real-time SVG streaming charts tracking Frame Rate (FPS) against the 16.6ms frame budget and JS Heap Memory allocation.
  • Core Web Vitals Speedometers: Visual circular gauge meters for:
    • LCP (Largest Contentful Paint) — Target: <2.5s
    • CLS (Cumulative Layout Shift) — Target: <0.1
    • INP (Interaction to Next Paint) — Target: <200ms
    • FCP (First Contentful Paint) — Target: <1.8s
    • TTFB (Time to First Byte) — Target: <800ms
  • DOM Tree & Listener Analyzer: Live DOM node counter, tree depth analyzer, and event listener density inspector.
  • Network Waterfall & Gzip Efficiency: Bundle transfer breakdown comparing raw vs gzipped bytes with timing bars.

🎨 30 Curated Color Schemes Catalog

Each color scheme dynamically updates the primary, secondary, accent, and background tokens across the entire application without page refreshes:

🔴 1. Crimson & Pitch Black   (#B4121B / #000000 - Flagship Default)
🌸 2. Pink, Teal & Cream      (#FF78AC / #A8D5E3)
🍊 3. Orange & Warm Yellow     (#FF921C / #ECA427)
🌺 4. Fuchsia & Dark Grey     (#D8125B / #2C2E39)
🌲 5. Green & Red Lawn        (#205A28 / #C72B32)
🍦 6. Cream & Black Studio    (#FFFDF2 / #000000)
🖤 7. Classic Monochrome      (#000000 / #FFFFFF)
🍷 8. Dark Pink & Soft White  (#970747 / #FFFFFF)
🌊 9. Ocean Blue & Mint       (#106EBE / #0FFCBE)
🌴 10. Wildlife Green         (#009B4D / #FFCC00)
💖 11. Malachite & Hot Pink   (#31EC56 / #EF036C)
⚡ 12. Golf Yellow-Green      (#BAFF39 / #6E6E6E)
🛸 13. Tech Drone Blue        (#00ABE4 / #E9F1FA)
🟢 14. Electric Lime          (#00DD00 / #FFFFFF)
💼 15. Luxury Beige           (#DDD0C8 / #323232)
🍇 16. Pastel Purple          (#C5ADC5 / #B2B5E0)
⚓ 17. Logistics Navy         (#01257D / #00FFFF)
🎆 18. Stripe Dark Blue       (#6366F1 / #111439)
💎 19. Blue-Grey Lagoon       (#96C2DB / #E5EDF1)
🌶️ 20. Bright Red & Smoke     (#E7473C / #F0F0F0)
👑 21. Classic Blue & Gold    (#178582 / #BFA181)
🟡 22. Banky Yellow & Blue    (#1D63FF / #FFCE32)
⚜️ 23. Royal Blue & Gold      (#002349 / #957C3D)
🟣 24. Tyrian Purple          (#4F0341 / #FFFFFF)
🍆 25. Royal & Red Eggplant   (#4A8BDF / #A0006D)
🏎️ 26. Harley Orange          (#DD2E18 / #FFAB00)
🌅 27. Sunset Orange          (#FF5841 / #C53678)
🍫 28. Sunglow & Chocolate    (#FFD43A / #582C12)
🫐 29. Deep Redcurrant        (#8E0D3C / #1D1842)
🏺 30. Sorrell & Beige        (#99775C / #EAE7DD)

🔤 20 Google Fonts Dynamic Loader

Toggle application-wide typography on the fly with live preview text:

  • Sans-Serif: Inter, Roboto, Poppins, Outfit, Plus Jakarta Sans, Montserrat, DM Sans, Manrope, Work Sans, Sora
  • Serif: Playfair Display, Cinzel, Lora, Merriweather
  • Display: Space Grotesk, Syne, Dancing Script
  • Monospace: Fira Code, Space Mono, JetBrains Mono

📊 Zero-Dependency SVG Chart Suite

Built directly with native React SVG elements for maximum performance and 0kb bundle bloat:

  • AreaChart: Smooth bezier curves with gradient fills, gridlines, and crosshair tooltip hover tracking.
  • DonutChart: Ring chart with dynamic percentage arcs, hover arc expansion, and central KPI counters.
  • MetricSparkline: Ultra-compact trajectory sparklines for dashboard KPI cards.
  • BarChart: Monthly bar comparison charts with responsive tooltips.

⚡ Enterprise Data Tables & Filtering

  • Single-Line Pagination: Modern Page 1 of 2 pagination with previous/next controls and row count selector.
  • Multi-Column Sorting: Clickable header sorting with ascending/descending indicators.
  • Global Search & Filter Tabs: Instant client-side filtering across all columns.
  • Batch Row Selection: Select all or individual rows with floating action bar.
  • Detail Drawer: Slide-over drawer for viewing and editing full record details.

📝 Full-Width Multi-Step Form Wizard

  • 4 Guided Steps: Personal Information ➔ Account Setup ➔ Business Details ➔ Final Review & Confirmation.
  • Zod Schema Validation: Real-time validation with inline error messages and required field asterisks.
  • Visual Progress Bar: Step circles with checkmarks and active progress indicators.

🛡️ Error Handling, RBAC & Interceptors

  • Axios HTTP Error Interceptor: Intercepts 400 Bad Request, 401 Unauthorized, 403 Forbidden, 404 Not Found, and 500 Server Errors, automatically displaying rich toast notifications.
  • Permission Guard Component: <PermissionGuard permission="SUPER_ADMIN"> wraps sensitive buttons and routes.
  • Custom Error Pages:
    • /403 — Access Forbidden / Role Restricted Page
    • /404 — Route Not Found Page
    • /500 — Server Exception Page

⌨️ Global Command Palette (Cmd+K)

Press Cmd+K (macOS) or Ctrl+K (Windows/Linux) from anywhere to open the modal command palette:

  • Search pages, navigation links, and settings.
  • Switch themes and color palettes directly from the search bar.
  • Filter by category with keyboard navigation (↑, ↓, Enter, Escape).

🛠️ Tech Stack & Requirements

Requirement Version Recommended
Node.js >= 18.18.0 v20.x or v22.x
npm >= 9.x v10.x
Framework React 19.2 React 19
Bundler Vite 8.2 Vite 8
Styling Tailwind CSS v4.0 Tailwind CSS v4
Testing Vitest 3.0 Vitest 3

🚀 Quick Start & Development Commands

# 1. Install dependencies
npm install

# 2. Start local development server with Vite HMR
#    → Vite plugin auto-generates git-info.generated.ts with current commit
npm run dev

# 3. Run TypeScript typecheck across all files & tests
npm run typecheck

# 4. Run Vitest unit tests
npm test

# 5. Build for production (TypeScript compile + Vite bundle)
#    → git commit info is baked into the bundle at build time
npm run build

# 6. Preview production bundle locally
npm run preview

Git Release Badge — Update Guide

# After committing new code, the badge updates automatically via:

# Option A: Restart dev server (regenerates git-info.generated.ts)
npm run dev

# Option B: Refresh the browser page (auto-fetches /__git_info__ live endpoint)
# → No restart needed, just Ctrl+R / F5

# Option C: Click the 🔄 Refresh button inside the badge popover
# → Updates badge instantly without any page reload

🗺️ Complete Route Sitemap

Route Page Component Description
/login LoginPage User Authentication with Form Validation
/forgot-password ForgotPasswordPage Password Reset Request Flow
/reset-password ResetPasswordPage New Password Confirmation Flow
/dashboard DashboardPage Executive Overview Analytics & KPI Sparklines
/reports ReportsPage Advanced Data Analytics & SVG Area/Donut Charts
/users UsersPage User Management Data Table with Filters & Pagination
/audit-logs AuditLogsPage Security Audit Trail & Event Timeline
/forms/wizard MultiStepFormPage 4-Step Full-Width Form Wizard
/design-system DesignSystemPage Interactive UI Component Catalog Playground
/settings SettingsPage User Profile Preferences & Theme Customizer
/403 ForbiddenPage 403 Forbidden Access Page
/404 NotFoundPage 404 Route Not Found Page
/500 ServerErrorPage 500 Internal Server Error Page

📚 Documentation Suite

  • 🏛️ ARCHITECTURE.md — System Architecture, Folder Structure & State Management.
  • ⚙️ ENVIRONMENT.md — Environment Variable Schemas & Base API Configuration.
  • 🚀 DEPLOYMENT.md — Docker, NGINX, Vercel & Netlify Deployment Guides.
  • 🤝 CONTRIBUTING.md — Code Style Guidelines, Git Hooks & Conventional Commits.

Built with ❤️ for enterprise React developers

About

Production-ready React 19 + Vite 8 + TS + Tailwind CSS v4 starter with 30 color schemes, 20 Google fonts, SVG charts & zero-flash theme persistence.

react-vite-setup-2026.vercel.app

Topics

dark-mode-themedashboard-starterenterprise-templatefrontend-boilerplatereact19react19-starterresponsive-designreusable-componentstailwindcss-v4typescriptvite8

Resources

Readme
MIT license

Contributing

Contributing
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages