Skip to main content

🎨 Frontend Architecture

The FirstBreath Showcase dashboard is built with modern web technologies to provide a responsive and highly interactive user experience.

Technology Stack​

  • Framework: Next.js 14 (App Router)
  • Language: TypeScript
  • Styling: Tailwind CSS
  • UI Library: shadcn/ui (Radix Primitives)
  • Icons: Lucide React
  • Charts: Recharts

Project Structure​

We follow the Next.js App Router conventions:

app/
├── (auth)/             # Auth routes (login, register) - Grouped layout
├── (dashboard)/        # Protected routes (requires login)
│   ├── dashboard/      # Main overview
│   ├── cameras/        # Camera management
│   └── layout.tsx      # Dashboard Shell (Sidebar + Navbar)
├── api/                # Next.js API Routes (Proxy to Backend)
├── layout.tsx          # Root layout (Providers: Theme, Auth)
└── page.tsx            # Landing page

Core Concepts​

Server vs Client Components​

We prioritize Server Components for data fetching to reduce client bundle size and improve SEO.

  • Server Components (page.tsx): Fetch data directly from the Backend API or Database.
  • Client Components ("use client"): Used only for interactivity (Forms, Charts, Buttons).

Design System​

We don't reinvent the wheel. We use ShadCN UI which provides copy-pasteable accessible components. All components are in components/ui.

Rule: Do not modify components/ui directly unless you are customizing the global theme. Use components/feature-name for business-specific components.