VibeKoding / Level 2 ยท DeveloperLevel 2 ยท Developer / Proyek: E-Commerce Sembako Berbasis MicroservicesProyek: E-Commerce Sembako Berbasis Microservices
VK

Proyek: E-Commerce Sembako Berbasis MicroservicesProyek: E-Commerce Sembako Berbasis Microservices

๐Ÿ“š Level 2 ยท DeveloperLevel 2 ยท Developer ๐ŸŒ Dual Bahasa (ID / EN) โšก VibeKoding Native

Modul praktis Level 2 VibeKoding: Proyek: E-Commerce Sembako Berbasis Microservices.Modul praktis Level 2 VibeKoding: Proyek: E-Commerce Sembako Berbasis Microservices.

OverviewOverview

This project requires you to build a grocery e-commerce microservices system from scratch, based on a real PRD. Unlike previous single-service projects, the backend here is split into multiple independent services by business domain, unified through an API gateway. You'll learn how to design service boundaries and handle cross-service data consistency.This project requires you to build a grocery e-commerce microservices system from scratch, based on a real PRD. Unlike previous single-service projects, the backend here is split into multiple independent services by business domain, unified through an API gateway. You'll learn how to design service boundaries and handle cross-service data consistency.

This is the comprehensive practical section of Stage 2. Microservices architecture is very common in real-world applications. Once you understand service decomposition and gateway routing, you'll be able to handle more complex backend system designs.This is the comprehensive practical section of Stage 2. Microservices architecture is very common in real-world applications. Once you understand service decomposition and gateway routing, you'll be able to handle more complex backend system designs.

PrerequisitesPrerequisites

Before starting this project, you should already be familiar with:Before starting this project, you should already be familiar with:

Learning ObjectivesLearning Objectives

After completing this project, you will be able to:After completing this project, you will be able to:

  1. Read a PRD and extract a development task list for a microservices systemRead a PRD and extract a development task list for a microservices system
  2. Decompose service boundaries by business domain (auth, catalog, inventory, order)Decompose service boundaries by business domain (auth, catalog, inventory, order)
  3. Design and implement API gateway routingDesign and implement API gateway routing
  4. Handle cross-service issues like inventory deduction and order consistencyHandle cross-service issues like inventory deduction and order consistency
  5. Complete end-to-end integration and deliver a demo-ready microservices prototypeComplete end-to-end integration and deliver a demo-ready microservices prototype
  6. Project OverviewProject Overview

    You will build a grocery e-commerce microservices system:You will build a grocery e-commerce microservices system:

    SubsystemResponsibility
    User FrontendBrowse products, place orders, view order history
    Admin PortalProduct management, inventory management, order management

    The backend is split into these services:The backend is split into these services:

    ServiceResponsibility
    API GatewayUnified entry point, route forwarding, auth verification
    Auth ServiceUser registration, login, JWT issuance
    Catalog ServiceProduct information management
    Inventory ServiceStock quantity management
    Order ServiceOrder creation, status management
    ๐Ÿ’ก Tips Praktis๐Ÿ’ก Pro Tip

    The requirements document for this project is on GitHub: [View PRD](https://github.com/datawhalechina/easy-vibe/blob/main/docs/en/stage-2/assignments/simple-grocery-microservices/PRD.md)The requirements document for this project is on GitHub: [View PRD](https://github.com/datawhalechina/easy-vibe/blob/main/docs/en/stage-2/assignments/simple-grocery-microservices/PRD.md)

    { title: 'Requirements', description: 'Read PRD, define service decomposition, pages, and transaction flow' },{ title: 'Requirements', description: 'Read PRD, define service decomposition, pages, and transaction flow' },

    { title: 'Scaffold', description: 'Generate frontend, gateway, and service skeletons' },{ title: 'Scaffold', description: 'Generate frontend, gateway, and service skeletons' },

    { title: 'Iterate', description: 'Add APIs module by module, fix inventory and order consistency' },{ title: 'Iterate', description: 'Add APIs module by module, fix inventory and order consistency' },

    { title: 'Launch', description: 'End-to-end testing, deploy, and prepare demo' }{ title: 'Launch', description: 'End-to-end testing, deploy, and prepare demo' }

    ]" />]" />

    Part 1: Requirements AnalysisPart 1: Requirements Analysis

    1.1 Read the PRD1.1 Read the PRD

    Open the PRD document and answer these key questions:Open the PRD document and answer these key questions:

    • How should services be decomposed? What are the responsibility boundaries of each service?How should services be decomposed? What are the responsibility boundaries of each service?
    • What pages do the user frontend and admin portal each need?What pages do the user frontend and admin portal each need?
    • What is the inventory deduction strategy after an order is placed? How to handle success / failure / timeout?What is the inventory deduction strategy after an order is placed? How to handle success / failure / timeout?
    • Which complex capabilities (distributed transactions, message queues) should be skipped in the first version?Which complex capabilities (distributed transactions, message queues) should be skipped in the first version?
    โš ๏ธ Catatan Keamanan / Peringatanโš ๏ธ Warning / Security Note

    If the above questions don't have clear answers, don't start coding. Unclear requirements are the most common cause of rework.If the above questions don't have clear answers, don't start coding. Unclear requirements are the most common cause of rework.

    1.2 Confirm System Architecture1.2 Confirm System Architecture

    mermaid
    flowchart TD prd["PRD"] --> fe["Frontend Pages"] fe --> gw["API Gateway"] gw --> auth["Auth Service"] gw --> catalog["Catalog Service"] gw --> inventory["Inventory Service"] gw --> order["Order Service"] order --> inventory
    

    Part 2: Project ScaffoldingPart 2: Project Scaffolding

    2.1 Generate Project Structure2.1 Generate Project Structure

    Prompt reference:Prompt reference:

    text
    Based on the current PRD, help me generate a project scaffold for a grocery e-commerce microservices system. Requirements: 1. Generate user frontend and admin portal skeletons 2. Generate five directories: api-gateway, auth-service, catalog-service, inventory-service, order-service 3. Each service should only have a minimal runnable entry point 4. Don't connect to a real database or payment system yet
    

    2.2 Verify Project Structure2.2 Verify Project Structure

    Check each item:Check each item:

    • [ ] Five service directories have clear structure[ ] Five service directories have clear structure
    • [ ] API Gateway starts and forwards requests[ ] API Gateway starts and forwards requests
    • [ ] Each service's health check endpoint works[ ] Each service's health check endpoint works
    • [ ] User frontend and admin portal pages are accessible[ ] User frontend and admin portal pages are accessible

    Part 3: Iterative DevelopmentPart 3: Iterative Development

    3.1 Module-by-Module Progress3.1 Module-by-Module Progress

    1. API Gateway: Route configuration, JWT verification middlewareAPI Gateway: Route configuration, JWT verification middleware
    2. Auth Service: Registration, login, JWT issuanceAuth Service: Registration, login, JWT issuance
    3. Catalog Service: Product CRUD, list queriesCatalog Service: Product CRUD, list queries
    4. Inventory Service: Stock queries, stock deductionInventory Service: Stock queries, stock deduction
    5. Order Service: Order creation, status transitions, inventory integrationOrder Service: Order creation, status transitions, inventory integration
    6. Admin Portal: Product management, inventory management, order managementAdmin Portal: Product management, inventory management, order management
    7. 3.2 Module Self-Check3.2 Module Self-Check

      Check ItemVerification Method
      Gateway routingAre service APIs correctly forwarded through the gateway?
      Auth isolationAre user and admin APIs properly separated?
      Data consistencyAre product and inventory data in sync?
      Transaction loopAfter ordering, are inventory deduction and order status consistent?
      Failure handlingIs there a compensation mechanism for insufficient stock or timeout?

      Part 4: Integration & LaunchPart 4: Integration & Launch

      4.1 End-to-End Testing4.1 End-to-End Testing

      At minimum, verify these scenarios:At minimum, verify these scenarios:

      • Browse products โ†’ Add to cart โ†’ Place order โ†’ View orderBrowse products โ†’ Add to cart โ†’ Place order โ†’ View order
      • Admin โ†’ Add product โ†’ Update inventory โ†’ View ordersAdmin โ†’ Add product โ†’ Update inventory โ†’ View orders

      DeliverablesDeliverables

      After completing this project, submit the following:After completing this project, submit the following:

      • [ ] Accessible live demo link[ ] Accessible live demo link
      • [ ] Source code repository link (with README)[ ] Source code repository link (with README)
      • [ ] PRD document[ ] PRD document
      • [ ] Core page screenshots (product list, order page, order history, admin dashboard)[ ] Core page screenshots (product list, order page, order history, admin dashboard)
      • [ ] 60-second demo video[ ] 60-second demo video

      Grading CriteriaGrading Criteria

      DimensionBasic RequirementsAdvanced Requirements
      PRD AlignmentPages, features, and service decomposition basically match PRDCan clearly explain service decomposition rationale
      Product LoopBrowse โ†’ Order โ†’ Inventory deduction โ†’ View order works end-to-endOrder timeout or insufficient stock has compensation mechanism
      Service ArchitectureEach service starts independently, accessible through gatewayInter-service communication has error handling and retry
      Admin CapabilityProduct, inventory, and order management are functionalAdmin portal has data statistics
      Engineering CompletenessFrontend, gateway, services, database pipeline connectedHas Docker Compose or similar orchestration

      ReferencesReferences

      • [UI Design](../../frontend/ui-design/)[UI Design](../../frontend/ui-design/)
      • [Modern Component Libraries](../../frontend/modern-component-library/)[Modern Component Libraries](../../frontend/modern-component-library/)
      • [Database to Supabase](../../backend/database-supabase/)[Database to Supabase](../../backend/database-supabase/)
      • [API Code with LLM Assistance](../../backend/ai-interface-code/)[API Code with LLM Assistance](../../backend/ai-interface-code/)
      • [Git & GitHub Workflow](../../backend/git-workflow/)[Git & GitHub Workflow](../../backend/git-workflow/)
      • [Web App Deployment](../../backend/zeabur-deployment/)[Web App Deployment](../../backend/zeabur-deployment/)