React Component Architecture
This diagram outlines the structure and dependencies of the React components in the Food Truck Nerdz application.
graph TD
subgraph Pages
Layout(app/layout.tsx)
Home(app/page.tsx)
end
subgraph Layout Components
Header(components/layout/header.tsx)
end
subgraph Feature Components
SearchCard(components/food-trucks/search-card.tsx)
LocationCard(components/food-trucks/location-card.tsx)
CheckinForm(components/checkin/checkin-form.tsx)
MapContainer(components/map/map-container.tsx)
end
subgraph UI Components
Notifications(components/ui/notification.tsx)
Button(components/ui/button.tsx)
Input(components/ui/input.tsx)
Card(components/ui/card.tsx)
Select(components/ui/select.tsx)
Sheet(components/ui/sheet.tsx)
Sonner(components/ui/sonner.tsx toast)
Badge(components/ui/badge.tsx)
end
subgraph Stores
UIStore(store/ui-store.ts)
LocationStore(store/location-store.ts)
FoodTrucksStore(store/food-trucks-store.ts)
CheckinStore(store/checkin-store.ts)
end
subgraph External Libraries/SDKs
Next(Next.js - Link, Image)
Lucide(Lucide Icons - Menu, Search, MapPin)
RadarSDK(Radar SDK)
end
Layout --> Notifications
Home --> Layout
Home --> Header
Home --> SearchCard
Home --> LocationCard
Home --> CheckinForm
Home --> MapContainer
Home --> Notifications
Header --> Button
Header --> Sheet
Header --> Next
Header --> Lucide
SearchCard --> Card
SearchCard --> Input
SearchCard --> Button
SearchCard --> Lucide
SearchCard --> FoodTrucksStore
LocationCard --> Card
LocationCard --> Input
LocationCard --> Button
LocationCard --> Lucide
LocationCard --> LocationStore
LocationCard --> UIStore
CheckinForm --> Card
CheckinForm --> Input
CheckinForm --> Button
CheckinForm --> Select
CheckinForm --> Sonner
CheckinForm --> CheckinStore
CheckinForm --> UIStore
MapContainer --> Card
MapContainer --> LocationStore
MapContainer --> FoodTrucksStore
MapContainer --> UIStore
MapContainer --> RadarSDK
Notifications --> UIStore
UIStore --> Sonner
classDef page fill:#f9f,stroke:#333,stroke-width:2px;
classDef layout fill:#ccf,stroke:#333,stroke-width:2px;
classDef feature fill:#cfc,stroke:#333,stroke-width:2px;
classDef ui fill:#ffc,stroke:#333,stroke-width:2px;
classDef store fill:#fcc,stroke:#333,stroke-width:2px;
classDef external fill:#eee,stroke:#333,stroke-width:2px;
class Layout,Home page;
class Header layout;
class SearchCard,LocationCard,CheckinForm,MapContainer feature;
class Notifications,Button,Input,Card,Select,Sheet,Sonner,Badge ui;
class UIStore,LocationStore,FoodTrucksStore,CheckinStore store;
class Next,Lucide,RadarSDK external;
(2025-04-13)
Notes:
-
This diagram is based on the files analyzed. There might be other components or dependencies not captured here.
-
Dependencies for UI components like
Badgeare included even if not directly seen in the analyzed parent components, assuming they exist for completeness. -
Some dependencies between stores and UI components (like
UIStore→SonnerorNotifications→UIStore) are inferred based on common patterns. -
You can view this diagram using a Markdown previewer that supports Mermaid syntax (like the one built into VS Code or online tools).
-
Source file:
images/React Component Architecture-2025-04-13.mmd