Skip to main content
KYYMIDNIGHT
Back to Selected Work
EDITORIAL CASE STUDY // 01—Live
[SISWAMART — School Promotional Product Catalog (SMKN 11 Bandung)]

A school-based promotional product catalog connecting student sellers with buyers through WhatsApp.

01 / PROJECT IDENTITYSiswaMartSMKN 11 Bandung
02 / CATEGORY & ROLEDeveloper & UI/UX DesignerWeb Development & UI/UX
03 / TRANSACTION MODELDirect via WhatsAppNo In-App Payment Gateway
04 / LIVE DEPLOYMENTVisit Live Catalog
SPECIMEN // 01 — EDITORIAL VISUAL SYSTEMPROMOTIONAL MEDIA → WHATSAPP HANDOFF
School Entrepreneurship Platform
SISWAMART

Digital Product Catalog · Direct WhatsApp Ordering

NODE 01

Student Sellers

Curated 10-Digit NISN

NODE 02

Admin Moderation

Two-Stage Edit Review

NODE 03

WhatsApp Order

Direct Buyer → Seller

CATALOG CARD ANATOMYCSS SCHEMATIC
STATUS: TERSEDIASTORE: BUKA
PRODUCT SPECIMEN
CATEGORY // MAKANAN & MINUMAN
Student Product Listing
Rp 12.000
Pesan via WhatsApp
VERIFIED STACK
LaravelPHP 8.3MySQLBladeTailwind CSSAlpine.jsJavaScript
[01 // PROJECT OVERVIEW]

Context, Purpose & Scope

Web Development & UI/UX · Developer & UI/UX Designer

SiswaMart was created to give student entrepreneurs at SMKN 11 Bandung a dedicated digital space to promote their products—ranging from snacks and heavy meals to beverages and desserts—to fellow students, teachers, and the wider school community.

Rather than operating as an online checkout or integrated payment marketplace, SiswaMart functions as a promotional product catalog. Visitors explore product details, check whether items are ready stock or pre-order, read buyer reviews, and message the student seller directly on WhatsApp to arrange in-person school pickup.

Core Business Logic — Promotional Catalog & WhatsApp Ordering

SiswaMart is a promotional product catalog, not an integrated payment marketplace. The website displays verified product listings and seller profiles, while order coordination and payment happen directly between buyer and seller on WhatsApp.

[PERSONAL CONTRIBUTION]

My Role & Responsibilities

I worked on SiswaMart across UI/UX design, frontend Blade and Tailwind implementation, and core Laravel backend workflows.

AREA // 01

UI/UX & Visual Design

  • Defined the interface layout, color tokens, typography pairing (Fredoka and Plus Jakarta Sans), and tactile card borders suited for a friendly school catalog.
  • Designed the user flows for public buyers, student sellers, and school administrators to keep daily tasks straightforward on both desktop and mobile screens.
AREA // 02

Frontend Implementation

  • Built responsive views using Laravel Blade components, Tailwind CSS v4, and Alpine.js for category filtering, modal dialogs, and status tabs.
  • Created consistent status indicators for product stock (Tersedia, Pre-Order, Habis), store availability (Buka / Tutup), and moderation states.
AREA // 03

Backend & Moderation Logic

  • Implemented role-based routes and controllers for Public, Penjual (Seller), and Admin workspaces with MySQL relational models.
  • Developed the WhatsApp redirection and click-logging endpoint, two-stage product edit moderation workflow, guest review profanity filter, and PDF/Excel report exports.
[02 // PROBLEM & SOLUTION]

From scattered school promotions to a structured catalog.

LEFT COLUMN // THE PROBLEM

Informal & Fragmented Discovery

Student sellers previously promoted their products through scattered chat messages and temporary status updates, making it difficult for buyers around school to see what was available each day.

Existing Challenges

  • 01Product photos, prices, and availability (Ready Stock vs. Pre-Order) were buried across group chats and expiring social media stories.
  • 02Buyers had no central directory to browse by category, compare student products, or check whether a student seller's store was currently open or closed.
  • 03Operating within a school environment required teacher/admin oversight so that seller accounts are verified, product edits are reviewed before going live, and public comments stay respectful.
  • 04Introducing a commercial payment gateway or shipping checkout would add unnecessary fees and friction for face-to-face school transactions.

Core User Needs

  • NEED 01Buyers need a single, login-free catalog to discover available food, snacks, and drinks at school.
  • NEED 02Student sellers need a dedicated workspace to manage product listings, update stock status, and share their WhatsApp contact.
  • NEED 03School administrators need structured moderation controls to verify student identities (NISN) and review product changes before publication.
DIAGRAM A — BEFORE SISWAMART (FRAGMENTED CHANNELS)
Scattered Group Chats & Stories
No Stock / Store Status Visibility
Missed School Orders
RIGHT COLUMN // THE SOLUTION

Centralized Catalog + WhatsApp Handoff

Designed and developed a web-based promotional catalog with a direct WhatsApp ordering handoff, supported by dedicated Student Seller and School Admin workspaces.

Product Approach

  • 01Built an open public product catalog with keyword search, category filters (Dessert, Makanan Berat, Minuman, Snack), price range filtering, and store open/close badges.
  • 02Implemented a Direct-to-WhatsApp ordering flow (`GET /produk/{slug}/whatsapp`) that logs promotional click interest and opens a pre-filled WhatsApp chat with the seller.
  • 03Created a Student Seller dashboard (`/penjual`) to manage product listings, toggle store availability, track product views and WhatsApp clicks, and export recap reports.
  • 04Engineered a School Admin moderation panel (`/admin`) featuring curated 10-digit NISN seller registration, two-stage product edit moderation, and automated guest review filtering.

User & School Benefits

  • BENEFIT 01Zero checkout friction: buyers go from product discovery to direct WhatsApp conversation in one click.
  • BENEFIT 02Safe school governance: live products stay intact while proposed edits (`pending_changes`) await admin approval.
  • BENEFIT 03Structured visibility: student sellers gain a permanent showcase and exportable PDF/Excel promotional reports.
DIAGRAM B — WITH SISWAMART (STRUCTURED FLOW)
1. Moderated Catalog
2. Category Discovery
3. Direct WhatsApp Chat
[03 // PRODUCT ARCHITECTURE]

System flow from student seller listing to WhatsApp conversation.

SiswaMart separates public product discovery and school moderation from payment settlement—routing order intent directly into WhatsApp so student sellers and buyers can coordinate in-person school pickup.

GOVERNANCE LAYER // SCHOOL ADMIN (/admin)

Curated Seller Onboarding & Two-Stage Product Edit Moderation

pending_action: create | update | deletepending_changes (JSON)
STAGE // 01

Student Sellers

Workspace (/penjual)

  • ·Verified 10-digit NISN student account
  • ·Submits products & proposes edits
  • ·Toggles store status (Buka / Tutup)
CORE NODE
STAGE // 02

SiswaMart Catalog

Laravel + MySQL Core

  • ·Two-Stage Product Edit Moderation
  • ·Stores active listing + pending_changes
  • ·Filters guest reviews (CommentModerationService)
CORE NODE
STAGE // 03

Product Discovery

Open Public Directory

  • ·Category, keyword & price filtering
  • ·Stock badges (Tersedia / PO / Habis)
  • ·Zero login required for buyers
CORE NODE
STAGE // 04

WhatsApp Handoff

GET /produk/{slug}/whatsapp

  • ·Logs click to produk_views_logs
  • ·Generates pre-filled order message
  • ·Redirects directly to wa.me/{seller}
EXTERNAL HANDOFF
STAGE // 05

Buyers

School Community

  • ·Students, teachers & school staff
  • ·Coordinate pickup & COD on WhatsApp
  • ·Leave moderated public product ratings
CORE NODE
Explicit Architectural Boundary — No Integrated Payment Gateway

SiswaMart intentionally excludes in-app shopping carts, escrow wallets, and third-party payment gateways. The web application serves strictly as a verified promotional catalog; once a buyer clicks Pesan via WhatsApp, order confirmation and COD payment happen directly between buyer and student seller on WhatsApp.

WEB CATALOG ROLE:Discovery & Moderation
TRANSACTION CHANNEL:WhatsApp (wa.me)
FULFILLMENT:In-School Pickup / COD
[04 // CORE FEATURES]

Verified platform capabilities illustrated through functional UI compositions.

Each card below pairs a verified feature from the SiswaMart codebase with an interactive or schematic UI composition built directly with HTML, CSS, and React.

FEATURE // 01

Product Catalog

Open public directory displaying student-made products with clear pricing, stock availability (Tersedia, Pre-Order, Habis), and promotional labels.

TERSEDIARP 10.000
Nasi Ayam Katsu Siswa
ULASAN: TERMODERASIREADY STOCK
FEATURE // 02

Product Categories

Structured category browsing (Makanan Berat, Minuman, Snack, Dessert) combined with keyword search and minimum/maximum price filters.

INTERACTIVE FILTER SPECIMEN
ROUTE: GET /kategori/makanan-berat
FEATURE // 03

Seller Profiles

Dedicated student seller identities linked to verified 10-digit NISN records, displaying store name, class/major, and real-time store Open/Closed status.

Dapur Siswa XI PPLG
NISN VERIFIED · 10 DIGITS
PATCH /penjual/status-toko (Click badge to toggle)
FEATURE // 04

Product Management

Seller workspace (`/penjual`) to submit new products, stage edits or deletion requests, monitor view and WhatsApp click counts, and download PDF/Excel reports.

AKTIFLIVE
PENDINGSTAGED
EXPORTPDF/XLSX
Tracks page views & WhatsApp clicks per product
FEATURE // 05

Admin Moderation

School Admin panel (`/admin`) with side-by-side review of staged product edits (`pending_changes`), seller onboarding, and automated guest review profanity filtering.

PUBLIC: Harga Rp 10.000STAYS ONLINE
STAGED: Harga Rp 12.000AWAITING ADMIN
FEATURE // 06

WhatsApp Contact Integration

Direct-to-WhatsApp handoff (`GET /produk/{slug}/whatsapp`) that logs promotional click interest before opening `wa.me` with a pre-formatted order message.

GET /produk/risoles-mayo/whatsapp
wa.me/628xxx?text=Halo...
Ongoing & Planned Exploration
SEPARATED FROM LIVE WEB FEATURES

Mobile Companion App Integration (In Progress)

Connecting a cross-platform mobile companion app to the existing Laravel Sanctum `/api/v1` endpoints so students can browse the catalog and manage seller status from an installable mobile client.

Time-Range Promotional Analytics

Expanding seller dashboard charts with weekly and monthly comparisons of product page views versus WhatsApp order clicks.

[05 // UI DESIGN DECISIONS]

Visual system, design tokens, and component principles.

The interface was designed around an approachable, tactile visual language suited for a school canteen and student entrepreneurship directory while keeping product information easy to scan. The diagrams below document the actual design tokens and component rules used in SiswaMart without relying on browser screenshots.

01 // COLOR PALETTE TOKENSACTUAL CSS VARIABLES
Primary Slate Blue
Brand identity, primary navigation & active controls
#3F6A96--primary
Deep Ink Outline
2.5px tactile structural borders & offset shadows
#1F3550--ink-border
Soft Daylight Surface
High-readability public catalog canvas
#F5F8FC--bg-main
Warm School Gold
Category highlights, ratings & promotional badges
#F2B84B--accent
Ready Stock Emerald
Tersedia stock badge & direct WhatsApp action cue
#1F9D68--success
02 // TYPOGRAPHY HIERARCHYDUAL-FONT SYSTEM
Display & Price Numeralsclamp(1.75rem, 3.5vw, 2.75rem)
Fredoka (600–700)

Friendly, rounded character for headings and product prices.

Interface & Data Copy0.875rem – 1.125rem
Plus Jakarta Sans (400–700)

Clean geometric legibility for descriptions, tables, and forms.

03 // SPACING & ELEVATIONTACTILE RULES
Border Weight2.5px Solid InkConsistent card & button framing
Tactile Shadow4px 4px 0pxShifts on hover/active press
Card Radius24px (--radius-lg)Approachable rounded containers
Badge Radius9999px (Pill)Stock & category status tags
04 // COMPONENT PRINCIPLES & INTERACTIVE STATESSCHEMATIC EXPLANATION (NOT A DEPLOYED SCREENSHOT)

Button & Status Badge Hierarchy

Interactive controls in SiswaMart use solid structural outlines and immediate hover/press offset feedback so students on mobile or desktop always know which action is primary.

PRIMARY ACTION — DIRECT WHATSAPP HANDOFF
Pesan via WhatsApp
STOCK & STORE STATUS BADGE TOKENS
● TERSEDIA (READY)◐ PRE-ORDER (PO)○ HABIS (SOLD OUT)
PRODUCT CARD DESIGN PRINCIPLES — 4-TIER INFORMATION HIERARCHY
TIER 01 / AVAILABILITY FIRST

Top badges immediately answer whether the item is Ready Stock or Pre-Order and whether the student seller's store is currently Open (`Buka`).

TIER 02 / VISUAL & CATEGORY CUE

Consistent aspect-ratio product framing paired with a category tag (`Makanan Berat`, `Minuman`, `Snack`, `Dessert`) keeps multi-row grids aligned.

TIER 03 / SCANNABLE PRICE & SELLER

High-contrast Rupiah pricing and verified student store attribution help buyers compare options within seconds during school break times.

TIER 04 / SINGLE-ACTION HANDOFF

Each card concludes with a clear action that logs promotional interest and opens WhatsApp—avoiding multi-step cart modals.

[06 // DEVELOPMENT PROCESS]

Six-stage editorial engineering timeline.

Built with Laravel, PHP 8.3, Blade components, Tailwind CSS v4, Alpine.js, and MySQL, with backend workflows tailored to school governance and shared-hosting deployment.

MILESTONE // 01Phase 01 — Discovery & Scope

Planning

Analyzed how student sellers at SMKN 11 Bandung promote products daily and defined a promotional catalog model instead of a complex payment gateway.

KEY IMPLEMENTATION DELIVERABLES
  • →Role boundaries: Public Buyer, Student Seller (/penjual), School Admin (/admin)
  • →Relational MySQL schema for users, penjual, kategori, produk, ulasan, and produk_views_logs
  • →Direct-to-WhatsApp order handoff specification (ADR-001)
MILESTONE // 02Phase 02 — Visual Language

UI/UX Design

Established the tactile design system, evolving from an early warm orange concept into a structured slate-blue and warm-gold palette with clear status badges.

KEY IMPLEMENTATION DELIVERABLES
  • →Color token hierarchy (#3F6A96 primary, #1F3550 ink border, #F2B84B accent)
  • →Typography scale pairing Fredoka display headings with Plus Jakarta Sans body copy
  • →Product card anatomy prioritizing stock status, store availability, price, and WhatsApp CTA
MILESTONE // 03Phase 03 — Interface Engineering

Frontend Implementation

Translated the design system into modular Laravel Blade views, Tailwind CSS v4 utility tokens, and lightweight Alpine.js interactive states.

KEY IMPLEMENTATION DELIVERABLES
  • →Responsive public catalog grid, category filter pills, and price range search
  • →Seller product management table with status tabs (Aktif, Menunggu Moderasi, Ditolak)
  • →Admin side-by-side product diff viewer and seller onboarding forms
MILESTONE // 04Phase 04 — Core Architecture
Penjual\ProdukController & Admin\ProdukController

Backend Development

Built role-protected controllers, curated 10-digit NISN seller onboarding, and the two-stage product edit moderation workflow.

KEY IMPLEMENTATION DELIVERABLES
  • →Two-Stage Product Edit Moderation via pending_action and pending_changes (JSON)
  • →Curated student seller registration with 10-digit NISN validation
  • →Laravel Breeze session auth + Laravel Socialite Google OAuth matching
MILESTONE // 05Phase 05 — Platform Capabilities
Public\ProdukController & App\Support\XlsxWriter

Feature Integration

Connected WhatsApp redirection tracking, automated guest review profanity filtering, and dependency-free PDF/Excel report exports.

KEY IMPLEMENTATION DELIVERABLES
  • →Direct-to-WhatsApp click tracker (GET /produk/{slug}/whatsapp)
  • →CommentModerationService with leetspeak normalization and dictionary filtering
  • →DomPDF A4 summaries and custom OpenXML XlsxWriter multi-sheet exports
MILESTONE // 06Phase 06 — Quality & Release

Testing & Refinement

Verified role middleware boundaries, applied rate limiting on public endpoints, and prepared Laravel Sanctum REST API routes for mobile companion expansion.

KEY IMPLEMENTATION DELIVERABLES
  • →Rate throttling on product views, WhatsApp redirects, and guest review submissions
  • →Shared-hosting deployment optimization and storage symlink verification
  • →REST API (/api/v1) readiness for ongoing mobile companion integration
[07 // TECHNOLOGY STACK]

Verified repository stack & architectural layers.

Every technology below is verified directly against the SiswaMart codebase—organized by its exact role in the application rather than decorative icon grids.

LAYER // 01VERIFIED IMPLEMENTATION

Backend & Database

Role-based web routing, Eloquent ORM models, two-stage product edit moderation, and relational database architecture.

TECHNOLOGIES & PACKAGES
LaravelPHP 8.3MySQL
LAYER // 02VERIFIED IMPLEMENTATION

Frontend & UI

Server-rendered Blade templates, custom CSS design tokens, and lightweight client-side interactivity.

TECHNOLOGIES & PACKAGES
Blade ComponentsTailwind CSS v4Alpine.jsJavaScriptVite
LAYER // 03VERIFIED IMPLEMENTATION

Authentication & API

Curated school session authentication, Google OAuth email matching, and token-based REST API endpoints (`/api/v1`).

TECHNOLOGIES & PACKAGES
Laravel BreezeLaravel SocialiteLaravel Sanctum
LAYER // 04VERIFIED IMPLEMENTATION

Reporting & Utilities

Printable A4 Landscape PDF summaries and dependency-free multi-sheet `.xlsx` spreadsheet generation with formula-injection protection.

TECHNOLOGIES & PACKAGES
DomPDFCustom OpenXML XlsxWriter
[08 // KEY LEARNINGS & REFLECTION]

What I learned designing and building SiswaMart.

Building SiswaMart taught me how to align interface design and backend rules with the way students and teachers actually interact at school.

REFLECTION // 01 — Technical Challenges

The most interesting backend challenge was designing Two-Stage Product Edit Moderation (`pending_action` and `pending_changes` JSON) so student sellers could edit prices or descriptions without hiding their currently approved product from the public catalog while waiting for admin review.

REFLECTION // 02 — Design Decisions

Choosing a login-free public catalog paired with a Direct-to-WhatsApp button removed unnecessary account creation and payment gateway friction, matching how students naturally coordinate COD pickup at school.

REFLECTION // 03 — Development Experience

Working across the full Laravel stack—from MySQL migrations and Eloquent relationships to reusable Blade components and custom OpenXML `.xlsx` generation—strengthened my ability to connect UI clarity with reliable server-side rules.

REFLECTION // 04 — Future Iterations

In future iterations, I plan to complete the mobile companion client powered by the `/api/v1` Sanctum endpoints and add date-range filtering to the seller promotional analytics dashboard.

KEY TAKEAWAY 01

Designing around real habits: Using a Direct-to-WhatsApp promotional flow instead of a complex checkout kept the platform practical and familiar for daily school transactions.

KEY TAKEAWAY 02

Staged moderation without downtime: Implementing Two-Stage Product Edit Moderation (`pending_changes` and `pending_action`) showed me how to maintain admin oversight without hiding a seller's active listing every time they update a price or description.

KEY TAKEAWAY 03

Cohesive UI across roles: Translating color, border, and typography tokens into reusable Blade components helped keep the public catalog, seller dashboard, and admin workspace visually consistent.

Back to Homepage
Visit SiswaMart LiveGet in Touch