Technology Stack
Relevant source files
The following files were used as context for generating this wiki page:
The Vinesight application is a Progressive Web App (PWA) built on a modern, full-stack JavaScript architecture. It is designed to serve as a digital companion for grape farmers, providing scientific calculators, record-keeping, and AI-powered insights. The technology stack is chosen to support a rich user experience, real-time data synchronization, offline capabilities, and advanced AI features.
The stack leverages Next.js for the frontend and backend, Supabase for the database and authentication, and a variety of AI services for its intelligent features. The entire application is written in TypeScript, ensuring type safety and maintainability.
Sources: AGENTS.md:10-12, context/PRD.md:203-217
High-Level Architecture
The application follows a client-server model where the Next.js application serves as both the user interface and the API layer. It communicates with a Supabase backend for data persistence and user authentication, and integrates with external AI services for advanced analytics and conversational AI.
The following diagram illustrates the major components of the Vinesight technology stack.
Core Framework and Language
Framework: Next.js
Vinesight is built using Next.js 15, leveraging the App Router for its routing and layout architecture. This provides server-side rendering (SSR) and static site generation (SSG) capabilities, which are crucial for performance and SEO. The project is configured to use Turbopack for the development server to accelerate build times.
Sources: AGENTS.md:10, package.json:37, README.md:1-2
Language: TypeScript
The entire codebase is written in TypeScript 5. This ensures type safety, improves developer experience with better autocompletion, and helps prevent common runtime errors.
Sources: AGENTS.md:10, package.json:69
Runtime: React
The user interface is built with React 19, utilizing its latest features for building functional components and managing state.
Sources: AGENTS.md:10, package.json:40
User Interface (UI)
The UI stack is designed for rapid development of a modern, responsive, and accessible interface.
Sources: AGENTS.md:12
Component Library: shadcn/ui
The project uses shadcn/ui, which is a collection of reusable UI components built on top of Radix UI and styled with Tailwind CSS. This is not a traditional component library but rather a set of components that can be copied into the project and customized.
Sources: AGENTS.md:12, package.json:67
Styling: Tailwind CSS
Tailwind CSS 4 is used for all styling. It's a utility-first CSS framework that allows for building custom designs directly in the markup. The cn() utility is used for conditionally applying classes.
Sources: AGENTS.md:12, 26, package.json:68
Headless Components: Radix UI
Underlying shadcn/ui, Radix UI provides a set of unstyled, accessible, and functional primitive components for building the UI. Dependencies include @radix-ui/react-slot, @radix-ui/react-dialog, and others.
Sources: AGENTS.md:12, package.json:18-30
Fonts
The application utilizes several fonts via next/font for optimization:
- Geist (Sans & Mono)
- Montserrat
- Merriweather
- Source Code Pro
Sources: src/app/layout.tsx:2-23
Backend and Database
Database: Supabase
Vinesight uses Supabase as its backend-as-a-service platform. This provides a PostgreSQL database, authentication, and auto-generated APIs. The @supabase/ssr and @supabase/supabase-js libraries are used for server-side and client-side interactions with Supabase.
Sources: AGENTS.md:11, package.json:31-32
Security: Row Level Security (RLS)
The Supabase database is configured with Row Level Security (RLS) enabled. This is a critical security feature that ensures users can only access and modify data they own. Policies are defined in SQL to enforce these rules at the database level.
The diagram below shows a simplified ERD for key tables with RLS enabled.
Sources: AGENTS.md:11, 29, CLAUDE.md:27-100
Artificial Intelligence (AI) and Machine Learning
AI is a core component of Vinesight, providing features like disease detection, a chatbot assistant, and predictive analytics.
Sources: context/PRD.md:73-130, AGENTS.md:13
AI Providers
The application integrates with multiple AI service providers:
- OpenAI: Used for the conversational AI farming assistant.
- Google AI: Integrated via
@ai-sdk/google. - Groq: Integrated via
groq-sdkfor fast inference.
Sources: AGENTS.md:13, package.json:17, 24, 39
Client-Side Machine Learning
For real-time computer vision tasks like disease detection from images, the application uses TensorFlow.js. This allows ML models to run directly in the user's browser, enabling offline analysis and reducing server load.
Sources: AGENTS.md:13, context/PRD.md:211, package.json:33
AI Interaction Flow
The following sequence diagram shows how the client might interact with the backend to get an AI-powered recommendation.
Sources: context/PRD.md:144-152, CLAUDE.md:329-354
Progressive Web App (PWA) and Offline Support
Vinesight is a PWA, enabling it to be "installed" on a user's device and work offline.
Sources: AGENTS.md:14
PWA Configuration
The PWA functionality is managed by next-pwa. The public/manifest.json file defines the application's metadata for installation, including its name, icons, theme color, and display mode.
// public/manifest.json
{
"name": "VineSight - Grape Farming Digital Companion",
"short_name": "VineSight",
"description": "Scientific grape farming operations management app for Indian farmers",
"display": "standalone",
"start_url": "/",
"theme_color": "#059669",
"background_color": "#ffffff",
"icons": [
{
"src": "/icon-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
}
]
}
Sources: public/manifest.json:1-20, package.json:38
Offline Storage
For offline data storage and synchronization, the application uses Dexie.js, which is a wrapper around IndexedDB. This allows users to record farming operations like irrigation and spraying even without an internet connection. The data is synced back to the Supabase backend once connectivity is restored.
Sources: AGENTS.md:14, package.json:25
Service Worker
A service worker, defined in public/sw.js, is used to cache application assets for offline access. It uses Workbox for precaching routes and implementing caching strategies.
Sources: public/sw.js, AGENTS.md:14
Internationalization (i18n)
The application supports multiple languages (English, Hindi, and Marathi) to cater to its target audience of Indian farmers.
Sources: AGENTS.md:15, context/PRD.md:69
i18n Framework
Internationalization is implemented using i18next and react-i18next. Translation strings are stored in a structured JSON format within the src/lib/i18n.ts file.
// src/lib/i18n.ts
const resources = {
en: {
translation: {
farm: {
title: 'Farm Management',
addFarm: 'Add New Farm',
},
},
},
hi: {
translation: {
farm: {
title: 'फार्म प्रबंधन',
addFarm: 'नया फार्म जोड़ें',
},
},
},
mr: {
translation: {
farm: {
title: 'शेत व्यवस्थापन',
addFarm: 'नवीन शेत जोडा',
},
},
},
};
Sources: src/lib/i18n.ts:5-23, 214-231, 423-440, package.json:27, 42
Development and Tooling
The project is equipped with a standard set of tools for modern web development.
Key Dependencies
| Library | Version | Purpose |
|---|---|---|
next | 15.5.0 | Full-stack React framework |
react | 19.1.0 | UI library |
@supabase/supabase-js | ^2.56.0 | Supabase client library |
@tensorflow/tfjs | ^4.22.0 | Client-side machine learning |
openai | ^5.16.0 | OpenAI API client |
i18next | ^25.4.1 | Internationalization framework |
next-pwa | ^5.6.0 | Progressive Web App plugin for Next.js |
dexie | ^4.0.9 | IndexedDB wrapper for offline storage |
tailwindcss | 4 | Utility-first CSS framework |
typescript | ^5 | Statically typed JavaScript superset |
Sources: package.json:17-70
NPM Scripts
| Script | Description |
|---|---|
dev | Starts the development server with Turbopack. |
build | Creates a production-ready build. |
start | Starts the production server. |
lint | Runs ESLint to check for code quality issues. |
typecheck | Runs the TypeScript compiler to check types. |
Sources: package.json:5-11
Summary
The technology stack of Vinesight is a robust and modern combination of tools and frameworks designed to deliver a high-performance, feature-rich, and scalable application. The use of Next.js provides a solid foundation for both frontend and backend logic. Supabase offers a powerful and scalable backend solution, while the integration of multiple AI services and a client-side ML library enables the application's core intelligent features. Finally, its PWA architecture with offline support and multi-language capabilities ensures it is accessible and useful to its target users in diverse conditions.
Sources: AGENTS.md, context/PRD.md