← Back

Frontend

Framework Choice

React and Next.js. Stay close to framework defaults. Use what the framework offers out of the box.

  • Only add external state management when the framework has no solution. When you do, pick the simplest option.
  • Prefer popular, well-documented frameworks — accidental complexity is already solved, and AI tools produce better output with established patterns.

Tailwind Over CSS-in-JS

Use Tailwind CSS. Moved away from styled-components.

  • Tailwind gives opinionated defaults that prevent drift. Built-in theming, responsive prefixes, small bundle size.
  • Styled-components offer flexibility but require building your own design system from scratch. As teams grow, consistency matters more than flexibility.

Component Structure

  • Each component lives in its own folder with PascalCase naming.
  • Co-locate tests in the same folder — makes missing tests obvious.
  • Small presentational sub-components go in a styles file.
  • Complex sub-components get their own /components subfolder.
  • Use barrel exports via index.ts at every level.
  • Use TypeScript path aliases for cleaner imports.

When building custom components, study existing libraries first. Look at naming conventions, props conventions, and implementation patterns from popular projects. Learning-by-reference produces better APIs than designing from scratch.

Unified Stack

TypeScript across the entire stack — frontend, backend, mobile. One language reduces context switching, enables shared helpers and validations, simplifies hiring, and allows code review across projects.

The unified stack is not about JavaScript being the best for everything. It is about reducing friction between teams.

Anti-patterns

  • Adding state management libraries by default — start with framework built-ins (React state, context, server state). External libraries add complexity that may not be needed.
  • Custom design systems from scratch — unless the team and product demand it. Tailwind defaults cover most needs.
  • Framework-fighting — working against Next.js conventions instead of with them. If the framework feels wrong, evaluate whether to change frameworks, not override them.

Experience Notes

Previously: styled-components for all CSS. Now: Tailwind CSS. Moved because of runtime performance, LLM compatibility (Tailwind classes are easier for AI to generate correctly), and team consistency at scale. Styled-components is not bad — it just requires more discipline as teams grow.