eSellify Documentation

Complete setup and deployment guide for your multi-platform e-commerce application.

v1.0 - Flutter + Firebase
💻
Platform
Android, iOS & Web
🔧
Framework
Flutter + Firebase
📧
Support Email
📞
WhatsApp

Key Features

📱

Multi-Platform

Build for Android, iOS, and Web from a single Flutter codebase.

🔐

Authentication

Phone, Google, and Apple sign-in powered by Firebase Authentication.

🛒

Shopping Cart

Full-featured cart with quantity management, coupons, and checkout flow.

🔔

Push Notifications

Real-time notifications via Firebase Cloud Messaging (FCM) on all platforms.

Admin Panel

Full-featured Flutter web admin dashboard for managing products, orders, and users.

💳

Payment Gateway

Multiple payment integrations including Stripe, Razorpay, PayPal, and COD.

What's Included

Before starting the setup, make sure you have the following tools and accounts ready.

Required Software

Software Version Purpose
Flutter SDK Latest Stable Framework for building the app
Dart SDK Bundled with Flutter Programming language for Flutter
Android Studio Latest IDE & Android SDK/Emulator
Xcode (macOS only) Latest iOS development & simulator
Firebase CLI Latest Deploy and manage Firebase services
Git Latest Version control
VS Code / Android Studio Latest Code editor with Flutter/Dart plugins

Required Accounts

Important:
  • Some Firebase features (phone authentication, etc.) require the Blaze plan (pay-as-you-go). The free Spark plan has limitations.
  • Ensure your system meets Flutter's minimum system requirements for your OS.

Follow these steps in order for a smooth setup experience. Each step links to the detailed section below.

Estimated Setup Time

Following this guide carefully, the complete setup typically takes 1-2 hours depending on your familiarity with Flutter and Firebase.

To set up Flutter on both Windows and macOS, follow these step-by-step instructions.

Setting Up Flutter on Windows

System Requirements
Download Flutter SDK
Add Flutter to System Path
Verify Installation
flutter doctor
Install Android Studio
Set Up an Android Emulator
Final Setup Check
flutter doctor

Setting Up Flutter on macOS

System Requirements
Download Flutter SDK
Add Flutter to PATH
export PATH="$PATH:$HOME/development/flutter/bin"
Install Xcode
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch
Install CocoaPods
sudo gem install cocoapods
Verify Installation
flutter doctor

eSellify supports three authentication methods. Enable each one in the Firebase Console.

1. Enable Phone Authentication

2. Enable Google Sign-In

3. Enable Apple Sign-In

Note:

Apple Sign-In requires an active Apple Developer account ($99/year). It is mandatory for iOS apps that offer third-party login options.

Import the pre-built database collections to quickly populate your Firestore database with the required structure.

1. Install Node.js and npm

node -v
npm -v

2. Extract Database Files

3. Open Terminal or Command Prompt

cd path/to/extracted/folder

4. Generate Firebase Service Account Key

🔎 Navigation Path: Firebase Console → ⚙ (Gear Icon) → Project Settings → Service accounts tab → Firebase Admin SDK → Node.js → Generate new private key

5. Prepare config.json

6. Run Import Command

npm install firestore-export-import
node import
Success:

Once the import completes, your Firestore database will have all the required collections and documents.

Important Notes:
  • Ensure you are inside the correct project directory before running any Firebase CLI commands.
  • You must have sufficient permissions (e.g., Editor or Owner role) in your Firebase project to deploy indexes.
  • Once deployed, Firestore queries will benefit from better performance as they'll use the optimized indexes.

1. Navigate to Your Firebase Project Folder

cd path/to/firestore_index
Step A: Run firebase init
firebase init
Terminal Output:
You're about to initialize a Firebase project in this directory:
  C:\path\to\your\firestore_index

? Are you ready to proceed? (Y/n)
Step B: Select Firebase Features
Select this option:
(*) Firestore: Configure security rules and indexes files for Firestore

Use arrow keys to move, Space to select, Enter to confirm.

Step C: Choose Firebase Project
Step D: Set Up Firestore Rules and Indexes
Step E: Deploy Firestore Indexes
firebase deploy --only firestore:indexes
Deployment Complete
Expected Terminal Output:
=== Deploying to 'your-project-id'...

i  firestore: reading indexes from firestore.indexes.json...
i  cloud.firestore: checking firestore.rules for compilation errors...
+  cloud.firestore: rules file firestore.rules compiled successfully
i  firestore: deploying indexes...
+  firestore: deployed indexes in firestore.indexes.json successfully

+  Deploy complete!

Project Console: https://console.firebase.google.com/project/your-project-id/overview

Here you will find all the setup guides for Admin Panel configuration.

Important Notes:
  • Some Firebase features require the Blaze plan.
  • If you are on the free Spark plan, please upgrade to Blaze Plan for full functionality.

Update HTML Title

<head>
  ...
  <title>Your New App Name</title>
  ...
</head>

1. Install Firebase CLI Tools

npm install -g firebase-tools

2. Authenticate Firebase CLI

firebase login

3. Create a Firebase Project

firebase projects:create

OR

1 Add Firebase to your Flutter App:
  • On the Firebase Project Overview page, you will see the text "Get started by adding Firebase to your app" with platform icons (iOS, Android, Web, Unity, Flutter).
  • Click the Flutter icon (the last icon, looks like a diamond shape).
  • Firebase will show the "Add Firebase to your Flutter app" wizard with two commands.
2 Run the FlutterFire CLI commands shown in the wizard:
$ dart pub global activate flutterfire_cli
$ flutterfire configure --project=YOUR_PROJECT_ID

This automatically registers your per-platform apps with Firebase and adds a lib/firebase_options.dart configuration file to your Flutter project.

  • After running both commands, click Next in the Firebase wizard.
  • Then click Continue to console.

4. Initialize Firebase in Your Flutter App

dart pub global activate flutterfire_cli
flutterfire configure --project=YOUR_PROJECT_ID
Platform Selection (Admin Panel = Web only):
? Which platforms should your configuration support?
  ( ) android
  ( ) ios
  ( ) macos
  (*) web        <-- Select ONLY this
  ( ) windows

Use arrow keys and Space to select web only. Press Enter to confirm.

1. Generate a Google Maps API Key

2. Add API Key to Flutter Web

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>

Flutter Web

For Flutter web, the favicon represents your application in the browser tab.

Replace Favicon:
Tip:

You can use online tools like favicon.io or realfavicongenerator.net to generate favicons from your logo in all required sizes.

Note:

Run all commands below from the project folder in your Android Studio terminal or system terminal.

1. Create the Build for Server Upload

flutter clean
flutter pub get
flutter build web --release
Compiling lib/main.dart for the Web...
✓ Built build\web                                          19.5s
build/web/
Note:

Run all commands below from the project folder in your terminal.

1. Build and Deploy Using Firebase Hosting

npm install -g firebase-tools
firebase login
firebase init
Follow the Firebase Init prompts:
? Are you ready to proceed? (Y/n) y

? Which Firebase features do you want to set up?
  (*) Hosting: Configure files for Firebase Hosting
      and (optionally) set up GitHub Action deploys

=== Project Setup
? Please select an option: Use an existing project
i  Using project your-project-id

=== Hosting Setup
? What do you want to use as your public directory? build/web
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? Set up automatic builds and deploys with GitHub? No
flutter build web --release
firebase deploy
Expected Deployment Output:
=== Deploying to 'esellify-app'...

i  deploying firestore, hosting
i  hosting[esellify-app]: beginning deploy...
i  hosting[esellify-app]: found 516 files in build/web
+  hosting[esellify-app]: file upload complete
+  hosting[esellify-app]: version finalized
+  hosting[esellify-app]: release complete

+  Deploy complete!

Project Console: https://console.firebase.google.com/project/esellify-app/overview
Hosting URL: https://esellify-app.web.app
Success:

Your Admin Panel is now live! Copy the Hosting URL shown in the output (e.g., https://esellify-app.web.app) to access your deployed admin panel.

Here you will find all the setup guides for configuring the Customer & Seller Apps (Android & iOS).

Changing the package name of a Flutter project involves updating multiple files and configurations for both Android and iOS platforms.

Android

Update the applicationId in build.gradle:
defaultConfig {
    applicationId "com.new.package.name"
}
Rename Java Package Directories:
Update AndroidManifest.xml:
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.new.package.name">
</manifest>
Update Other Manifest Files:

iOS

Update PRODUCT_BUNDLE_IDENTIFIER in Xcode:
Update Bundle Identifier in Info.plist:

Prerequisites

Android

Update AndroidManifest.xml:
<application
    android:name="${applicationName}"
    android:icon="@mipmap/ic_launcher"
    android:label="Your App Name"
    ...>
</application>
Update strings.xml:
<string name="app_name">Your New App Name</string>

iOS

Update Info.plist:
<key>CFBundleName</key>
<string>Your New App Name</string>
Update Display Name in Xcode:
Note:

This setup applies to both the Admin Panel, Customer App, and Seller App. The steps are identical.

1. Install Firebase CLI Tools

npm install -g firebase-tools

2. Authenticate Firebase CLI

firebase login

3. Create a Firebase Project

firebase projects:create

OR

On the Project Overview page, click the Flutter icon under "Get started by adding Firebase to your app". The wizard will show two commands to run:
$ dart pub global activate flutterfire_cli
$ flutterfire configure --project=YOUR_PROJECT_ID

Run both in your project terminal. Then click NextContinue to console.

4. Initialize Firebase in Your Flutter App

dart pub global activate flutterfire_cli
flutterfire configure --project=YOUR_PROJECT_ID
Platform Selection (Customer/Seller App = Android & iOS):
? Which platforms should your configuration support?
  (*) android    <-- Select this
  (*) ios        <-- Select this
  ( ) macos
  ( ) web
  ( ) windows

Use arrow keys and Space to select android and ios. Press Enter.

Firebase configuration file lib/firebase_options.dart generated successfully
with the following Firebase apps:

Platform  Firebase App Id
android   1:XXXXXXXXX:android:XXXXXXXXX
ios       1:XXXXXXXXX:ios:XXXXXXXXX

1. Create a Firebase Project

2. Add Your Flutter App to Firebase

Android Setup:
iOS Setup:

3. Add Firebase Packages

dependencies:
  firebase_core: ^latest
  firebase_auth: ^latest
  cloud_firestore: ^latest
flutter pub get

4. Configure DefaultFirebaseOptions

flutterfire configure

5. Initialize Firebase in main.dart

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(MyApp());
}

1. Generate a Google Maps API Key

2. Add API Key - Android

<meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="YOUR_API_KEY"/>

3. Add API Key - iOS

import GoogleMaps
GMSServices.provideAPIKey("YOUR_API_KEY")
Security Tip:
  • Restrict your API key in the Google Cloud Console to specific apps (using package name/bundle ID) and specific APIs to prevent unauthorized usage.

SHA keys are required for Firebase services like Google Sign-In and Phone Authentication on Android.

1. Generate SHA Keys

For Windows (Debug Keystore):
keytool -list -v -keystore "%USERPROFILE%\.android\debug.keystore" -alias androiddebugkey -storepass android -keypass android
For macOS/Linux (Debug Keystore):
keytool -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android

2. Add SHA Keys to Firebase Console

🔎 Navigation Path: Firebase Console → ⚙ Gear Icon → Project Settings → General tab → Your apps → Android app → Add Fingerprint
Important Notes:
  • For release builds, use your custom release keystore (not the default debug one).
  • Keep your keystore file secure and never expose it publicly.
  • You must regenerate SHA keys if you change your signing configuration or keystore.
Note:

Run all commands from your project folder in the terminal.

1. Generate APK (for direct installation)

flutter clean
flutter pub get
flutter build apk --release
build/app/outputs/flutter-apk/app-release.apk

2. Generate AAB (for Google Play Store)

flutter clean
flutter pub get
flutter build appbundle --release
build/app/outputs/bundle/release/app-release.aab
Difference between APK and AAB:
  • APK: Universal package for direct installation or testing on devices.
  • AAB: Optimized format required by Google Play Store. It generates smaller, device-specific APKs automatically.

Using Command-Line Interface (CLI)

Open Terminal and navigate to your project:
cd path/to/your_flutter_project
Run the Flutter App:
flutter run

Using Android Studio

Using Visual Studio Code

Useful Flutter Commands:
  • flutter devices - List all connected devices
  • flutter run -d chrome - Run on Chrome (web)
  • flutter run -d <device_id> - Run on a specific device
  • flutter run --release - Run in release mode

1. Get Notification Sender ID

🔎 Navigation Path: ⚙ Gear Icon → Project Settings → Cloud Messaging tab → Sender ID

2. Get Web Push Certificate (VAPID Key)

🔎 Navigation Path: Project Settings → Cloud Messaging tab → Web configuration → Web Push certificates → Copy Key pair

3. Get Web Client ID (for Google Sign-In)

🔎 Navigation Path: Authentication → Sign-in method → Google (edit) → Web SDK configuration → Web client ID

4. Get Firebase Service Account JSON File

🔎 Navigation Path: ⚙ Gear Icon → Project Settings → Service accounts tab → Generate new private key

5. Add All Keys in Admin Panel

Admin Panel → Settings → Notification Settings:
Field What to Enter
Notification Sender Key The Sender ID copied from Cloud Messaging tab
Web Notification Key The VAPID Key copied from Web Push certificates
Client ID for Google Login The Web client ID from Authentication → Google
Upload JSON File The Service Account JSON file downloaded from Firebase

1. Add Notification Key in Admin Panel

2. Configure Firebase Messaging in Flutter Web

How to get Firebase config values:
Update firebase-messaging-sw.js:
// Give the service worker access to Firebase Messaging.
importScripts('https://www.gstatic.com/firebasejs/10.7.1/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/10.7.1/firebase-messaging-compat.js');

// Your Firebase Config
firebase.initializeApp({
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID",
  measurementId: "YOUR_MEASUREMENT_ID"
});

const messaging = firebase.messaging();

1. Update Firebase Credentials in Landing Page

// Your Firebase Config
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID",
  measurementId: "YOUR_MEASUREMENT_ID"
};

2. Get Firebase Credentials

No Web App shown?

If no Web App is listed, click "Add app" → select the Web icon (</>) → enter a nickname → click "Register app". The firebaseConfig will then appear.

3. Replace the Config

🔎 Navigation Path: Firebase Console → ⚙ Gear Icon → Project Settings → General tab → Your apps → Web app → SDK setup and configuration → Copy firebaseConfig

Here are solutions to common issues you might encounter during setup.

Flutter Issues

"flutter" is not recognized as a command
flutter doctor shows issues

Firebase Issues

Firebase CLI not found
Permission denied during firebase deploy

Google Maps Issues

Map shows grey/blank

Build Issues

Build fails with Gradle errors
iOS build fails
Q: Do I need a Mac to build the iOS app?

Yes. Xcode is required for building iOS apps, and Xcode only runs on macOS. You can develop and test the Android and Web versions on Windows or Linux.

Q: Which Firebase plan do I need?

The Blaze plan (pay-as-you-go) is recommended. phone authentication, and some other features are not available on the free Spark plan. The Blaze plan still includes a free usage tier.

Q: Can I use my own backend instead of Firebase?

eSellify is designed to work with Firebase. Using a different backend would require significant modifications to the codebase.

Q: How do I update the app after making changes?

After making code changes, rebuild the app using the appropriate build commands (flutter build apk, flutter build web, etc.) and redeploy.

Q: The app crashes on startup. What should I check?
Q: Which payment gateways are supported?

eSellify supports Stripe, Razorpay, PayPal, Flutterwave, and Cash on Delivery (COD). You can configure your preferred gateway in the Admin Panel settings.

Q: How do I contact support?
Version 1.0 7 April 2026 Latest
  • Initial Release.