✦ Preact Feature Flag Manager

A premium, client-side SaaS dashboard template for managing feature toggles, rollouts, and environments.

---

✨ Highlights

• Premium SaaS UI: Features a meticulously crafted dark mode aesthetic with custom grid backgrounds, radial gradients, and micro-interactions.
• Custom Components: Includes from-scratch Tailwind components like animated toggle switches and dynamic rollout progress bars without relying on heavy external UI libraries.
• State-Driven Design: The interface instantly reacts to feature toggles, graying out inactive elements and highlighting live features with vibrant indigo accents.
• Responsive Layout: A mobile-first approach with a collapsible sidebar and fluid grid cards that scale perfectly from phones to ultrawide monitors.

🧱 Project Structure

src/
|-- main.tsx          # Application entry point
`-- app.tsx           # Main dashboard layout, mock data, and custom UI components

🛠️ Tech Stack

• Preact 10 with Vite 6
• Tailwind CSS 4 for utility-first styling
• lucide-preact for clean, scalable iconography

🚀 Local Development

npm install
npm run dev

Open http://localhost:5173 to view the dashboard in your browser. The UI is currently populated with mock data for immediate layout testing.

🔌 Extension Notes & Nuances

• NOTE: Backend Integration: This project is designed as a frontend template. To make it functional, the toggleFlag function and the initial flags state inside app.tsx should be connected to a real API (e.g., using fetch to update a PostgreSQL database or a Redis store).
• NOTE: CSS Grid Pattern: The custom background grid is defined purely in CSS inside src/index.css. You can adjust the background-size or opacity to change the "density" of the engineering grid.

🧪 Build & Checks

npm run build
npm run preview

🌐 Vercel Deployment

The repository includes a highly optimized vercel.json for Vite static SPA deployment, ensuring perfect client-side routing.

{
  "$schema": "https://openapi.vercel.sh/vercel.json",
  "framework": "vite",
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/index.html"
    }
  ]
}

📄 License

MIT License. See LICENSE.