/ashish921998/Vinesight

Wiki directory

Browse AI-generated documentation for any repository.

Getting Started

Relevant source files

The following files were used as context for generating this wiki page:

Vinesight is a progressive web and mobile application designed to digitize grape farming operations for Indian farmers. It provides scientific calculators, record-keeping, AI-powered insights, and multi-language support to replace manual notebooks and optimize farming practices. The platform is built on modern web technologies to deliver a reliable and accessible experience.

This guide provides instructions for setting up the development environment, understanding the project structure, and running the application locally. It covers the core architecture, key dependencies, and essential development scripts required to begin contributing to the Vinesight project.

Sources: context/PRD.md:10-12, AGENTS.md:12-18, README.md:1-2

System Architecture

Vinesight is built using a modern, full-stack JavaScript architecture. The core framework is Next.js 15 with the App Router, utilizing React 19 for the user interface. The backend and database are powered by Supabase, which includes PostgreSQL with Row Level Security (RLS) enabled for data protection. The UI is constructed with shadcn/ui components, which are built upon Radix UI and styled with Tailwind CSS.

The application is also a Progressive Web App (PWA) with offline support, enabled by next-pwa and Dexie.js. Internationalization is handled by i18next to support English, Hindi, and Marathi.

Sources: AGENTS.md:12-18, package.json:15-50, public/manifest.json

Technology Stack

The following diagram illustrates the main technologies used in the Vinesight application.

Generating architecture diagram...

Sources: AGENTS.md:12-18, package.json:15-50, context/PRD.md:183-195

Installation and Local Setup

To get the Vinesight project running on your local machine, follow these steps.

Prerequisites

Ensure you have a recent version of Node.js and a package manager (npm, yarn, or pnpm) installed.

Setup Steps

Clone the repository:

git clone https://github.com/ashish921998/Vinesight.git
cd Vinesight

Install dependencies:
Use npm to install the project's dependencies as defined in package.json.
```
npm install
```
Sources: package.json:15-50
Set up environment variables:
The project uses Supabase for its backend. You will need to create a .env.local file in the root of the project and add your Supabase project URL and anon key. The authentication flow relies on these variables.
Run the development server:
Start the Next.js development server. The --turbopack flag is recommended for faster performance.
```
npm run dev
```
The application will be available at http://localhost:3000. The page will auto-update as you edit files.

Sources: README.md:5-12, AGENTS.md:5, package.json:6

Development Scripts

The package.json file contains several scripts for development and production workflows.

Script	Description
`npm run dev`	Starts the development server with Turbopack.
`npm run dev:webpack`	Starts the development server using Webpack.
`npm run build`	Creates a production-ready build of the application.
`npm run start`	Starts the production server after a build.
`npm run lint`	Runs ESLint to check for code quality and style issues.
`npm run typecheck`	Runs the TypeScript compiler to check for type errors.

Sources: package.json:5-12, AGENTS.md:5-9

Project Structure

The repository is organized into several key directories. Understanding this structure is crucial for navigating the codebase.

Generating architecture diagram...

This diagram shows the main directories within the project.

src/app/: Contains all the application pages and routes, following the Next.js App Router convention.
src/components/: Home to reusable React components, including UI elements built with shadcn/ui.
src/lib/: Includes core services, utility functions, and client-side libraries like i18n.ts for internationalization and Supabase client configuration.
src/hooks/: Contains custom React hooks, such as useSupabaseAuth for managing authentication state.
public/: Stores static assets like images, fonts, and the manifest.json for PWA configuration.
context/: Contains project documentation like the Product Requirements Document (PRD.md).

Sources: AGENTS.md:19-22

Core Features

Authentication

User authentication is managed through Supabase Auth. The application supports both email/password signup and Google OAuth. The signup process requires email confirmation for security.

The following sequence diagram illustrates the email signup flow:

Generating architecture diagram...

This flow shows how the SignupForm.tsx component interacts with the custom useSupabaseAuth hook to handle user registration. If the signup is successful, the user is redirected to a verification page to confirm their email address.

Sources: src/components/auth/SignupForm.tsx:38-53, AGENTS.md:29-30

Internationalization (i18n)

The application supports multiple languages (English, Hindi, and Marathi) using the i18next and react-i18next libraries. Translation resources are centralized in src/lib/i18n.ts.

The structure of the translation resources is as follows:

// Source: src/lib/i18n.ts:5-23
const resources = {
  en: {
    translation: {
      navigation: {
        dashboard: 'Dashboard',
        farmManagement: 'Farm Management',
        // ... more English translations
      },
      // ... more sections
    },
  },
  hi: {
    translation: {
      navigation: {
        dashboard: 'डैशबोर्ड',
        farmManagement: 'फार्म प्रबंधन',
        // ... more Hindi translations
      },
      // ... more sections
    },
  },
  mr: {
    translation: {
      navigation: {
        dashboard: 'डॅशबोर्ड',
        farmManagement: 'शेत व्यवस्थापन',
        // ... more Marathi translations
      },
      // ... more sections
    },
  },
};

This setup allows for easy toggling between languages and centralized management of all UI strings.

Sources: src/lib/i18n.ts, AGENTS.md:17, context/PRD.md:63

Progressive Web App (PWA)

Vinesight is configured as a PWA to provide a native-like experience and offline capabilities. The configuration is defined in public/manifest.json.

Key PWA properties include:

Name: VineSight - Grape Farming Digital Companion
Display: standalone
Theme Color: #059669
Offline Support: Enabled via next-pwa and Dexie.js for local data storage.

Sources: public/manifest.json, AGENTS.md:16

Getting Started

Relevant source files

The following files were used as context for generating this wiki page:

Sources: context/PRD.md:10-12, AGENTS.md:12-18, README.md:1-2

System Architecture

The application is also a Progressive Web App (PWA) with offline support, enabled by next-pwa and Dexie.js. Internationalization is handled by i18next to support English, Hindi, and Marathi.

Sources: AGENTS.md:12-18, package.json:15-50, public/manifest.json

Technology Stack

The following diagram illustrates the main technologies used in the Vinesight application.

Generating architecture diagram...

Sources: AGENTS.md:12-18, package.json:15-50, context/PRD.md:183-195

Installation and Local Setup

To get the Vinesight project running on your local machine, follow these steps.

Prerequisites

Ensure you have a recent version of Node.js and a package manager (npm, yarn, or pnpm) installed.

Setup Steps

Clone the repository:

git clone https://github.com/ashish921998/Vinesight.git
cd Vinesight

Install dependencies:
Use npm to install the project's dependencies as defined in package.json.
```
npm install
```
Sources: package.json:15-50
Set up environment variables:
The project uses Supabase for its backend. You will need to create a .env.local file in the root of the project and add your Supabase project URL and anon key. The authentication flow relies on these variables.
Run the development server:
Start the Next.js development server. The --turbopack flag is recommended for faster performance.
```
npm run dev
```
The application will be available at http://localhost:3000. The page will auto-update as you edit files.

Sources: README.md:5-12, AGENTS.md:5, package.json:6

Development Scripts

The package.json file contains several scripts for development and production workflows.

Script	Description
`npm run dev`	Starts the development server with Turbopack.
`npm run dev:webpack`	Starts the development server using Webpack.
`npm run build`	Creates a production-ready build of the application.
`npm run start`	Starts the production server after a build.
`npm run lint`	Runs ESLint to check for code quality and style issues.
`npm run typecheck`	Runs the TypeScript compiler to check for type errors.

Sources: package.json:5-12, AGENTS.md:5-9

Project Structure

The repository is organized into several key directories. Understanding this structure is crucial for navigating the codebase.

Generating architecture diagram...

This diagram shows the main directories within the project.

src/app/: Contains all the application pages and routes, following the Next.js App Router convention.
src/components/: Home to reusable React components, including UI elements built with shadcn/ui.
src/lib/: Includes core services, utility functions, and client-side libraries like i18n.ts for internationalization and Supabase client configuration.
src/hooks/: Contains custom React hooks, such as useSupabaseAuth for managing authentication state.
public/: Stores static assets like images, fonts, and the manifest.json for PWA configuration.
context/: Contains project documentation like the Product Requirements Document (PRD.md).

Sources: AGENTS.md:19-22

Core Features

Authentication

User authentication is managed through Supabase Auth. The application supports both email/password signup and Google OAuth. The signup process requires email confirmation for security.

The following sequence diagram illustrates the email signup flow:

Generating architecture diagram...

Sources: src/components/auth/SignupForm.tsx:38-53, AGENTS.md:29-30

Internationalization (i18n)

The application supports multiple languages (English, Hindi, and Marathi) using the i18next and react-i18next libraries. Translation resources are centralized in src/lib/i18n.ts.

The structure of the translation resources is as follows:

// Source: src/lib/i18n.ts:5-23
const resources = {
  en: {
    translation: {
      navigation: {
        dashboard: 'Dashboard',
        farmManagement: 'Farm Management',
        // ... more English translations
      },
      // ... more sections
    },
  },
  hi: {
    translation: {
      navigation: {
        dashboard: 'डैशबोर्ड',
        farmManagement: 'फार्म प्रबंधन',
        // ... more Hindi translations
      },
      // ... more sections
    },
  },
  mr: {
    translation: {
      navigation: {
        dashboard: 'डॅशबोर्ड',
        farmManagement: 'शेत व्यवस्थापन',
        // ... more Marathi translations
      },
      // ... more sections
    },
  },
};

This setup allows for easy toggling between languages and centralized management of all UI strings.

Sources: src/lib/i18n.ts, AGENTS.md:17, context/PRD.md:63

Progressive Web App (PWA)

Vinesight is configured as a PWA to provide a native-like experience and offline capabilities. The configuration is defined in public/manifest.json.

Key PWA properties include:

Name: VineSight - Grape Farming Digital Companion
Display: standalone
Theme Color: #059669
Offline Support: Enabled via next-pwa and Dexie.js for local data storage.

Sources: public/manifest.json, AGENTS.md:16