ShopEase: Full-Stack E-Commerce Platform

Angular 20 Storefront with Firebase Auth, Firestore and an Admin Dashboard

Angular 20TypeScriptFirebase AuthCloud FirestoreFirebase HostingSCSSReactive FormsGitHub Actions
Project Overview

Built ShopEase, a responsive online store with a full shopping flow: browse and filter products, add to cart and wishlist, check out, and track orders. Customers sign in with email or Google, and an admin dashboard shows revenue and order KPIs and lets admins manage products and orders in real time. Built with Angular 20 (standalone components, signals, lazy-loaded routes) and Firebase Authentication and Cloud Firestore, with role-based access enforced by Firestore security rules and automatic builds and deploys through GitHub Actions.

Key Features
  • Product catalogue with search, category and price filters, sorting and pagination
  • Product pages with discount pricing, stock indicators and quantity selector
  • Persistent cart and wishlist
  • Checkout with address validation and order confirmation
  • Order history with a status tracker (Confirmed, Shipped, Delivered)
  • Email/password and Google sign-in, password reset
  • Admin dashboard: KPI tiles, 7-day revenue chart and orders-by-status breakdown
  • Admin product and order management with real-time status updates
  • Responsive design for mobile and desktop
Results
  • Complete storefront-to-admin flow across 10+ pages with lazy-loaded routes
  • Role-based security enforced server-side through Firestore security rules
  • Hand-built dashboard charts with no chart library
  • CI/CD with GitHub Actions: build on every push or PR, deploy on main
Technical Challenges
  • Keeping the cart for both guests and signed-in shoppers
  • Preventing overselling and price tampering at checkout
  • Separating customer and admin access securely
  • Running a full checkout flow without paid infrastructure
Solutions Implemented
  • Cart saved in localStorage for guests, synced to Firestore for signed-in users and merged on login
  • Checkout re-checks prices and stock on the server side and updates stock atomically with a Firestore transaction
  • Route guards (auth, admin, guest) plus role-based access enforced by Firestore security rules, so users cannot promote themselves to admin
  • Built-in demo payment mode with a test card form, so the whole flow works on Firebase's free Spark plan
Technology Stack
Angular 20TypeScriptFirebase AuthCloud FirestoreFirebase HostingSCSSReactive FormsGitHub Actions

Interested in Similar Projects?

Let's discuss how I can help bring your ideas to life with modern technologies and data-driven solutions.