🛍️ E-Commerce · Lifestyle

TLC E-Commerce Store

A full-featured lifestyle e-commerce platform with smart product discovery, persistent cart and wishlist, real-time order tracking, comprehensive admin dashboard with revenue analytics, dark/light theme toggle, and responsive design — all built with vanilla JavaScript and Firebase backend.

Role Full-Stack Developer

Duration 3 Months

Category E-Commerce / Lifestyle

Status Production

Platform Metrics

E-commerce at scale.

🛒

Persistent Cart

❤️

Wishlist System

📊

Revenue Analytics

🌗

Dark/Light Theme

The Problem

Small brands priced out of e-commerce.

Established e-commerce platforms charge monthly fees, transaction percentages, and template customization costs that small lifestyle brands can't justify. Shopify, WooCommerce, and BigCommerce all require ongoing investment before the first sale.

TLC needed a custom storefront that looked premium, performed like a native app, and gave them full control over their customer experience — without the recurring Shopify tax and with analytics that actually informed business decisions.

The Solution

Custom storefront with zero platform fees.

A bespoke e-commerce platform built with vanilla JavaScript and Firebase. Product catalog, cart, checkout, and order management all custom-built. Firebase provides real-time database, authentication, and hosting — eliminating the need for a custom backend while keeping costs at the free tier level.

The admin dashboard provides real-time revenue tracking, inventory management, and customer analytics. Dark/light theme switching lets customers browse in their preferred mode. Every interaction is optimized for conversion: persistent cart across sessions, one-click wishlist, and a streamlined 3-step checkout.

Features

Full-stack e-commerce, zero compromise.

🔍 Smart product discovery — Category filtering, price range sliders, size/color selectors, and instant search with auto-suggestions. Products sorted by popularity, price, and newest arrivals.
🛒 Persistent cart — Cart state saved to LocalStorage and synced with Firebase when authenticated. Survives browser restarts, device switches (when logged in), and session timeouts.
❤️ Wishlist system — Save products for later with one click. Wishlist persists across sessions and shows real-time stock alerts for saved items running low.
📦 Order tracking — Real-time order status updates: Confirmed → Processing → Shipped → Delivered. Email notifications at each stage via Firebase Cloud Functions.

📊 Admin dashboard — Revenue charts, best-selling products, customer acquisition metrics, inventory alerts, and order management. All data visualized with Chart.js.
🌗 Dark/light theme — Full theme toggle with CSS custom properties. Preference saved and applied instantly on return visits. Product images optimized for both modes.
💳 Streamlined checkout — 3-step checkout: shipping details → payment selection → order review. Guest checkout available. Form validation with real-time feedback.
📱 Mobile-first responsive — Touch-optimized product cards, swipeable image galleries, bottom-sticky cart button, and mobile-specific navigation patterns.

Tech Stack

Lean, fast, and cost-effective.

🟡 JavaScript

Vanilla ES6+ for all storefront logic: product rendering, cart management, filtering/sorting, form validation, and theme switching. No framework overhead.

Vanilla JS ES6+ Modules

🔥 Firebase

Firestore for product catalog and orders. Authentication for customer accounts and admin access. Cloud Functions for email notifications. Analytics for user behavior tracking.

Firestore Auth Functions Analytics

🎨 CSS Grid & Flexbox

Responsive product grid with auto-fit columns. CSS custom properties for theme switching. Smooth animations for cart interactions and page transitions.

CSS Grid Custom Properties Animations

💾 LocalStorage

Client-side persistence for guest cart, theme preference, recently viewed products, and search history. Syncs with Firebase on authentication.

LocalStorage Offline Cart State Sync

Architecture

How the platform works.

Presentation Layer

Vanilla JS + CSS Grid storefront with dynamic product rendering, real-time cart updates, and dark/light theme toggle

State Management

LocalStorage for guest state → Firebase sync on authentication. Cart, wishlist, and preferences merge seamlessly on login

Backend Services

Firebase Firestore (products, orders, users), Cloud Functions (email notifications, inventory alerts), Authentication (email/Google)

Admin Panel

Chart.js dashboards, CRUD operations for products/orders, role-based access control via Firebase custom claims