Conversational Development With Claude Code — Part 12: Implementing Star Ratings in the Course List (Frontend)
TL;DR
In this chapter we move the Ratings feature into the frontend — deliberately, incrementally, and without premature backend coupling. Using Cloud Code, Yarn, Docker-backed APIs, and a disciplined scope, we implement a star‑rating UI inside the course list, validate it with mock data, refine it with visual feedback (screenshots), and prepare it for real API integration.
This is not “just UI.”
This is architectural alignment expressed visually.
When interface becomes responsibility
Backend ratings gave us persistence.
But persistence without perception is invisible.
The frontend is where trust is earned.
A 3.5 average rating is not a number — it is a signal.
A star is not an icon — it is a behavioral affordance.
In Part 12, the mission is precise:
- Implement a 1–5 star rating display in the course list.
- Keep scope intentionally narrow.
- Use mock data first.
- Avoid premature backend integration.
- Validate visually before wiring persistence.
We are not rushing to completion.
We are sequencing responsibility.
Preparing the frontend environment
Before touching a component, we establish execution discipline.
Step 1 — Install dependencies
Inside the frontend directory:
yarn install
Dependency consistency is non-negotiable.
A missing dependency introduces noise into reasoning.
Step 2 — Start the development server
yarn dev
If working inside Cloud Code:
- Send it to background with Control-B
- Verify active processes under Bashes
- Ensure only one instance binds to port 3000
Open:
If course data fails to load, activate the backend:
cd backend
make start
The rule:
Frontend should not fail silently due to backend absence.
Infrastructure alignment is part of UI engineering.
Feeding Cloud Code the right context
Before requesting changes, we provided:
- The ratings implementation plan (Option-K context injection).
- Clear scope limitation.
- Explicit instruction: Only implement the UI in the course list. No backend integration.
This prevents architectural drift.
Cloud Code performs best when constraints are explicit.
Why start with mock data?
Because interaction precedes persistence.
Mock data allows us to validate:
- Visual balance
- Star alignment
- Typography hierarchy
- Hover states
- Average calculation display
- Card layout integrity
Without waiting on API integration.
Mocking is not faking — it is isolating variables.
Creating the Star Rating component
The goal was simple but strict:
- A reusable StarRating component
- Accepts:
- average
- totalReviews
- readonly
- Displays partial stars (e.g., 3.5)
- Maintains visual consistency across cards
Cloud Code was instructed to:
- Create TypeScript interfaces in rating.ts
- Keep types explicit
- Avoid backend coupling
- Preserve existing component structure
If the agent drifted toward backend logic, we stopped it immediately.
Scope discipline is a senior skill.
Avoiding overimplementation
One of the most common mistakes in AI-assisted frontend work is overbuilding.
We explicitly restricted:
- No API calls
- No state mutation
- No persistence logic
- No course detail integration yet
- No class-level rating system yet
Just the course list.
Complexity is introduced by sequence, not by ambition.
Common runtime issues
Port 3000 already in use
Kill previous instance.
Restart within the same Cloud Code session to preserve context.
Multiple Yarn instances
Check active Bashes.
Maintain a single development server.
Backend unavailable
Start with make start.
The development loop must remain predictable.
Validating the UI deliverables
The final UI requirements:
- Interactive stars (but read-only in course list)
- Display of average (e.g., 3.5)
- Display of review count
- CSS highlighting of active stars
- Consistent spacing within course cards
- Visual harmony with existing typography
Mock data per course allowed testing:
- 0 reviews
- High average
- Fractional average
- Edge case boundaries (1.0, 5.0)
Edge cases are where UI maturity reveals itself.
Visual refinement through screenshots
One of the most powerful Cloud Code workflows:
- Capture screenshot (MacOS).
- Paste into Cloud Code (Control-B).
- Request detailed UI analysis.
The agent identifies:
- Misalignment
- Star sizing imbalance
- Inconsistent padding
- Color contrast issues
- Hover-state awkwardness
- Accessibility risks
Then proposes targeted CSS adjustments.
This compresses what would normally take multiple visual review cycles.
UI iteration becomes conversational.
CSS refinement philosophy
We iterated deliberately on:
- Star size hierarchy
- Spacing between rating and course title
- Font-weight contrast for average display
- Subtle hover color transitions
- Card alignment consistency
The objective was:
Quiet confidence in the interface.
Not animation overload.
Not ornamental distraction.
Frontend maturity is restraint.
Context management during UI sessions
Long UI sessions also consume conversational memory.
Commands worth remembering:
context
compact
reset
UI work can be deceptively token-heavy due to repeated code refinements.
Compact strategically before context degradation affects reasoning quality.
What this chapter proves
By the end of Part 12, we achieved:
- Star rating UI in course list
- Clean TypeScript contracts
- Isolated mock-based validation
- Backend coordination readiness
- CSS refinement via visual feedback
- Zero premature coupling
We did not rush integration.
We built visual truth first.
What comes next
- Implement star rating interaction in Course Detail view
- Extend into Class view
- Replace mock data with API wiring
- Persist rating submissions
- Add optimistic UI updates
- Expand test coverage
Frontend without backend is illusion.
Backend without frontend is invisibility.
The craft lies in sequencing them correctly.
If you completed this UI layer:
- Did you isolate scope effectively?
- Did you validate with mock states?
- Did you refine CSS via screenshot analysis?
- Did you resist integrating the API too early?
Share your workflow in the comments.
In the next chapter, we connect the UI to real persistence — and the stars become data.
— Cristian Sifuentes
Top comments (0)