Skip to main content

Frontend Architecture

Tech Stack​

  • Framework: Next.js 14 (App Router)
  • Language: TypeScript + React
  • UI: Tailwind CSS + Custom Components
  • State Management: React Context + SWR (data fetching)
  • Real-time: MQTT.js (WebSocket MQTT client)
  • i18n: next-intl

Page Structure​

Dashboard Section (/dashboard)​

/dashboard/(overview)/      → Main analytics dashboard
  ├─ Cards (stats overview)
  ├─ MediaStatsComponent (upload metrics)
  ├─ OrderChart (sales trends)
  └─ ProductChart (inventory)

/dashboard/orders/          → Order management
/dashboard/products/        → Product catalog
/dashboard/categories/      → Category management
/dashboard/blogs/           → Blog content
/dashboard/users/           → User management

Public Pages​

/admin/                     → Admin interface
/(overview)/                → Homepage
/products/                  → Product listing
/categories/                → Category browsing
/shop/                      → Shopping interface

Component Architecture​

Providers (State Management)​

  • UserProvider: Authentication state, current user info
  • WishlistProvider: Saved wishlist items
  • CartContext: Shopping cart state
  • MobileFilterContext: Mobile filter UI state
  • NotificationProvider: Toast notifications
  • LoadingProvider: Global loading state
  • DataProvider: Initial data loading
  • FilterProvider: Product filtering state

Key Components​

Device Management

  • FeedCard.tsx: Display individual feed (sensor)
  • FeedChart.tsx: Time-series visualization
  • FeedValuesDisplay.tsx: Data point rendering
  • AdminTable.tsx: Device management table

Navigation

  • NavBar.tsx: Main navigation
  • AdminCollapsibleSidebar.tsx: Admin sidebar
  • DashboardCollapsibleSidebar.tsx: Dashboard sidebar
  • MobileMenuButton.tsx: Mobile navigation
  • UserDropdown.tsx: User account menu

E-commerce

  • CartDropdown.tsx: Shopping cart preview
  • WishlistDropdown.tsx: Saved items
  • ProductTabsSection.tsx: Product details
  • TrendingProducts.tsx: Featured products
  • CategoryList.tsx: Browse categories
  • PaymentCountdown.tsx: Order timer

Forms

  • login-form.tsx: User authentication
  • signup-form.tsx: Registration
  • editFormDialog.tsx: Edit dialogs
  • createUserDialog.tsx: User creation

State Management Patterns​

User Context​

{
  user: CurrentUser | null,
  isLoading: boolean,
  error: any,
  refreshUser: () => void
}

// Polling strategy: Monitor cookie changes every 1s
// Revalidate on token update

SWR Data Fetching​

// Minimal polling, manual refresh
const { data, error, isLoading, mutate } = useSWR(key, fetcher, {
  revalidateOnFocus: false,
  revalidateOnReconnect: false,
  dedupingInterval: 5000,
  refreshInterval: 0,
});

MQTT Client Context​

{
  client: MqttClient | null,
  isConnected: boolean,
  isConnecting: boolean,
  error: string | null,
  messages: MqttMessage[],
  connect: (brokerUrl, options) => Promise<void>,
  publish: (topic, message, qos) => Promise<void>,
  subscribe: (topic, qos) => void,
  unsubscribe: (topic) => void,
  clearMessages: () => void
}

// Auto-reconnect with exponential backoff (max 5 attempts)

API Service Layer​

Services: (All located in /services)

  • apiClient.ts: HTTP client wrapper (axios-based)
  • authService.ts: Login/logout/verification
  • deviceService.ts: Device CRUD, list, update
  • feedService.ts: Feed management, data insertion
  • userService.ts: User profile, preferences
  • cartService.ts: Shopping cart operations
  • orderService.ts: Order creation, tracking
  • productService.ts: Product search, filters
  • dashboardService.ts: Analytics data
  • mqttAuthService.ts: MQTT credential generation
  • groupService.ts: Device group operations

Standard Pattern:

const withAuthHeader = (token?: string) => ({
  headers: { "x-auth-token": token || Cookies.get("access_token") },
});

export const listDevices = async (params?, token?) => {
  const res = await apiClient.get("/devices/?...", withAuthHeader(token));
  return res.data; // { devices: [...] }
};