Freshi is a comprehensive freshness tracking and supply chain management platform designed for food and ingredient distributors. The platform provides real-time monitoring of shipment freshness, temperature tracking, partner management, and IoT sensor integration.

Built with the following modern stack:

• Framework - Next.js 15
• Language - TypeScript
• Auth - Clerk
• Error tracking
• Styling - Tailwind CSS v4
• Components - Shadcn-ui
• Schema Validations - Zod
• State Management - Zustand
• Search params state manager - Nuqs
• Tables - Tanstack Data Tables • Dice table
• Forms - React Hook Form
• Command+k interface - kbar
• Linting - ESLint
• Pre-commit Hooks - Husky
• Formatting - Prettier

• Real-time Freshness Tracking: Monitor FreshScore metrics across all shipments with predictive analytics
• Shipment Management: Track in-transit loads with temperature, humidity, and location monitoring
• Inventory Management: Manage food and ingredient inventory with quantity and unit tracking
• Partner Management: Manage relationships with retailers and food banks, including FreshScore thresholds and delivery history
• IoT Sensor Integration: Monitor and manage temperature, humidity, and location sensors with support for Emerson, Samsara, and Tive integrations
• Route Visualization: Interactive Mapbox maps showing shipment routes and real-time tracking
• Data Sharing Controls: Granular permissions for sharing freshness data with partners

src/
├── app/ # Next.js App Router directory
│ ├── (auth)/ # Auth route group
│ │ ├── (signin)/
│ ├── (dashboard)/ # Dashboard route group
│ │ ├── layout.tsx
│ │ ├── loading.tsx
│ │ └── page.tsx
│ └── api/ # API routes
│
├── components/ # Shared components
│ ├── ui/ # UI components (buttons, inputs, etc.)
│ └── layout/ # Layout components (header, sidebar, etc.)
│
├── features/ # Feature-based modules
│ ├── feature/
│ │ ├── components/ # Feature-specific components
│ │ ├── actions/ # Server actions
│ │ ├── schemas/ # Form validation schemas
│ │ └── utils/ # Feature-specific utilities
│ │
├── lib/ # Core utilities and configurations
│ ├── auth/ # Auth configuration
│ ├── db/ # Database utilities
│ └── utils/ # Shared utilities
│
├── hooks/ # Custom hooks
│ └── use-debounce.ts
│
├── stores/ # Zustand stores
│ └── dashboard-store.ts
│
└── types/ # TypeScript types
└── index.ts

• Node.js 18+ and pnpm installed
• Clerk account for authentication
• Mapbox account (for map visualizations)
• Sentry account (optional, for error tracking)

1. Clone the repository:

git clone <repository-url>
cd freshi

2. Install dependencies:

pnpm install

3. Set up environment variables:

cp env.example.txt .env.local

4. Configure your .env.local file with the following required variables:

   • NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY - Clerk publishable key
   • CLERK_SECRET_KEY - Clerk secret key
   • NEXT_PUBLIC_MAPBOX_PUBLIC_TOKEN - Mapbox public token for map visualizations
   • NEXT_PUBLIC_SENTRY_DSN - Sentry DSN (optional)
   • SENTRY_AUTH_TOKEN - Sentry auth token (optional)

5. Run the development server:

pnpm run dev

You should now be able to access the application at http://localhost:3000.

Refer to env.example.txt for all available environment variables. Key configurations include:

• Clerk: Required for authentication and user management
• Mapbox: Required for shipment route visualizations
• Sentry: Optional for error tracking and monitoring

• FreshScore Calculation: Real-time freshness scoring based on temperature, humidity, and time in transit
• Map Integration: Mapbox integration for visualizing shipment routes and tracking
• IoT Sensor Support: Integration with Emerson, Samsara, and Tive sensor platforms
• Data Visualization: Recharts for analytics and freshness metrics
• Real-time Updates: Live shipment tracking and status updates

The project follows a feature-based organization structure for better maintainability and scalability.