FarmRisk
Welcome to the FarmRisk frontend repository. This project is a Next.js application designed to provide high-resolution remote sensing, satellite field mapping, and localized climate data backed by predictive AI insights.
This README serves as a guide for team members to understand the architecture, routing mechanics, and code organization.
Project Architecture & Folder Structure
We use a standard, single Next.js repository to keep our landing page, dashboard console, components, and API routes completely unified.
Below is a breakdown of our current directory tree:
├── app/ # Next.js App Router (Routing & Pages)
│ ├── api/ # Secure serverless API routes
│ │ ├── ai/ # Secure proxy endpoints for LLM insights & chat
│ │ └── weather/ # Secure proxy endpoints for weather API data
│ ├── constants/ # Centralized copy, titles, and layout configurations
│ │ └── content.ts # Dynamic content JSON arrays (Sidebar navigation, headers)
│ ├── dashboard/ # The main, authenticated application console
│ │ ├── layout.tsx # Persistent shell containing the global Sidebar + Top Nav
│ │ ├── page.tsx # Overview sub-page (at /dashboard)
│ │ ├── map/ # Satellite map sub-page (at /dashboard/map)
│ │ ├── profile/ # User profile settings (at /dashboard/profile)
│ │ ├── settings/ # Extended console settings
│ │ └── weather/ # Weather analytics tab
│ ├── globals.css # Global Tailwind CSS configurations
│ ├── layout.tsx # Global HTML root layout wrapper
│ └── page.tsx # Root public-facing Landing Page
├── components/ # Reusable React components
│ ├── app-sidebar.tsx # Our main sidebar wrapper (dynamically built via JSON config)
│ └── ui/ # Low-level shadcn/ui structural primitives
├── hooks/ # Custom global React hooks
├── lib/ # Helper frameworks and utilities (e.g., clsx styling helpers)
└── types/ # Global TypeScript definitions and type guards
How Routing and Layouts Work
1. Unified App Router
Everything inside the app/ directory automatically maps to a URL route.
- Landing Page: Governed directly by
app/page.tsx (the root /).
- Console Dashboard: Handled inside
app/dashboard/. Sub-folders like map/ or profile/ instantly resolve to /dashboard/map and /dashboard/profile
2. Nesting with layout.tsx
We utilize Next.js layouts to prevent expensive, jarring UI re-renders:
app/dashboard/layout.tsx serves as the permanent frame for our internal tools.- It contains our structural
<AppSidebar /> component.
- When a user changes tabs (e.g., moving from Overview to Farm Map), the sidebar remains completely static while the nested page content seamlessly swaps out inside the layout's
{children} prop.
Configuration-Driven Copy & Sidebar
To ensure long-term maintainability and prevent copy text or routes from cluttering up layout styles, all content is strictly data-driven.
app/constants/content.ts
This file holds our global string constants (titles, descriptions) as well as the layout configurations for our navigation links.
Dynamic Sidebars
Instead of hardcoding layout links inside the TSX files, components/app-sidebar.tsx imports configuration JSON arrays directly from content.ts. It iterates over them dynamically using a .map() loop, passing corresponding key routes and matching icon names.
- To add a new menu item: Simply insert a new object into the navigation array inside
content.ts. You do not need to rewrite any layout markup.
Technology Stack Overview
- Framework: Next.js (React App Router with Server-Side Rendering capabilities).
- Styling: Tailwind CSS (configured via
app/globals.css).
- Design Elements:
shadcn/ui components (stored locally inside components/ui/ so we can customize them fully).
- Package Runner: Bun (
bun.lock).
Moving Forward
If you are adding a feature:
- Put the visual layout sub-page inside its respective
app/dashboard/<feature-name>/page.tsx folder.
- Append its navigation properties (title, path mapping, and custom lucide icon reference) directly inside
app/constants/content.ts to reveal it automatically on the UI console
