TREVOLaunch guide

No-code launch checklist

Your Trevo store is built.
Here's how to make it live.

Complete the steps below in order. The webstore works in demo mode now; real orders, payments and automatic WhatsApp messages activate as you add your own service credentials.

Storefront built Admin built Connect services Publish
Stack

Recommended technology

This project uses a modern web stack that is fast, maintainable and suitable for a growing fashion brand.

Web app

Next.js-style Vinext, React 19 and TypeScript for the storefront and admin dashboard.

Data

Firebase Firestore, Authentication and Storage. Sites D1/R2 adapters are also included for immediate hosted persistence.

Backend

Validated server APIs plus Firebase Cloud Functions for orders, payments, inventory and webhooks.

Hosting

OpenAI Sites for the working build; Firebase Hosting, Cloudflare or Netlify remain compatible alternatives.

Overview

How everything connects

Customer storeCatalog · cart · checkout
Secure APIsValidation · order totals
Firebase / D1Products · orders · users
WhatsApp Cloud API Payment provider Storage

Customers browse products in the webstore. The server validates every order and recalculates totals before saving it. The admin reads the same order record, updates fulfilment and payment status, and can contact the customer through WhatsApp.

Step 1

Connect Firebase

Estimated time: 15–20 minutes. You only do this once.

  1. 1
    Create the project

    Open Firebase Console , choose Add project, name it Trevo Store, and follow the prompts.

  2. 2
    Turn on three services

    Open Build in the left menu. Create a Firestore Database in production mode, enable Email/Password and Google under Authentication, and enable Storage.

  3. 3
    Add a web app

    Open Project settings → Your apps → Web. Register Trevo Web. Firebase shows six configuration values. Copy each value into a new file named .env.local, following .env.example.

  4. 4
    Add server credentials

    Project settings → Service accounts → Generate new private key. Keep the downloaded JSON private. Set GOOGLE_APPLICATION_CREDENTIALS to its full file path before importing products.

  5. 5
    Deploy security rules

    Install Firebase CLI and sign in, then run:

    npm install -g firebase-tools
    firebase login
    firebase use --add
    firebase deploy --only firestore:rules,storage
Never upload the service-account JSON or .env.local to GitHub.

The included .gitignore protects the usual secret files. Firebase browser keys are identifiable but security still depends on Auth, App Check and rules.

Step 2

Upload products and images

Your Trevo CSV is included

The live catalog is built from data/TREVO_Firebase_Products.csv. Its supported headings are SKU, Product Name, Category, Regular Price, Sale Price, Stock and Image URL. Future CSV files can use the same format.

npm run firebase:import:check -- --file "data/TREVO_Firebase_Products.csv"
npm run firebase:import -- --file "data/TREVO_Firebase_Products.csv"The first command checks all rows without changing Firebase.

Images from folders

Create one folder per SKU inside data/product-images. Example: data/product-images/TRV-PC-001/. Name photos 01.jpg, 02.jpg, 03.jpg in display order.

npm run firebase:upload-images -- --folder "data/product-images"The script uploads images and connects their URLs to matching SKUs.
Admin method

After Firebase Admin authentication is active, use Admin dashboard → Products → Import CSV or Add product. Product photos accept JPG, PNG or WebP up to 8 MB.

Step 3

Configure WhatsApp

The store already supports reliable wa.me checkout using +92 300 7041451. This opens the customer's WhatsApp with cart items and totals pre-filled—no API approval is required.

MVP — already active

WhatsApp checkout and support deep links. You respond manually from WhatsApp Business.

Cost: Free
Automated confirmations

Create a Meta Business app, add WhatsApp Cloud API, then fill WHATSAPP_PHONE_NUMBER_ID, WHATSAPP_ACCESS_TOKEN and WHATSAPP_VERIFY_TOKEN. Point the Meta webhook to the deployed whatsappWebhook function.

Requires Meta approval and message templates

Automatic order confirmation and tracking messages must use Meta-approved templates outside the 24-hour customer-service window.

Step 4

Configure payment collection

The live MVP supports the payment rules already requested:

  • JazzCash: 0300 7041451
  • EasyPaisa: 0300 7041451
  • Bank transfer instructions are provided through Trevo WhatsApp
  • Cash on delivery — Rs. 200 security advance before dispatch
  • Standard delivery — free above Rs. 1,500, otherwise Rs. 250
  • Urgent delivery — Rs. 500 and never free

The payment number is already included in checkout. For online cards or wallets later, open an approved merchant account with your chosen provider, set PAYMENT_PROVIDER, add its public/secret keys, and register its signed webhook URL. The backend's paymentWebhook updates the matching order only after verifying the webhook secret.

Trevo never stores card numbers.

Customers enter card details only in the payment provider's hosted or tokenized payment screen. Store references and payment status, not raw card data.

Step 5

Run the website on your computer

  1. 1
    Install Node.js 22

    Download the LTS installer from nodejs.org.

  2. 2
    Open the project folder in Terminalcd trevo-fashion-store
  3. 3
    Install and startnpm install
    npm run dev

    Open the local address printed in Terminal. Stop it with Ctrl+C.

Storefront: / · Admin: /admin · This guide: /setup

Step 6

Deploy from GitHub and connect trevopk.com

GitHub stores the source code but does not run this store's secure backend. Do not use GitHub Pages. The simplest setup is GitHub + Vercel for the web app, with Firebase handling products, orders, authentication and storage.

  1. 1
    Create a separate GitHub repository

    Name it trevo-webstore and keep it private while testing. Upload the complete project contents—not the outer ZIP folder. Do not upload node_modules, .env.local or Firebase service-account JSON.

  2. 2
    Deploy Firebase resourcesfirebase deploy --only functions,firestore:rules,storage
  3. 3
    Import your attached productsnpm run firebase:import -- --file "data/TREVO_Firebase_Products.csv"
  4. 4
    Connect GitHub to Vercel

    In Vercel choose Add New → Project → Import trevo-webstore. Framework: Next.js. Build command: npm run build:vercel. Add the values from .env.example as Environment Variables, then deploy.

  5. 5
    Connect the domain

    Add trevopk.com and www.trevopk.com in Vercel. Copy the exact DNS records Vercel displays into GoDaddy. Remove old Netlify records only after the new Vercel address is fully tested.

  6. 6
    Test one real order

    Confirm it appears in Admin, receives the correct delivery fee, uses WhatsApp 0300 7041451 and changes payment status only after verification.

Required

Security and compliance checklist

  • Admin accessEnable Firebase Auth and grant the custom admin: true claim only to the owner account.
  • Order validationThe server recalculates subtotal, delivery and total. Never trust totals sent by the browser.
  • SecretsKeep service accounts, provider secrets and webhook secrets in hosted environment variables.
  • Customer privacyCollect only delivery information, publish a privacy policy, and delete data according to your retention policy.
  • UploadsRestrict file type and size. Product images are public; payment proofs must remain admin-only.
  • OperationsEnable Firebase App Check, alerts, backups and error monitoring before paid advertising.
Plan

Implementation priority

MVP · included

Start selling reliably

  • Responsive catalog, product galleries and filters
  • Cart, wishlist and guest checkout
  • WhatsApp checkout and support
  • Delivery and advance-payment rules
  • Admin products, orders, customers and payments
  • CSV import, Firebase schema and image upload
  • Inventory alerts and basic sales reporting
Phase 2

Automate and scale

  • Fully synced customer accounts and wishlists
  • Automated WhatsApp templates and tracking events
  • Live card/wallet gateway and automatic refunds
  • Courier API and printed shipping labels
  • Discount codes, abandoned carts and email flows
  • Pixel analytics, attribution and conversion reporting
  • Multi-vendor roles and vendor payout ledger if Trevo opens to sellers

Ready for your data

Next: add your Trevo CSV and real bag photos.

The code is complete. Product data and third-party credentials are the only remaining inputs.

Open admin dashboard