Case Study
Shop Eleven
Full-Stack E-Commerce Platform
A full-stack e-commerce platform built with Laravel — combining a customer-facing storefront with an authenticated admin dashboard for store management. Designed around a clean shopping experience, responsive interfaces, product administration, and a lightweight WhatsApp checkout workflow.
Role
Full-Stack Developer
Stack
Laravel · PHP · MySQL · Blade · JavaScript
Status
Live
Category
E-Commerce
Project Snapshot
01
Product Catalog
Browse and display products dynamically.
02
Cart System
Client-side cart in JavaScript with localStorage for quantity updates and item removal.
03
Cloudinary
Product imagery managed through Cloudinary.
04
WhatsApp Checkout
Orders are transferred into a WhatsApp-based checkout flow.
05
Admin Panel
Store management and product administration through an authenticated dashboard.
The Problem
Shop Eleven needed a straightforward e-commerce experience where customers could browse products, manage their cart, and quickly move from product discovery to placing an order.
The application needed to work well across desktop and mobile while keeping the purchasing flow simple.
Requirement Focus
- Product discovery without friction
- Cart management before checkout
- Responsive storefront experience
- Simple order handoff workflow
The Solution
I built the application using Laravel as the backend and application framework, with Blade templates rendering the storefront interface.
- Dynamic product data from MySQL
- Database-backed product catalog
- Responsive shop interface
- Client-side cart with localStorage
- Cloudinary image management
- WhatsApp checkout handoff
- Authenticated admin dashboard
- Product catalog administration
- Category administration
Responsive by Default
Mobile Home
Mobile Shop
Designed to remain usable across desktop and mobile screen sizes.
Product Discovery
The shop interface dynamically presents available products while keeping navigation, categories, and product discovery straightforward.
public/js/shop.js
javascript
Media Management
Product imagery is managed through Cloudinary, allowing the application to work with externally hosted product assets rather than relying entirely on local server storage.
app/Services/CloudinaryService.php
php
Cart Architecture
The cart is implemented in JavaScript with localStorage as the source of truth. It supports quantity updates, item removal, and checkout handoff via WhatsApp.
public/js/cart.js
javascript
Checkout Flow
Rather than implementing an online card payment gateway, Shop Eleven uses WhatsApp as the final ordering channel. The customer's cart and order information is prepared and transferred into WhatsApp to continue the purchase conversation.
Cart
Review Order
Order Confirmation
public/js/checkout.js
javascript
Store Management
Shop Eleven includes an authenticated admin dashboard for managing day-to-day store operations. Store owners can access product data and maintain catalog content without touching the customer-facing storefront.
Admin Authentication
The admin area is protected behind Laravel authentication. Only authorised users can access store management routes, keeping product data separate from the public shopping experience.
Product Management
Administrators can view and edit products — updating names, descriptions, pricing, stock quantities, category assignments, and product imagery through the admin interface.
Backend & Data
Laravel handles the application logic and database interactions, with MySQL providing persistent storage for the application's core data — including products, categories, and orders. Cart state lives in the browser via localStorage, separate from the backend.
Schema Overview
categories
Product category groupings for catalog organisation.
users
Store administrators and authenticated user accounts.
products
Product records with pricing, stock, and category references.
orders
Customer order headers and checkout metadata.
order_items
Line items linked to individual orders.
Architecture / Tech Stack
Frontend
- Blade
- HTML
- CSS
- JavaScript
Backend
- Laravel
- PHP
Database
- MySQL
Media
- Cloudinary
Order Flow
What I Built
Dynamic Product Management
Products are stored in MySQL and rendered dynamically through Laravel and Blade templates.
Responsive Storefront
The shop interface adapts across desktop and mobile screen sizes without sacrificing usability.
Cart Functionality
Client-side cart logic in JavaScript uses localStorage as the source of truth, supporting quantity updates, item removal, and checkout handoff via WhatsApp.
Cloudinary Media Integration
Product images are managed through Cloudinary rather than relying entirely on local storage.
WhatsApp Checkout
Order details are compiled and handed off to WhatsApp for the final purchase conversation.
Laravel / MySQL Backend
Application logic, routing, and persistence are handled through Laravel with a MySQL database.
Admin Dashboard
Authenticated admin area for managing store operations, products, and categories.
Under the Hood
app/Models/Product.php
php
public/js/cart.js
javascript
public/js/checkout.js
javascript
Outcome
Shop Eleven resulted in a working full-stack e-commerce application with a customer-facing storefront and an authenticated admin system for store management — including product browsing, a responsive shop interface, cart functionality, Cloudinary-powered product imagery, WhatsApp-based checkout, and a Laravel/MySQL backend.
- Customer-facing storefront
- Authenticated admin dashboard
- Product catalog administration
- Responsive shop interface
- Cart functionality
- Cloudinary-powered product imagery
- WhatsApp-based checkout
- Laravel/MySQL backend