React architecture in Product Hunt
summary
Product Hunt runs React for 4+ years with a small team and a gradual migration off Rails, using SSR, Apollo and generated TypeScript types from GraphQL so queries produce accurate types. Components live in directory-per-component with component-level fragments and local CSS that compiles to safe class names. Pages map to URL folders, a page lifecycle handles loading/authorization, and a centralized form/mutation shape returns a consistent node result. Several migrations are underway and much of this is already running in production.
AI-written summary · about
chapters (17)
- 0:00Intro
- 7:14Directory structure
- 10:52Hooks
- 12:30Functions
- 14:14dependencies
- 15:55structure
- 17:20class
- 22:02universal structure
- 24:53team structure
- 28:01powerups
- 29:58button
- 30:38main component
- 31:56folder structure
- 32:38page system
- 35:00route system
- 36:25pages
- 40:51recap
related talks
09mReact Native Architecture at Product Hunt
30mReact & GraphQL - Bringing Simplicity and Correctness to Client Side Development
54mRebuilding Product Hunt Mobile with React.Native
31mReact on Rails
47mReact, Relay and GraphQL — a perfectly normal component approach
30mReact Superpowers with GraphQL and TypeScript
35mHow React shaped Haptik’s frontend story
49mWhy I bet my business on React