PROMPTS.MD - DOCS
```markdown
## Initial prompt (original)
I'm pivoting my farmer marketplace app called Bazaar from mobile to web-first. Can you help me plan a complete React web application using Lovable for development? I want farmers to see live market prices, connect with buyers, and get insights through dashboards. Need full tech stack recommendations,
database design, authentication setup, and UI guidelines. Make it comprehensive with implementation details.
## Refined prompt (Improved by Claude AI/ChatGPT)
I'm building a web-first Market Match Platform called Bazaar, targeting small-scale farmers who lack access to real-time market information. I’m switching from a mobile-first approach and now want to leverage Lovable to accelerate development of a clean, data-driven, and scalable React web app.
🎯 Problem
Small-scale farmers often don’t know where, when, or for how much to sell their produce. This leads to financial losses, market inefficiencies, and limits growth.
💡 Goal
Deliver a responsive web app that:
Notifies farmers about live market prices for their crops
Suggests nearby buyers/markets based on location
Displays trends, predictions, and dashboards
Features a minimalist dark UI optimized for low-end devices and rural internet access
🛠️ Updated Tech Stack
Frontend (Web App): React + Tailwind CSS (via Lovable)
Authentication: Clerk (email/password + magic link support)
Database: Supabase (PostgreSQL + Supabase Auth + Storage)
🔐 User Roles
Farmer
Buyer
Admin/Market Analyst
📱 Key App Features
Clerk auth for farmers and buyers
Farmer onboarding: crop type, location, sell range
Buyer dashboard to post requests and set price alerts
Live Market Feed: geo-filtered, crowdsourced + API data
Matching Engine: recommend top 3 nearby buyers
Trend Dashboard: historical pricing, demand alerts
In-app Messaging or WhatsApp deep linking
🎨 UI Preferences
Dark theme with deep gray background
White cards with soft gradients & square edges
Accent color: Orange #ff5733
Layout: lightweight, minimalist, accessible
Mobile responsive
📦 What to Generate with Lovable:
Full web app project structure using React + Tailwind
Supabase DB schema including auth-linked users, produce, market prices, buy requests, and crop diagnostics
Clerk integration plan
Dashboard setup with Metabase or Superset
REST/tRPC API architecture
RLS policies and Supabase storage setup
Schema seeding and Supabase instructions
## Copilot:
```markdown
For debugging some TypeScript Errors
```markdown
## Initial prompt
I want to build a mobile app for small-scale farmers to connect with buyers and get real-time market prices.
Can you create a complete project plan including tech stack, features, UI design, and implementation details?
I'm thinking React Native for mobile, need authentication, database for storing farmer/buyer data, and want to integrate market pricing APIs.
Make it comprehensive with everything I need to get started.
## Refined prompt
## Market Match Platform for Small-Scale Farmers
Building a mobile-first platform to bridge market access gaps for small-scale farmers. Leveraging Rork AI to accelerate React Native development for a clean, data-driven, and scalable application.
##🎯Problem
Small-scale farmers lack information about where, when, and at what price to sell their produce—leading to financial losses and limited growth potential.
##💡 Goal
Deliver a mobile app that:
Notifies farmers about live market prices for their produce
Suggests nearby buyers/markets
Provides trends, predictions, and dashboards
Features a lightweight and intuitive dark UI for rural device usability
##🛠️ Updated Tech Stack
Frontend (Mobile App): React Native using Rork AI
Authentication: Clerk (mobile support via API sessions or magic links)
Database: Neon Postgres (via Prisma ORM + REST/GraphQL API)
Backend APIs: Custom Node.js + Express or use of tRPC (hosted on Railway or Render)
Market Data Sources:
FAO APIs (UN food pricing data)
AgroMarketDay API (East Africa)
KALRO (Kenya)
Optional: Scraping or crowdsourced farmer uploads
Analytics & Reporting (Free or Freemium Alternatives):
Metabase (open source BI, embeddable dashboards)
Superset by Apache (open-source alternative to Power BI)
Google Data Studio (free, embeddable with Firebase or REST input)
Optional: Microsoft Fabric for enterprise later
##🔐 User Roles
Farmer
Buyer
Admin/Market Analyst
##📱 Key App Features
Authentication via Clerk (with mobile token/session management)
Farmer onboarding: crop type, location, preferred sell range
Buyer dashboard: post buying requests, set price thresholds
Live Market Feed:
Based on region and crop
Filtered prices from APIs or user-reported prices
Matching Engine:
Finds top 3 local buyers for a farmer's produce
Geo-filtered using device location
Trend & Insights Dashboard:
Built using Metabase/Superset and embedded into the app
Historical price charts, alerts on demand surges
Chat/Contact System (in-app messaging or WhatsApp deeplinks)
##🎨 UI Preferences
Dark theme base with black or deep gray background
Cards and components:
White with square lines & soft gradients
Accents: Orange #ff5733 for icons, buttons, tags
Minimalist, offline-capable, accessible layout
##📦 What to Generate:
Full project outline for React Native via Rork AI
API architecture for fetching, storing, and serving real-time market data
Prisma schema for farmers, buyers, crop entries, market_data, and messages
Clerk integration plan (mobile-first auth)
Data ingestion & visualization setup using Metabase/Superset
Modular file structure optimized for mobile deployment
Styling templates using Tailwind-like styles (if supported by Rork or NativeWind)
### Web-App Prompt
```markdown
```markdown
## Initial user prompt
## Refined prompt
I'm building a web-first Market Match Platform called Bazaar, targeting small-scale farmers who lack access to real-time market information. I’m switching from a mobile-first approach and now want to leverage Lovable to accelerate development of a clean, data-driven, and scalable React web app.
🎯 Problem
Small-scale farmers often don’t know where, when, or for how much to sell their produce. This leads to financial losses, market inefficiencies, and limits growth.
💡 Goal
Deliver a responsive web app that:
Notifies farmers about live market prices for their crops
Suggests nearby buyers/markets based on location
Displays trends, predictions, and dashboards
Features a minimalist dark UI optimized for low-end devices and rural internet access
🛠️ Updated Tech Stack
Frontend (Web App): React + Tailwind CSS (via Lovable)
Authentication: Clerk (email/password + magic link support)
Database: Supabase (PostgreSQL + Supabase Auth + Storage)
🔐 User Roles
Farmer
Buyer
Admin/Market Analyst
📱 Key App Features
Clerk auth for farmers and buyers
Farmer onboarding: crop type, location, sell range
Buyer dashboard to post requests and set price alerts
Live Market Feed: geo-filtered, crowdsourced + API data
Matching Engine: recommend top 3 nearby buyers
Trend Dashboard: historical pricing, demand alerts
In-app Messaging or WhatsApp deep linking
🎨 UI Preferences
Dark theme with deep gray background
White cards with soft gradients & square edges
Accent color: Orange #ff5733
Layout: lightweight, minimalist, accessible
Mobile responsive
📦 What to Generate with Lovable:
Full web app project structure using React + Tailwind
Supabase DB schema including auth-linked users, produce, market prices, buy requests, and crop diagnostics
Clerk integration plan
Dashboard setup with Metabase or Superset
REST/tRPC API architecture
RLS policies and Supabase storage setup
Schema seeding and Supabase instructions
## Rork:
### First prompt
```markdown
```markdown
# Market Match Platform for Small-Scale Farmers
Building a mobile-first platform to bridge market access gaps for small-scale farmers. Leveraging Rork AI to accelerate React Native development for a clean, data-driven, and scalable application.
##🎯Problem
Small-scale farmers lack information about where, when, and at what price to sell their produce—leading to financial losses and limited growth potential.
##💡 Goal
Deliver a mobile app that:
Notifies farmers about live market prices for their produce
Suggests nearby buyers/markets
Provides trends, predictions, and dashboards
Features a lightweight and intuitive dark UI for rural device usability
##🛠️ Updated Tech Stack
Frontend (Mobile App): React Native using Rork AI
Authentication: Clerk (mobile support via API sessions or magic links)
Database: Neon Postgres (via Prisma ORM + REST/GraphQL API)
Backend APIs: Custom Node.js + Express or use of tRPC (hosted on Railway or Render)
Market Data Sources:
FAO APIs (UN food pricing data)
AgroMarketDay API (East Africa)
KALRO (Kenya)
Optional: Scraping or crowdsourced farmer uploads
Analytics & Reporting (Free or Freemium Alternatives):
Metabase (open source BI, embeddable dashboards)
Superset by Apache (open-source alternative to Power BI)
Google Data Studio (free, embeddable with Firebase or REST input)
Optional: Microsoft Fabric for enterprise later
##🔐 User Roles
Farmer
Buyer
Admin/Market Analyst
##📱 Key App Features
Authentication via Clerk (with mobile token/session management)
Farmer onboarding: crop type, location, preferred sell range
Buyer dashboard: post buying requests, set price thresholds
Live Market Feed:
Based on region and crop
Filtered prices from APIs or user-reported prices
Matching Engine:
Finds top 3 local buyers for a farmer's produce
Geo-filtered using device location
Trend & Insights Dashboard:
Built using Metabase/Superset and embedded into the app
Historical price charts, alerts on demand surges
Chat/Contact System (in-app messaging or WhatsApp deeplinks)
##🎨 UI Preferences
Dark theme base with black or deep gray background
Cards and components:
White with square lines & soft gradients
Accents: Orange #ff5733 for icons, buttons, tags
Minimalist, offline-capable, accessible layout
##📦 What to Generate:
Full project outline for React Native via Rork AI
API architecture for fetching, storing, and serving real-time market data
Prisma schema for farmers, buyers, crop entries, market_data, and messages
Clerk integration plan (mobile-first auth)
Data ingestion & visualization setup using Metabase/Superset
Modular file structure optimized for mobile deployment
Styling templates using Tailwind-like styles (if supported by Rork or NativeWind)
### Follow up prompt
```markdown
```markdown
## Additional feature prompt
I want to integrate a crop disease detection feature into the existing React Native-based Market Match Platform (built using Rork AI).
This feature should allow farmers to:
Capture or upload images of their crops
Use an AI model to detect diseases and get actionable feedback (e.g., treatment, nearby agro-vets)
Store diagnosis results under their account for tracking
The disease detection feature must be:
Modular: it should plug into the current backend cleanly
Secure: ensure uploads are authenticated using Clerk
Data-consistent: use Neon Postgres for all crop health reports
Performant: offload inference to an external API if needed (FastAPI/Flask + ONNX or Hugging Face endpoint)
Insight-rich: analyzed results can be included in the existing analytics dashboard using Metabase/Superset
## 🔧 System Compatibility Checklist
Frontend: React Native (Rork AI) → Add a camera/upload interface
Authentication: Clerk → Auth gate image uploads and results
Database: Neon Postgres
Add a crop_diagnosis table: user_id, image_url, disease, confidence, advice, timestamp
AI Model Options:
Use a trained CNN or Transformer model hosted on Hugging Face Inference API or FastAPI on Render
Input: image URL / Base64
Output: detected disease, probability/confidence, suggested treatment
Dashboard Extension:
Add “Disease Reports” section in farmer profile
Integrate data into the Metabase/Superset dashboards
Notification System:
Optional: Send alert via in-app toast or SMS (e.g., Twilio) if serious disease is detected
## 🎨 UI & UX Considerations
Maintain consistency with the current theme:
Dark mode base
White diagnostic cards with orange #ff5733 highlights
Simple results screen with high contrast for readability
Please provide:
Updated project structure to include this module
Sample API flow from image upload to AI response
AI model integration strategy (self-hosted vs inference API)
Updated Prisma schema for crop_diagnosis
UI layout wireframe suggestion for React Native
How to visualize disease reports in Metabase/Superset