Home Screen
Authentication/Signin Page
Suggested Recipes
Chef Dashboard
Chef Portal

CulinaryAI — Technology Stack

🖥️ Languages

Language	Where Used
JavaScript (ES6+)	Entire application — frontend logic, API calls, Firebase interactions
HTML5	App structure and semantic markup
CSS3	Styling, responsive layouts, animations
JSON	Data exchange format between Gemini API and Firebase

⚛️ Frameworks & Libraries

Framework / Library	Purpose
React.js	Frontend UI — component-based architecture, state management
React Router	Client-side navigation between User, Chef, Admin dashboards
React Context API	Global auth state management across dashboards

☁️ Cloud Services & Platforms

Platform	Purpose
Netlify	Hosting, CI/CD auto-deploy from GitHub, global CDN
Google Cloud	Underlying infrastructure powering Gemini API
Firebase Platform	Full backend-as-a-service suite (see databases below)

🗄️ Databases & Storage

Service	Type	Purpose
Firebase Firestore	NoSQL real-time database	Users, chefs, bookings, recipes cache
Firebase Storage	Object / file storage	Chef profile photos, ingredient images uploaded by users

🔐 Authentication

Service	Method
Firebase Authentication	Email + Password login
	Google OAuth 2.0 single sign-on
	Role-based access control (User / Chef / Admin)

🤖 APIs

API	Provider	How We Used It
Gemini 1.5 Flash API	Google DeepMind	Vision — identify ingredients from fridge photo; Language — generate recipes, flag missing items
Firebase REST API	Google Firebase	Real-time data sync across all three dashboards
Netlify Deploy API	Netlify	Automated build and deployment pipeline from GitHub push

🛠️ Developer Tools

Tool	Purpose
VS Code	Primary code editor
Git + GitHub	Version control and source repository
npm	Package management
Chrome DevTools	Debugging, performance profiling, mobile simulation
Postman	API testing — Gemini prompt testing before integration

🏗️ Architecture Pattern

┌─────────────────────────────────────┐
│         React.js (Frontend)         │
│         Hosted on Netlify           │
└────────────┬────────────────────────┘
             │
    ┌────────▼─────────┐
    │  Google Gemini   │  ← Public AI API
    │  1.5 Flash API   │
    └────────┬─────────┘
             │
┌────────────▼────────────────────────┐
│           Firebase (Backend)        │
│  Firestore │ Auth │ Storage         │
└─────────────────────────────────────┘

📦 Key npm Packages

{
  "react": "^18.x",
  "react-router-dom": "^6.x",
  "firebase": "^10.x",
  "@google/generative-ai": "^0.x"
}

⚡ Why This Stack

Decision	Reason
React over Next.js	Simpler deployment, no SSR needed for this use case
Firebase over custom backend	Zero server management, real-time out of the box, free tier sufficient at hackathon scale
Gemini over GPT-4V	Better recognition of Indian ingredient names in testing, generous free tier
Netlify over Vercel	Simpler CI/CD setup for our team's workflow