Frontend projects rarely fail because of bad code.
They fail because change becomes expensive.
In many codebases:
- UI imports fetch directly
- State libraries leak into components
- Infrastructure decisions become permanent
I wanted a different default.
I built Frontend Foundation, a minimal Next.js template designed around one constraint:
UI code should never care how data is fetched or stored.
The template enforces simple boundaries:
UI → hooks → services → clients
To validate this, I created a separate demo repository.
In that demo:
- The UI renders a list of posts
- Data can be fetched using fetch or axios
- A button switches the implementation at runtime
- No UI, hook, or service code changes
The swap happens behind a stable contract.
This is not a pattern for demos only. This is how long-lived frontend systems stay flexible.
The template itself stays intentionally minimal. Each project adds what it needs. Nothing is locked in.
If you’ve ever avoided refactoring because “it would touch too much,”
this approach is worth exploring.
Template repo:
frontend-foundation
HTTP swap Demo repo:
frontend-foundation-http-swap-demo
Top comments (0)