Yakap

Admin dashboard with a public-facing landing page, built with ASP.NET 10 Blazor Server and Tailwind CSS v4.

---

Tech Stack

• ASP.NET 10 Blazor Server
• Tailwind CSS v4 — utility styling, layout structure, and design tokens
• Semantic HTML5 — custom components (Charts, Tables, Feed)
• MSSQL — data layer via external API

---

Getting Started

Prerequisites

• .NET 10 SDK
• Node.js

Run the app

dotnet watch

Run Tailwind

npm run css:watch

Dev server runs at http://localhost:5050.

---

Project Structure

yakap/
├── wwwroot/
│   └── css/
│       ├── input.css       # Tailwind v4 source + design tokens
│       └── tailwind.css    # Generated output
│
├── Components/
│   ├── Layout/
│   │   ├── MainLayout.razor    # Dashboard shell (Pure Tailwind)
│   │   ├── GuestLayout.razor   # Marketing shell (Pure Tailwind)
│   │   └── AuthLayout.razor    # Centered auth shell
│   │
│   ├── Pages/
│   │   ├── Guest/          # /, /about, /pricing, /contact
│   │   ├── Auth/           # /login, /register
│   │   └── Dashboard/      # /dashboard, /dashboard/*
│   │
│   └── Shared/
│       ├── Guest/          # Hero, Features, Pricing sections
│       ├── UI/             # StatCard, ThemeToggle, etc.
│       └── Dashboard/      # DataTable, ChartWidget, etc.
│
├── Services/               # Typed HTTP clients for MSSQL API
└── Models/                 # DTOs

---

Layout System

Layout	Routes	Styling
GuestLayout	/, /about, /pricing, /contact	Tailwind
AuthLayout	/login, /register	Tailwind
MainLayout	/dashboard/*	Tailwind

Each page declares its layout via @layout at the top. MainLayout is the default set in Routes.razor.

---

Design System

Token	Hex	Role
Brand	#1a02c9	Brand, CTAs
Text	#1b1b1b	Primary text
Surface	#ffffff	Card backgrounds

Tokens are defined in wwwroot/css/input.css using Tailwind v4's @theme {}. Semantic variables (e.g. --color-background, --color-surface) switch between :root (light) and .dark (dark mode).

---

Dark Mode

• Toggle button: ThemeToggle.razor (Pure Tailwind implementation)
• Persistent state via localStorage and AppThemeState.
• Script loads before blazor.web.js to prevent flash on load.

---

Key Notes

• Zero UI Libraries: The project uses pure Tailwind CSS for total design freedom and performance.
• @rendermode InteractiveServer is set on <Routes /> in App.razor — not on layouts.
• Layouts must not declare a render mode (causes RenderFragment serialization error).
• Tailwind v4 has no tailwind.config.js — all configuration lives directly in input.css.