🚀 Frontend Folder Structure

1. Overview

The frontend folder is setup with the following structure:

frontend/
├── package.json
├── index.html
├── tsconfig.json
├── vite.config.ts
├── public/                      # Static assets
└── src/
    ├── main.tsx                 # Application entry point
    ├── components/              # Reusable UI components
    │   ├── DashboardHeader.tsx
    │   ├── ErrorScreen.tsx
    │   ├── LoadingScreen.tsx
    │   ├── ManagementGrid.tsx
    │   ├── QuickActions.tsx
    │   ├── RecentOrders.tsx
    │   └── index.ts
    ├── pages/                   # Main application pages
    │   ├── App.tsx              # Main application wrapper
    │   ├── Dashboard.tsx        # Dashboard page
    │   └── index.ts
    ├── services/                # API and business logic
    │   ├── dashboardAPI.ts      # Dashboard API service
    │   └── index.ts
    ├── styles/                  # CSS and styling
    │   └── styles.css
    └── types/                   # TypeScript definitions
        ├── dashboard.ts         # Dashboard-related types
        └── index.ts

2. Individual summary

Below are short explanations for the frontend files and folders shown above.

• package.json — NPM manifest listing dependencies and scripts (dev, build, preview).

• index.html — Vite entry HTML that mounts the React app and injects compiled assets.

• tsconfig.json — TypeScript compiler configuration (path aliases, strictness settings).

• vite.config.ts — Vite configuration (plugins, dev server options, build output).

• public/ — Static assets (images, icons, manifest) served as-is.

• src/main.tsx — React application bootstrap: mounts the top-level App component and sets up providers (routing, any context providers).

• src/components/ — Reusable UI building blocks used across different pages:

  • DashboardHeader.tsx — header area showing store info and quick stats.
  • ErrorScreen.tsx — UI shown when an operation (API call) fails.
  • LoadingScreen.tsx — global loading indicator used while async data is fetched.
  • ManagementGrid.tsx — layout component for dashboard widgets and cards.
  • QuickActions.tsx — small action tiles (shortcuts) that trigger common flows.
  • RecentOrders.tsx — component to list recent orders in the dashboard.
  • index.ts — barrel file exporting components for easier imports.

• src/pages/ — Higher level pages (compose components and implement page logic):

  • App.tsx — application wrapper that defines routes and shared layout.
  • Dashboard.tsx — page that loads dashboard data, handles loading/error states and renders components.
  • index.ts — page exports / helper routing helpers.

• src/services/ — API clients and small business-logic helpers:

  • dashboardAPI.ts — functions that call backend endpoints (/api/dashboard, vendor routes) and normalize responses.
  • index.ts — exports for services or shared utilities.

• src/styles/ — global CSS and theme variables (styles.css) used by components and pages.

• src/types/ — TypeScript type definitions and interfaces to ensure consistent data shapes across components and services:

  • dashboard.ts — types for dashboard payloads (store info, stats, orders, quick actions).
  • index.ts — central export of public types used throughout the app.