VibeKoding / Level 2 ยท DeveloperLevel 2 ยท Developer / Proyek: Sistem Rekomendasi Film Enterprise (Spring Boot)Proyek: Sistem Rekomendasi Film Enterprise (Spring Boot)
VK

Proyek: Sistem Rekomendasi Film Enterprise (Spring Boot)Proyek: Sistem Rekomendasi Film Enterprise (Spring Boot)

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

Modul praktis Level 2 VibeKoding: Proyek: Sistem Rekomendasi Film Enterprise (Spring Boot).Modul praktis Level 2 VibeKoding: Proyek: Sistem Rekomendasi Film Enterprise (Spring Boot).

OverviewOverview

This project requires you to build a movie website with recommendation capabilities using Spring Boot, based on a real PRD. The core challenge is not simple CRUD โ€” it's thinking about "how user behavior affects recommendations" and "how to make recommendations explainable."This project requires you to build a movie website with recommendation capabilities using Spring Boot, based on a real PRD. The core challenge is not simple CRUD โ€” it's thinking about "how user behavior affects recommendations" and "how to make recommendations explainable."

This is the comprehensive practical section of Stage 2. You'll encounter the "content + behavior + recommendation" product development pattern for the first time, which is common in e-commerce, content platforms, and personalized feeds.This is the comprehensive practical section of Stage 2. You'll encounter the "content + behavior + recommendation" product development pattern for the first time, which is common in e-commerce, content platforms, and personalized feeds.

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 recommendation systemRead a PRD and extract a development task list for a recommendation system
  2. Set up a Spring Boot project and implement RESTful APIsSet up a Spring Boot project and implement RESTful APIs
  3. Design a complete data pipeline from "user behavior โ†’ recommendation"Design a complete data pipeline from "user behavior โ†’ recommendation"
  4. Implement explainable recommendation logicImplement explainable recommendation logic
  5. Complete end-to-end integration and deliver a demo-ready product prototypeComplete end-to-end integration and deliver a demo-ready product prototype
  6. Project OverviewProject Overview

    You will build a movie website with recommendation capabilities:You will build a movie website with recommendation capabilities:

    FeatureDescription
    Browse & SearchUsers can browse and search for movies
    Ratings & FavoritesUsers can rate and favorite movies
    Personalized RecommendationsThe system generates recommendations based on user behavior
    Admin DashboardAdmins manage movie data and view recommendation performance
    ๐Ÿ’ก 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/movie-recommendation-springboot/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/movie-recommendation-springboot/PRD.md)

    { title: 'Requirements', description: 'Read PRD, define recommendation strategy, behavior data, and admin scope' },{ title: 'Requirements', description: 'Read PRD, define recommendation strategy, behavior data, and admin scope' },

    { title: 'Scaffold', description: 'Use AI to generate list, detail, recommendation, and admin pages' },{ title: 'Scaffold', description: 'Use AI to generate list, detail, recommendation, and admin pages' },

    { title: 'Iterate', description: 'Add recommendation logic, behavior tracking, and admin management' },{ title: 'Iterate', description: 'Add recommendation logic, behavior tracking, and admin management' },

    { 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:

    • What is the recommendation strategy? Should the first version use an explainable approach (e.g., rating-based similarity)?What is the recommendation strategy? Should the first version use an explainable approach (e.g., rating-based similarity)?
    • What user behavior data should be stored? (ratings, favorites, browsing history, etc.)What user behavior data should be stored? (ratings, favorites, browsing history, etc.)
    • What recommendation performance metrics should admins see?What recommendation performance metrics should admins see?
    • Is the page list complete?Is the page list complete?
    โš ๏ธ 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"] --> web["Frontend Pages"] web --> auth["User Auth"] web --> movie["Movie List / Details"] web --> behavior["Rating / Favorite"] behavior --> reco["Recommendation Logic"] reco --> db["Database"] admin["Admin Dashboard"] --> db
    

    Part 2: Project ScaffoldingPart 2: Project Scaffolding

    2.1 Generate Frontend Pages2.1 Generate Frontend Pages

    Prompt reference:Prompt reference:

    text
    Based on the current PRD, help me generate a frontend scaffold for a Spring Boot movie recommendation system. Requirements: 1. Pages: homepage, movie list, movie detail, recommendation page, user profile, admin dashboard 2. Only generate page structure with mock data first, no real API integration 3. Style should look like a real content product, not a classroom demo
    

    2.2 Verify Page Structure2.2 Verify Page Structure

    Check each item:Check each item:

    • [ ] Movie list page supports search and filtering[ ] Movie list page supports search and filtering
    • [ ] Movie detail page includes rating and favorite buttons[ ] Movie detail page includes rating and favorite buttons
    • [ ] Recommendation page shows results with recommendation reasons[ ] Recommendation page shows results with recommendation reasons
    • [ ] Admin dashboard displays movie data and recommendation performance[ ] Admin dashboard displays movie data and recommendation performance

    Part 3: Iterative DevelopmentPart 3: Iterative Development

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

    1. Spring Boot Setup: Project structure, database configuration, basic CRUDSpring Boot Setup: Project structure, database configuration, basic CRUD
    2. Movie Data Management: Movie list, detail, search APIsMovie Data Management: Movie list, detail, search APIs
    3. User Behavior: Rating, favorite APIs, behavior data storageUser Behavior: Rating, favorite APIs, behavior data storage
    4. Recommendation Logic: Implement recommendation algorithm based on user behaviorRecommendation Logic: Implement recommendation algorithm based on user behavior
    5. Recommendation Display: Show recommendation results with explanationsRecommendation Display: Show recommendation results with explanations
    6. Admin Dashboard: Movie data management, recommendation performance reviewAdmin Dashboard: Movie data management, recommendation performance review
    7. 3.2 Module Self-Check3.2 Module Self-Check

      Check ItemVerification Method
      Basic featuresIs list, detail, rating, favorite a closed loop?
      Recommendation linkageDoes user behavior affect recommendation results?
      ExplainabilityCan users understand why these movies were recommended?
      Admin dataCan admins view movie data and recommendation performance?

      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 movies โ†’ Rate โ†’ Favorite โ†’ View recommendation page, confirm results changeBrowse movies โ†’ Rate โ†’ Favorite โ†’ View recommendation page, confirm results change
      • Admin login โ†’ Add movie โ†’ View recommendation performance statsAdmin login โ†’ Add movie โ†’ View recommendation performance stats

      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 (movie list, movie detail, recommendation page, admin dashboard)[ ] Core page screenshots (movie list, movie detail, recommendation page, admin dashboard)
      • [ ] 60-second demo video[ ] 60-second demo video

      Grading CriteriaGrading Criteria

      DimensionBasic RequirementsAdvanced Requirements
      PRD AlignmentPages, features, and data structures basically match PRDCan clearly explain design decisions
      Product LoopBrowse โ†’ Rate โ†’ Favorite โ†’ Recommend works end-to-endRating behavior visibly affects recommendations
      Recommendation QualityResults are reasonable, reasons are explainableSupports multiple recommendation strategies
      Admin CapabilityMovie data and recommendation performance viewableHas stats like recommendation accuracy metrics
      Engineering CompletenessFrontend, Spring Boot backend, database pipeline connectedRecommendation API has caching or performance optimization

      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/)