Atomic Module Component Structure for React
Guía6 min de lectura
Empieza a leerTodas las series
8 artículos conectados
Building a Production Next.js App.
A practical sequence for turning a fresh Next.js codebase into a product teams can lint, test, document, deploy, and secure with confidence.
A guided walkthrough from project structure to auth and delivery.
Los 8 capítulosA series about shipping the whole system
These posts are meant to be read as a progression, not as isolated tutorials. The throughline is simple: a production app needs more than screens. It needs conventions, review guardrails, tests, deployment checks, and authentication that still make sense months later.
Para quién esIf you are building or rescuing a Next.js codebase, this series is the path I would want a team to have in front of them from day one.
Áreas de enfoque
Explora estos temas en el Blog.
Artículos en orden de lectura.
Recorre la serie desde los fundamentos hasta la implementación en profundidad.
8 artículos
GuíaParte 1
Atomic Module Component Structure for React
Structure React projects using Atomic Module Components — covering file layout, naming conventions, and scalability patterns for growing TypeScript codebases.
- Development
- React
Leer artículo6 min de lectura
GuíaParte 2
Building the Best Next.js TypeScript Standard Vitest ESLint Configuration
Configure ESLint for Next.js with TypeScript and Vitest integration. Covers code quality rules, import conventions, and a scalable setup for React projects.
- ESLint
- Vitest
Leer artículo5 min de lectura
TutorialParte 3
Development Workflow with Husky for Next.js, ESLint, and Vitest Integration
A practical Husky setup for Next.js projects so linting, testing, and pre-push checks become part of the team workflow instead of a last-minute cleanup step.
- Pre-commit
- Vitest
Leer artículo3 min de lectura
TutorialParte 4
Storybook in Action with Next.js, Tailwind and TypeScript
Set up Storybook in a Next.js project with Tailwind and TypeScript. Build isolated UI components, write stories, and improve design system collaboration.
- TypeScript
- Tailwind CSS
Leer artículo8 min de lectura
TutorialParte 5
Testing React Components with Vitest and React Testing Library
A practical setup for testing React components with Vitest and React Testing Library, focused on behavior, confidence, and maintainable frontend code.
- Vitest
- Testing Library
Leer artículo6 min de lectura
GuíaParte 6
Continuous Integration and Deployment for Next.js Projects
Build a practical Next.js CI/CD pipeline with GitHub Actions that installs cleanly, runs linting and tests, verifies builds, and deploys trusted code.
- CI/CD
- GitHub Actions
Leer artículo5 min de lectura
TutorialParte 7
Authentication and Authorization in Next.js Applications with Supabase
Build maintainable Next.js authentication with Supabase SSR, protected routes, session handling, and clear authorization patterns for production teams.
- Supabase
- Authentication
Leer artículo7 min de lectura
GuíaParte 8
Playwright Accessibility Checks That Teams Keep Running
Run tested Playwright and axe examples for page scans, dialog focus, and skip links, then use a keyboard checklist to review what automation cannot prove.
- Accessibility
- Playwright
Leer artículo7 min de lectura
Encuentra tu próxima lectura.
Una serie de artículos conectados o una guía para lo que estás creando.