-
Notifications
You must be signed in to change notification settings - Fork 0
Open
Labels
Description
Hacker News RSC Demo
Build a React on Rails Pro (RSC) version of the Vercel Hacker News app.
Reference Implementation
- Source: https://github.com/vercel/next-react-server-components
- Live Demo: https://next-rsc-hn.vercel.app
Progress Tracking
Phase 1: Foundation
- 1.1: Initialize Rails 8 Application with React on Rails Pro #71 - 1.1: Initialize Rails 8 Application with React on Rails Pro
- 1.2: Configure CSS Modules #72 - 1.2: Configure CSS Modules
- 1.3: Set Up TypeScript Configuration #73 - 1.3: Set Up TypeScript Configuration
Phase 2: Data Layer
- 2.1: Create Hacker News API Client #74 - 2.1: Create Hacker News API Client
- 2.2: Create Story Presenter #75 - 2.2: Create Story Presenter
- 2.3: Create Comment Presenter #76 - 2.3: Create Comment Presenter
- 2.4: Create User Presenter #77 - 2.4: Create User Presenter
Phase 3: Rails Controllers & Routes
- 3.1: Create Stories Controller with RSC Rendering #78 - 3.1: Create Stories Controller with RSC Rendering
- 3.2: Create Items Controller (Story Detail) #79 - 3.2: Create Items Controller (Story Detail)
- 3.3: Create Users Controller #80 - 3.3: Create Users Controller
- 3.4: Configure Routes #81 - 3.4: Configure Routes
Phase 4: React Server Components
- 4.1: Create Root Layout Component #82 - 4.1: Create Root Layout Component
- 4.2: Create Header Component #83 - 4.2: Create Header Component
- 4.3: Create Footer Component #84 - 4.3: Create Footer Component
- 4.4: Create Story List Component #85 - 4.4: Create Story List Component
- 4.5: Create Individual Story Component #86 - 4.5: Create Individual Story Component
- 4.6: Create Pagination Component #87 - 4.6: Create Pagination Component
- 4.7: Create Item Detail Page Component #88 - 4.7: Create Item Detail Page Component
- 4.8: Create Comment Component (Recursive) #89 - 4.8: Create Comment Component (Recursive)
- 4.9: Create Comment Toggle Client Component #90 - 4.9: Create Comment Toggle Client Component
- 4.10: Create User Profile Page Component #91 - 4.10: Create User Profile Page Component
- 4.11: Create Loading Skeletons #92 - 4.11: Create Loading Skeletons
- 4.12: Create Error Boundary Component #93 - 4.12: Create Error Boundary Component
Phase 5: Utilities
- 5.1: Create Time Ago Utility #94 - 5.1: Create Time Ago Utility
- 5.2: Create URL Domain Extractor #95 - 5.2: Create URL Domain Extractor
Phase 6: Streaming & Performance
- 6.1: Implement Streaming for Story List #96 - 6.1: Implement Streaming for Story List
- 6.2: Implement Streaming for Comments #97 - 6.2: Implement Streaming for Comments
- 6.3: Add HTTP Caching Headers #98 - 6.3: Add HTTP Caching Headers
Phase 7: Polish & Production Ready
- 7.1: Add Meta Tags and SEO #99 - 7.1: Add Meta Tags and SEO
- 7.2: Add Responsive Design #100 - 7.2: Add Responsive Design
- 7.3: Write Integration Tests #101 - 7.3: Write Integration Tests
- 7.4: Add Production Configuration #102 - 7.4: Add Production Configuration
- 7.5: Create README Documentation #103 - 7.5: Create README Documentation
Dependency Graph
Phase 1 (Foundation)
├── #71 Rails + RoR Pro Setup ──┬──> #72 CSS Setup
│ └──> #73 TypeScript Setup
│
├─────────────────────────────────────┐
│ │
v v
Phase 2 (Data Layer) Phase 3 (Controllers)
├── #74 HN API Client ├── #78 Stories Controller
│ │ │ │
│ v │ v
│ #75-#77 Presenters │ #79-#81 Other Controllers
│ │
└───────────────────────────────┘
│
v
Phase 4 (RSC Components)
├── #82 Layout ──> #83 Header, #84 Footer
├── #85 Stories ──> #86 Story, #87 Pagination
├── #88 ItemPage ──> #89 Comment ──> #90 CommentToggle
├── #91 UserPage, #92 Skeletons, #93 ErrorBoundary
Phase 5 (Utilities) - Parallel with Phase 4
├── #94 timeAgo
└── #95 urlUtils
Phase 6 (Streaming) - After Phase 4
├── #96 Story Streaming
├── #97 Comment Streaming
└── #98 Caching
Phase 7 (Polish) - Final phase
├── #99 SEO
├── #100 Responsive
├── #101 Tests
├── #102 Production Config
└── #103 Documentation
Parallelization Opportunities
Can run in parallel:
- 1.2: Configure CSS Modules #72 and 1.3: Set Up TypeScript Configuration #73 (after 1.1: Initialize Rails 8 Application with React on Rails Pro #71)
- Phase 2 (2.1: Create Hacker News API Client #74-2.4: Create User Presenter #77) and Phase 3 (3.1: Create Stories Controller with RSC Rendering #78-3.4: Configure Routes #81) after 1.1: Initialize Rails 8 Application with React on Rails Pro #71
- 4.2: Create Header Component #83, 4.3: Create Footer Component #84, 4.11: Create Loading Skeletons #92, 4.12: Create Error Boundary Component #93 (after 4.1: Create Root Layout Component #82)
- Phase 5 utilities (after 1.3: Set Up TypeScript Configuration #73)
Must be sequential:
- 1.1: Initialize Rails 8 Application with React on Rails Pro #71 → everything else
- 4.4: Create Story List Component #85 → 4.5: Create Individual Story Component #86, 4.6: Create Pagination Component #87
- 4.7: Create Item Detail Page Component #88 → 4.8: Create Comment Component (Recursive) #89 → 4.9: Create Comment Toggle Client Component #90
coderabbitai