Developer Guide Overview

Architecture overview, tech stack, and navigation for BabyShopHub developers and contributors.

Developer Guide ️

This guide is for developers building, maintaining, and extending BabyShopHub. It covers every layer of the system — from the Flutter client architecture to Firebase configuration, Firestore schemas, service deep-dives, the email relay server, and deployment.

Architecture at a Glance

BabyShopHub follows a serverless, provider-driven architecture:

┌─────────────────────────────────────────────────────┐
│                  Flutter Client                      │
│  ┌──────────┐  ┌──────────────┐  ┌───────────────┐  │
│  │ Screens  │  │  Providers   │  │    Services   │  │
│  │ (UI/UX)  │◄─┤ AuthProvider │  │ CloudinaryService│
│  │          │  │ ShopProvider │  │ GroqService   │  │
│  │          │  │ThemeProvider │  └───────────────┘  │
│  └──────────┘  └──────┬───────┘                     │
└─────────────────────── │ ──────────────────────────┘
                         │
          ┌──────────────┼──────────────┐
          ▼              ▼              ▼
   Firebase Auth   Cloud Firestore   Groq API
   (Authentication) (Database)      (LLM Chat)
                                          
          ┌─────────────────────────┐
          │  Node.js SMTP Relay     │
          │  (server/index.js)      │
          │  Nodemailer + Zoho SMTP │
          └─────────────────────────┘

Quick Navigation

TopicDescription
Local SetupInstall dependencies, configure Firebase, run locally
Project StructureDirectory layout and file responsibilities
Firebase ConfigurationAuth, Firestore, firebase_options setup
Firestore SchemaAll collections, fields, and subcollections
AuthProviderAuthentication state management deep-dive
ShopProviderCart, wishlist, checkout, stock management
Data ModelsAll Dart model classes with field docs
ScreensEvery screen — purpose and key widgets
Admin PanelAdmin-only features and management tools
Email Relay ServerNode.js SMTP server setup and endpoints
CloudinaryImage upload service configuration
Groq AIAI chat integration, models, fallback
Theme SystemThemeProvider, presets, SharedPreferences
Security RulesFirestore security rules explained
DeploymentBuild and deploy to web, Android, iOS

Core Dependencies

# pubspec.yaml
dependencies:
  flutter:                sdk: flutter
  firebase_core:          2.32.0
  firebase_auth:          4.20.0
  cloud_firestore:        4.17.0
  provider:               6.1.1
  shared_preferences:     2.2.2
  google_fonts:           6.1.0
  google_sign_in:         ^6.2.1
  http:                   1.2.1
  image_picker:           ^1.1.2

State Management Pattern

BabyShopHub uses Provider (ChangeNotifier) for global state. Three providers are injected at the root MultiProvider:

ProviderResponsibility
ThemeProviderApp theme, dark/light mode, color presets
AuthProviderUser authentication, profile, addresses, notifications
ShopProviderProducts, cart, wishlist, checkout, promo codes

All providers extend ChangeNotifier and call notifyListeners() after any state mutation, which triggers reactive UI rebuilds.

Next

Local Development Setup

On this page