## Next.js MVP Application: BeeSavvy - Native Pollinator Protector
### 1. PROJECT OVERVIEW:
**App Title:** BeeSavvy
**Concept:** BeeSavvy is a SaaS and mobile application designed to shift conservation focus from domesticated honeybees to vulnerable native pollinator species. It empowers users to identify, track, and support local wild bees, butterflies, and other pollinators by providing educational resources, habitat improvement guides, and a platform for citizen science data collection. The core value proposition is enabling individuals to make a tangible, positive impact on their local ecosystems by conserving the pollinators that truly need our help.
**Problem Solved:** While honeybees receive significant attention, many native pollinator species are facing severe population declines due to habitat loss, pesticide use, and climate change. Public awareness and actionable conservation efforts are often misdirected towards domesticated species. BeeSavvy bridges this gap by educating users about native pollinators and providing tools for direct conservation action.
**Target Audience:** Environmentally conscious individuals, gardeners, nature enthusiasts, citizen scientists, researchers, educators, and NGOs interested in biodiversity and ecological health. Particularly those who feel the need to contribute meaningfully to wildlife conservation beyond general awareness.
**Core Value:** Facilitate direct, local impact on native pollinator populations through education, guided action, and data contribution.
**Monetization:** Freemium model with tiered subscriptions for advanced features (detailed analytics, personalized habitat plans, enhanced data sharing) and a donation portal for supporting local conservation projects.
**Theme:** B2C (with potential for B2D - Business for Data/Research)
### 2. TECH STACK:
* **Frontend Framework:** Next.js (App Router)
* **Styling:** Tailwind CSS
* **State Management:** React Context API / Zustand (for global state)
* **ORM:** Drizzle ORM (with PostgreSQL via Vercel Postgres or Neon)
* **UI Library:** shadcn/ui (for accessible, customizable components)
* **Authentication:** NextAuth.js (for secure user management)
* **Database:** PostgreSQL
* **API Layer:** Next.js API Routes / Route Handlers
* **Image Handling:** Next.js Image Optimization
* **Deployment:** Vercel
* **Optional:** React Hook Form (for complex forms), Chart.js or Recharts (for data visualization)
### 3. DATABASE SCHEMA (Drizzle ORM - PostgreSQL):
```sql
-- Users Table
-- Based on NextAuth.js default structure
-- (id, name, email, emailVerified, image)
-- NativePollinatorSpecies Table
CREATE TABLE native_pollinator_species (
id SERIAL PRIMARY KEY,
scientific_name VARCHAR(255) UNIQUE NOT NULL,
common_name VARCHAR(255) NOT NULL,
description TEXT,
conservation_status VARCHAR(50),
image_url VARCHAR(255),
ideal_habitat TEXT,
native_regions TEXT[], -- Array of regions where species is native
created_at TIMESTAMPTZ DEFAULT NOW()
);
-- UserPollinatorSightings Table
CREATE TABLE user_pollinator_sightings (
id SERIAL PRIMARY KEY,
user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE,
species_id INT REFERENCES native_pollinator_species(id) ON DELETE CASCADE,
sighting_date DATE NOT NULL,
sighting_time TIME,
latitude DECIMAL(9, 6) NOT NULL,
longitude DECIMAL(9, 6) NOT NULL,
count INT DEFAULT 1,
notes TEXT,
image_url VARCHAR(255),
is_public BOOLEAN DEFAULT TRUE, -- For sharing with research projects
created_at TIMESTAMPTZ DEFAULT NOW()
);
-- UserHabitatImprovements Table
CREATE TABLE user_habitat_improvements (
id SERIAL PRIMARY KEY,
user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE,
improvement_type VARCHAR(100) NOT NULL, -- e.g., 'Planting Native Flowers', 'Building Bee Hotel', 'Pesticide Reduction'
description TEXT,
location_notes TEXT,
implementation_date DATE,
created_at TIMESTAMPTZ DEFAULT NOW()
);
-- SupportedProjects Table (for donations)
CREATE TABLE supported_projects (
id SERIAL PRIMARY KEY,
project_name VARCHAR(255) NOT NULL,
description TEXT,
donation_url VARCHAR(255)
);
-- UserDonations Table
CREATE TABLE user_donations (
id SERIAL PRIMARY KEY,
user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE,
project_id INT REFERENCES supported_projects(id) ON DELETE CASCADE,
donation_amount DECIMAL(10, 2) NOT NULL,
donation_date TIMESTAMPTZ DEFAULT NOW()
);
-- (Potentially) User Preferences/Settings Table
CREATE TABLE user_preferences (
user_id UUID PRIMARY KEY REFERENCES auth.users(id) ON DELETE CASCADE,
preferred_units VARCHAR(20) DEFAULT 'metric',
notification_settings JSONB
);
```
### 4. CORE FEATURES & USER FLOW:
**A. Authentication (Sign Up/Log In):**
1. **Flow:** User lands on the homepage. Clicks 'Sign Up' or 'Log In'. Redirected to NextAuth.js provider (e.g., Google, Email/Password). Successful authentication redirects to the dashboard.
2. **Features:** Secure OAuth (Google, etc.) and/or Email/Password authentication. Password reset functionality.
3. **Edge Case:** Handle invalid credentials, account lockout (optional), email verification.
**B. Native Pollinator Identification:**
1. **Flow:** User navigates to 'Identify' page. Option 1: Upload an image. App uses an AI model (or a robust search) to suggest possible species. Option 2: Browse species by common name, scientific name, or characteristics (e.g., color, size, region). User selects a species. Displays detailed species information (description, habitat, conservation status, images).
2. **Features:** Image recognition (consider integrating a third-party API or a pre-trained model), searchable species database, detailed species profile pages.
3. **MVP Scope:** Focus on a curated list of ~50-100 common native pollinators in target regions. Start with manual search and detailed profiles, image recognition can be a post-MVP enhancement.
**C. Pollinator Sighting Logging:**
1. **Flow:** From the species profile or a dedicated 'Log Sighting' button: User fills a form including date, location (auto-detected via Geolocation API or manual input), count, notes, and optional image upload. User sets sighting privacy ('Public' for research, 'Private').
2. **Features:** Geolocation integration, intuitive form, image upload, privacy controls.
3. **Edge Cases:** Location permission denied, network errors during submission, invalid data entry.
**D. Habitat Improvement Guidance:**
1. **Flow:** User navigates to 'My Garden' or 'Habitat'. Based on user's location (or manually selected region) and potentially logged sightings, the app suggests native plants and habitat modifications (e.g., bee hotels, water sources). Users can log implemented improvements.
2. **Features:** Region-specific plant recommendations (linked to species database), guides for building bee hotels, importance of pesticide reduction.
3. **MVP Scope:** Curated list of recommended plants per region, simple guides for habitat features.
**E. Citizen Science Data Sharing:**
1. **Flow:** Public sightings ('is_public = TRUE') are aggregated and anonymized. A dedicated 'Research' or 'Data' section displays aggregated data (e.g., species distribution maps, population trends based on sightings). Potential for researchers to request access to anonymized datasets.
2. **Features:** Data aggregation and visualization (basic maps/charts), opt-in sharing mechanism.
3. **Edge Cases:** Ensuring data anonymization, handling data requests.
### 5. API & DATA FETCHING (Next.js App Router):
* **Route Handlers (app/api/...):**
* `POST /api/sightings`: To create a new pollinator sighting.
* `GET /api/species`: To fetch a list of native pollinator species (with search/filter parameters).
* `GET /api/species/[id]`: To fetch details for a specific species.
* `POST /api/habitat-improvements`: To log a habitat improvement.
* `GET /api/dashboard/summary`: Fetch aggregated data for the user dashboard (recent sightings, logged improvements).
* `GET /api/research/map-data`: Fetch aggregated, public sighting data for map visualization.
* **Data Fetching in Components:** Utilize Server Components for initial data loading where possible (e.g., fetching species list on the main 'Species' page). Client Components will fetch data related to user-specific actions (e.g., logging a sighting, user dashboard data) using `fetch` or libraries like SWR/React Query within `useEffect` hooks.
* **Request/Response Examples:**
* `POST /api/sightings` Request Body: `{ speciesId: number, sightingDate: string, latitude: number, longitude: number, count: number, notes?: string, isPublic: boolean }`
* `POST /api/sightings` Response Body: `{ success: boolean, sightingId?: string, error?: string }`
* `GET /api/species?search=bee®ion=europe` Response Body: `[{ id: 1, common_name: 'Bumblebee', scientific_name: 'Bombus terrestris', image_url: '...' }, ...]`
### 6. COMPONENT BREAKDOWN (Next.js App Router Structure):
* **`app/layout.tsx`:** Root layout (HTML, Head, Body, global providers, Tailwind CSS setup).
* **`app/page.tsx`:** Landing Page (Hero section, value proposition, CTA, feature overview).
* **`app/dashboard/page.tsx`:** User Dashboard (Protected Route). Displays user's recent sightings, habitat improvements, quick stats, links to other sections.
* **Components:** `DashboardSummaryCard`, `RecentSightingsList`, `HabitatProgressChart`.
* **`app/(auth)/sign-in/page.tsx`:** Sign-in Page (using NextAuth.js UI or custom form).
* **`app/(auth)/sign-up/page.tsx`:** Sign-up Page.
* **`app/species/page.tsx`:** Browse Species Page. Search bar, filters (region, type), list of species cards.
* **Components:** `SpeciesSearchFilter`, `SpeciesCard`, `PaginationControls`.
* **`app/species/[id]/page.tsx`:** Individual Species Profile Page. Displays all details, images, habitat info, 'Log Sighting' button.
* **Components:** `SpeciesDetailView`, `HabitatInfo`, `LogSightingButton`.
* **`app/log-sighting/page.tsx`:** Log Sighting Form Page (Protected Route). Uses geolocation, date picker, count input, notes, image upload.
* **Components:** `SightingForm` (with integrated `MapComponent`, `DatePicker`, `ImageUploader`).
* **`app/habitat/page.tsx`:** My Habitat Page. Shows user's logged improvements, personalized recommendations.
* **Components:** `HabitatImprovementLog`, `RecommendationCard`, `AddImprovementButton`.
* **`app/research/page.tsx`:** Research/Data Hub. Displays aggregated public data, maps, potentially links to partner projects.
* **Components:** `DataMap`, `PopulationTrendChart`.
* **`app/settings/page.tsx`:** User Settings Page (Protected Route). Profile editing, notification preferences, data sharing settings.
* **Components:** `ProfileForm`, `NotificationSettings`.
* **`components/ui/...`:** Reusable UI components from shad-cn/ui (Button, Input, Card, Dialog, etc.).
* **`components/layout/Navbar.tsx`:** Main navigation bar.
* **`components/layout/Footer.tsx`:** Footer.
* **`components/common/`:** Other shared components (e.g., `LoadingSpinner`, `ErrorMessage`).
**State Management:** Server Components fetch initial data. Client Components use `useState`, `useReducer`, and potentially Zustand for global state like user authentication status or UI preferences. Data fetching in Client Components will rely on hooks (`useEffect` with `fetch`).
### 7. UI/UX DESIGN & VISUAL IDENTITY:
* **Design Style:** Clean, Organic, Nature-Inspired.
* **Color Palette:**
* Primary: Earthy Greens (`#6B8E23` - Olive Drab, `#8FBC8F` - Dark Sea Green)
* Secondary: Warm Earth Tones (`#DAA520` - Goldenrod, `#BC8F8F` - Rosy Brown)
* Accent: Bright floral/sky blue (`#ADD8E6` - Light Blue, `#FFB6C1` - Light Pink for accents/CTAs)
* Neutrals: Off-whites (`#F8F8F8`), Light Greys (`#E0E0E0`), Dark Greys (`#333333` for text)
* **Typography:** Use a clean, readable sans-serif font like 'Inter' or 'Lato' for body text and a slightly more distinct but still legible font for headings (e.g., 'Merriweather' or 'Montserrat').
* **Layout:** Utilize a responsive grid system (Tailwind's default). Ample whitespace. Clear visual hierarchy. Focus on card-based layouts for species and sightings. Full-width sections for key information on landing/feature pages.
* **Imagery:** High-quality photos of native pollinators and plants. Subtle nature-themed illustrations or patterns.
* **Responsiveness:** Mobile-first approach. Ensure usability on all screen sizes, from small mobile devices to desktops. Use `lg:` and `xl:` prefixes in Tailwind for larger screens.
### 8. SAMPLE/MOCK DATA:
* **Native Pollinator Species:**
1. `{ id: 1, common_name: 'Great Bumblebee', scientific_name: 'Bombus terrestris', conservation_status: 'Least Concern', image_url: '/images/bombus_terrestris.jpg', native_regions: ['Europe', 'Asia', 'North Africa'] }`
2. `{ id: 2, common_name: 'Orange-Tip Butterfly', scientific_name: 'Anthocharis cardamines', conservation_status: 'Least Concern', image_url: '/images/anthocharis_cardamines.jpg', native_regions: ['Europe', 'Asia'] }`
3. `{ id: 3, common_name: 'Mason Bee', scientific_name: 'Osmia rufa', conservation_status: 'Least Concern', image_url: '/images/osmia_rufa.jpg', native_regions: ['Europe', 'Asia'] }`
* **User Pollinator Sightings:**
1. `{ id: 101, user_id: 'uuid-user-1', species_id: 1, sighting_date: '2024-07-15', latitude: 41.0082, longitude: 28.9784, count: 5, is_public: true, notes: 'Seen visiting clover.' }`
2. `{ id: 102, user_id: 'uuid-user-1', species_id: 2, sighting_date: '2024-07-14', latitude: 41.0150, longitude: 28.9800, count: 2, is_public: false, image_url: '/uploads/sighting_102.jpg' }`
3. `{ id: 103, user_id: 'uuid-user-2', species_id: 3, sighting_date: '2024-07-16', latitude: 36.2048, longitude: 33.1352, count: 10, is_public: true }`
* **User Habitat Improvements:**
1. `{ id: 201, user_id: 'uuid-user-1', improvement_type: 'Planting Native Flowers', description: 'Planted lavender and sunflowers.', implementation_date: '2024-06-01' }`
2. `{ id: 202, user_id: 'uuid-user-2', improvement_type: 'Building Bee Hotel', description: 'Constructed a simple bee hotel with bamboo canes.', implementation_date: '2024-05-15' }`
### 9. ANIMATIONS:
* **Page Transitions:** Subtle fade-in/fade-out using Next.js `transition` or Framer Motion for page changes.
* **Component Transitions:** Smooth transitions for elements appearing/disappearing (e.g., filtering results, expanding sections). Use Tailwind's `transition` utilities.
* **Hover Effects:** Gentle scaling or background color changes on buttons and interactive cards.
* **Loading States:** Use skeleton loaders or spinners (from shad-cn/ui or custom) with subtle animations while data is being fetched.
### 10. EDGE CASES & VALIDATION:
* **Authentication:** Gracefully handle logged-out users trying to access protected routes (redirect to sign-in).
* **Data Validation:** Implement server-side validation for all API inputs (sightings, improvements) using Zod or similar with Drizzle.
* **Empty States:** Design informative and visually appealing empty states for dashboards, sighting lists, etc., with clear CTAs to encourage first actions (e.g., 'Log your first sighting!', 'Discover native species').
* **Error Handling:** Implement robust error handling. Display user-friendly error messages for API failures, form errors, or permission issues. Use global error boundaries and toast notifications.
* **Geolocation:** Handle cases where the user denies location permissions or the browser doesn't support geolocation. Provide manual location input as a fallback.
* **Image Uploads:** Limit file sizes and types. Provide feedback during upload. Handle upload errors.
* **Database Constraints:** Ensure referential integrity and uniqueness constraints are handled properly.
* **API Rate Limiting:** Consider implementing rate limiting for public APIs if usage scales significantly.
### 11. TURKISH TRANSLATIONS (Key UI Elements):
* **App Title:** BeeSavvy
* **Sign Up:** Kayıt Ol
* **Log In:** Giriş Yap
* **Dashboard:** Kontrol Paneli
* **Species:** Türler
* **Identify:** Tanımla
* **Log Sighting:** Gözlemi Kaydet
* **My Habitat:** Bahçem
* **Research:** Araştırma
* **Settings:** Ayarlar
* **Save:** Kaydet
* **Cancel:** İptal
* **Submit:** Gönder
* **Loading...:** Yükleniyor...
* **No data available:** Veri bulunamadı.
* **An error occurred:** Bir hata oluştu.
* **Upload Image:** Resim Yükle
* **Common Name:** Yaygın Adı
* **Scientific Name:** Bilimsel Adı
* **Conservation Status:** Korunma Durumu
* **Habitat:** Yaşam Alanı
* **Sighting Date:** Gözlem Tarihi
* **Location:** Konum
* **Count:** Sayı
* **Notes:** Notlar
* **Public Sighting:** Halka Açık Gözlem
* **Plant Native Flowers:** Yerli Çiçekler Ek
* **Build Bee Hotel:** Arı Oteli Yap
* **Recommendations:** Öneriler
* **Native Regions:** Yerli Olduğu Bölgeler
This comprehensive prompt provides the necessary details to generate a fully functional, multi-page MVP application using Next.js, Tailwind CSS, and Drizzle ORM, focusing on the critical issue of native pollinator conservation.