MUHAMMAD FAZA ABIYYU

SYSTEM ANALYST & SOFTWARE DEVELOPER

0
Back to Projects
Case Study E-Commerce Platform QA Tested

QWERTY

A Modern, High-Performance E-Commerce Platform

Built with Next.js 16 and Bun runtime, QWERTY features a premium monochrome design system, hybrid data persistence via GitHub API, SHA-256 password hashing, JWT-based authentication with role-based access control, and a fully integrated simulator ecosystem for developers.

3 Simulator Endpoints
SHA-256 Password Hashing
RBAC Role-Based Auth
Katalon Automated QA
Problem

Developer-Unfriendly E-Commerce Testing

Most e-commerce platforms depend on real third-party services (SMTP, payment gateways) during development, making it impossible to test critical flows like OTP verification, payment success/failure, and webhook events without live credentials or external infrastructure.

Solution

Integrated Simulator Ecosystem

QWERTY ships with a built-in simulator layer: a Mock SMTP server with a real-time inbox dashboard, a payment webhook simulator, and a dummy payment UI — all CORS-enabled and accessible without any external setup. This enables full end-to-end testing in isolation.

Functional Requirements

Code Requirement Description
FR-01User RegistrationCreate account with strong password validation (centralized rules)
FR-02JWT AuthenticationLogin with SHA-256 hashed passwords and JWT cookie issuance
FR-03Role-Based AccessSeparate permissions for Admin and Customer roles
FR-04Password RecoveryOTP generation, delivery via email simulator, and secure reset flow
FR-05Hybrid PersistenceLocal JSON for dev; GitHub API file sync for production (bypass Vercel read-only FS)
FR-06Email SimulatorMock SMTP endpoint with real-time inbox dashboard at /emailer-simulator
FR-07Payment SimulatorTrigger success/failure webhook events at /webhook-simulator
FR-08Dummy Payment UISafe checkout simulation environment at /dummy-payment
FR-09Product ManagementAdmin CRUD for product catalog with image and inventory tracking
FR-10Order LifecycleCustomer checkout, order history, and admin order status management

Simulator Ecosystem

Email Simulator

Mock SMTP Server

Intercepts all outgoing emails (OTPs, notifications) and displays them in a real-time inbox dashboard. No SMTP credentials required.

POST /api/simulators/emailer GET /emailer-simulator

Webhook Simulator

Payment Gateway Mock

Simulates payment gateway callbacks (Bank Transfer). Trigger success or failure events without a real payment provider.

POST /api/webhook/payment GET /webhook-simulator

Dummy Payment UI

Checkout Simulation

A safe, sandboxed UI for testing the full customer checkout experience from cart to payment confirmation without real transactions.

GET /dummy-payment

Auth & Security Endpoints

Endpoint Method Description
/api/auth/registerPOSTCreate a new user with centralized strong password validation
/api/auth/loginPOSTAuthenticate and receive JWT as a secure HTTP-only cookie
/api/auth/forgot-passwordPOSTTrigger OTP generation (sent to terminal & email simulator)
/api/auth/reset-passwordPOSTReset password using a valid, time-limited OTP

Tech Stack

FrameworkNext.js 16 (App Router)
RuntimeBun
StylingVanilla CSS / Tailwind CSS
IconsLucide React
StateZustand / React Context
AuthJWT + SHA-256 Hashing
DatabaseJSON + GitHub API Sync
QAKatalon Studio

Testing Strategy

Automated Testing

Katalon Studio Integration

All critical user flows — registration, login, password recovery, checkout, and order history — are covered with consistent data-testid attributes for stable, reliable automated test execution.

View Automation Repo →
Documentation

Test Case Scenarios

Comprehensive test case documentation and scenarios are maintained in Google Sheets, covering positive/negative paths, edge cases, and expected outcomes for every major feature.

View Test Docs →