How I Built Boutiqo Bangladesh: From Static Boutique Site to Full-Stack E-commerce Platform

Founder Build Notes

From local boutique problem to full operational platform

This write-up documents how one real commerce workflow evolved into a maintainable engineering system without paid infrastructure.

Business-first build 0-cost deployment Full-stack migration

$0 Launch infra cost

Built on Vercel Hobby + Atlas M0 + GitHub workflow.

1 Codebase System scope

Storefront, admin panel, and API routes in one repo.

5+ Automations Operational speed

Realtime updates, notifications, and auto deployment loops.

Phased Migration Risk strategy

Incremental shift from static to API-backed architecture.

Why I Built This

Boutiqo Bangladesh started as a practical business need: create a fast, elegant online storefront for boutique fashion in Bangladesh, while keeping operating costs near zero.

The first version was a static site with hardcoded product data and social-media-based ordering. It worked, but growth exposed clear limits:

• Product updates were manual and time-consuming.
• Orders were not tracked in a structured way.
• Reviews were local-only (browser storage), not centralized.
• There was no admin control panel, no robust analytics, and no scalable workflow.

I rebuilt the platform as a modern full-stack system with a maintainable architecture, while preserving the original brand identity and still running everything on free tiers.

Product Vision

My goal was not just to "make a website." I wanted a complete operational system for a boutique business:

• A polished storefront for discovery and conversion.
• A structured on-site order flow and tracking.
• An admin dashboard for products, orders, reviews, and operations.
• Automated notifications and real-time updates.
• A roadmap for analytics and AI features.

Tech Stack and Why I Chose It

Core Application

• Next.js 14 (App Router)
• TypeScript
• React 18
• Tailwind CSS

Why: App Router enables clean route organization for storefront, admin, and API in one codebase. TypeScript keeps contracts consistent across frontend, backend, and database models. Tailwind + custom global CSS allowed me to preserve the brand design while keeping development fast.

Data Layer

• MongoDB Atlas (M0 free tier)
• Mongoose
• Zod for validation

Why: MongoDB is ideal for flexible product and order structures, especially early-stage feature evolution. Mongoose schemas and indexes improve consistency and query performance. Zod gives strict runtime input validation at API boundaries.

Auth, Real-Time, and Notifications

• JWT auth (with jose/bcrypt patterns)
• Pusher Channels (real-time updates)
• Email via Gmail SMTP / Resend
• Telegram Bot API for admin alerts

Why: Admin authentication needed to be secure but lightweight. Orders are operationally time-sensitive, so real-time events improve response speed. Multi-channel notifications reduce missed orders.

Hosting and Ops

• Vercel for deployment and hosting
• GitHub for source control and repository storage
• MongoDB Atlas for managed DB

Why: All three integrate well and can run a real business-grade app at zero infrastructure cost in early stages.

Architecture Deep Dive

The project is organized as a modular full-stack platform with clear boundaries.

Storefront + Admin UI

->

Domain APIs in Next.js

->

MongoDB Atlas State

->

Pusher + Email + Telegram

• Modular APIs keep business domains isolated and maintainable.
• Each order event propagates instantly to operational channels.
• One pipeline supports both customer experience and admin execution.

1) Application Layer (Next.js App Router)

The src/app directory contains:

• Storefront routes (/, /collections, /products/[id], /about, /contact, /track-order, etc.)
• Admin routes (/admin/*)
• API routes (/api/*)

This architecture keeps UI and backend endpoints in one repository while still preserving separation of concerns.

Storefront

The customer-facing side includes:

• Dynamic product listing and detail pages
• Image galleries and lightbox interactions
• Multi-step order modal
• Order tracking by order ID
• Responsive design and animation system

Admin

The admin dashboard includes:

• Login and protected routes
• Product CRUD operations
• Order management and status workflows
• Review moderation
• Operational overview screens

2) API Layer

The API surface is segmented by domain:

• /api/products: product retrieval and admin CRUD
• /api/orders: order creation, admin retrieval/update, and tracking
• /api/reviews: public submissions and admin moderation
• /api/admin and auth routes: login/logout/session checks
• /api/pusher/auth: channel auth for private real-time events

This domain-based route split keeps each module understandable and testable.

3) Data Modeling

The platform uses dedicated schemas for:

• Product
• Order
• Admin
• Review

Key characteristics: Unique IDs and indexed fields where needed. Explicit order lifecycle states with status history. Validation across both schema and API layers. This moved the platform from fragile hardcoded arrays to a durable, queryable system.

4) Security Model

Security is implemented through several layers:

• JWT-based admin authentication
• Cookie/session boundary for protected operations
• Middleware protection for admin routes
• Request validation on API entry points
• Server-side authorization checks for admin-only endpoints

This ensures public users can browse/order safely, while sensitive operations remain restricted.

5) Real-Time and Notification Architecture

Operational automations are event-driven.

When an order is created or updated:

1. The API processes and validates the request.
2. Database state is written.
3. Pusher events notify dashboards in real time.
4. Email and Telegram workflows notify stakeholders.

Benefits: Faster order response, better visibility for admin, lower risk of missed actions.

Design System and Frontend Engineering

A major requirement was preserving Boutiqo's existing visual identity:

• Butter and gold palette (with brand black as anchor)
• Playfair Display (headings) + Montserrat (body)
• Signature interactions: scroll reveal, product-card hover depth, modal blur, and smooth transitions

The frontend combines:

• Tailwind design tokens from central config
• Global CSS for advanced animation/interactions
• Reusable UI components for consistency

Result: A UI that remains brand-faithful while becoming more maintainable and scalable.

The Migration Strategy

I followed a phased migration rather than a risky full rewrite in one shot.

Migration timeline at a glance

1. Phase 1 - Static storefront baseline Validate product demand and customer buying behavior quickly.
2. Phase 2 - API and database foundation Replace hardcoded data and local-only flows with persistent backend modules.
3. Phase 3 - Admin + realtime operations Add dashboards, status workflows, and live notifications for execution speed.
4. Phase 4 - Analytics and AI roadmap Layer forecasting, reporting, and AI-assisted decision support on top.

Legacy Baseline

The old site was static HTML/CSS/JS with:

• Shared script for product data and utility logic
• External messaging-based ordering (Messenger/WhatsApp)
• LocalStorage reviews

Full-Stack Migration

I progressively migrated into:

• Next.js component architecture
• API-backed data flows
• Database persistence
• Admin operations
• Real-time + notification infrastructure

This phased approach reduced breakage risk and kept the product usable during development.

How It Is Deployed and Maintained Fully Free

One of my strongest goals was a sustainable zero-cost architecture.

Infrastructure Cost Model

Current deployment uses free tiers:

• Vercel Hobby: web hosting and deployment
• MongoDB Atlas M0: database
• GitHub: repository hosting, code history, collaboration

At this stage, development and deployment are effectively $0.

Deployment Flow

1. Code is pushed to GitHub.
2. Vercel automatically detects updates and starts a new deployment.
3. Environment variables are managed in Vercel project settings.
4. New version is published automatically after successful build.

This gives continuous delivery without a paid CI/CD platform.

Maintenance Workflow

To keep maintenance lightweight and reliable:

• Type-safe contracts in TypeScript reduce regression risk.
• Modular API route ownership keeps debugging scoped.
• Seed scripts support environment reproducibility.
• Shared utility and component layers reduce duplication.
• Versioned Git history enables quick rollback if needed.

Automations Implemented

Several automations are already part of the system:

• Auto deployment on Git push via Vercel + GitHub integration
• Real-time admin updates through Pusher events
• Email notifications for order events
• Telegram notifications for immediate admin awareness
• Scripted DB seeding for consistent initialization

These automations reduce manual overhead and improve operational reliability.

Operational pulse board

Deployment loop Git push to production through Vercel auto-deploy.

Order visibility Pusher keeps dashboard state synchronized in real time.

Notification coverage Email plus Telegram reduces missed order response windows.

Recovery confidence Versioned Git history keeps rollback paths clean and fast.

End-to-End Order Flow (Technical Sequence)

A simplified sequence:

1. Customer browses products and opens multi-step order flow.
2. Client validates required input and sends order payload to /api/orders.
3. API validates payload (Zod), creates order document, assigns order ID/status.
4. System emits real-time event for admin dashboard updates.
5. Notification channels (email/Telegram) are triggered.
6. Admin updates order lifecycle state from dashboard.
7. Customer checks progress through tracking route using order ID.

This flow replaced ad-hoc social messaging with a structured, trackable workflow.

Engineering Challenges and What I Learned

1) Balancing brand fidelity with system modernization

The original visual identity was important, so I treated the design system as a non-negotiable constraint while rebuilding architecture underneath.

2) Keeping complexity controlled

As features grew (admin, APIs, notifications, real-time), strict module boundaries became critical to avoid a monolith-like tangle.

3) Building for scale on free infrastructure

I designed for pragmatic efficiency first, with upgrade paths ready for paid tiers when traffic and throughput require it.

Future Roadmap

The project roadmap continues into advanced business intelligence and AI functionality.

Phase 2: Analytics

Planned/ongoing additions include:

• Revenue and profit analysis
• Cost breakdowns
• Product performance insights
• Exportable financial reports

Phase 3: AI Layer

Planned additions include:

• Gemini-powered analysis and assistant features
• AI-generated business summaries
• Knowledge-base-assisted chatbot workflows
• Sentiment and trend analysis from reviews and operational data

Operational Enhancements

Future improvements I intend to implement:

• More advanced monitoring and error reporting
• Stronger test coverage across API and UI
• Improved caching and performance optimization at scale
• More automation around reporting and scheduled insights

What This Project Represents

Boutiqo Bangladesh is both a real product and a systems-engineering case study:

• Product engineering: UX + conversion flow
• Backend architecture: APIs + validation + auth
• Data engineering fundamentals: schemas + lifecycle states
• DevOps pragmatism: CI/CD-like workflow on free tiers

Most importantly, it shows that a maintainable, production-ready full-stack platform can be built and operated with strong technical standards, even under strict budget constraints.

Final Note

I built this platform to solve a real business workflow, not just to showcase isolated technical features. It is live, usable, and evolving, with a clear path toward analytics-driven and AI-augmented operations.