# Applifting Frontend Playbook

- [Introduction](https://applifting.github.io/frontend-playbook//getting-started/introduction) - Overview of the Applifting Frontend Playbook — a handbook for consistent React code and project structure.
- [General Principles](https://applifting.github.io/frontend-playbook//getting-started/general-principles) - Core principles: clean code, DRY, separation of concerns, minimal side effects, and error handling.
- [Feature-sliced Design Overview](https://applifting.github.io/frontend-playbook//project-structure/feature-sliced-design-overview) - Introduction to Feature-sliced Design based on Bulletproof React for scalable project structure.
- [Pages & Routes (Common Concepts)](https://applifting.github.io/frontend-playbook//project-structure/pages-routes) - Common concepts for pages and routes: composition, layout, headings, and feature integration.
- [Next.js Structure](https://applifting.github.io/frontend-playbook//project-structure/nextjs-structure) - Recommended Next.js project structure using App Router with feature-sliced design principles.
- [TanStack Router (or React Router)](https://applifting.github.io/frontend-playbook//project-structure/tanstack-router-structure) - Project structure for TanStack Router apps with file-based routing and feature-sliced design.
- [Cross-Feature Composition (Escape Hatch)](https://applifting.github.io/frontend-playbook//project-structure/cross-feature-composition) - Escape hatch pattern for injecting components across feature boundaries via page-level context.
- [File Naming](https://applifting.github.io/frontend-playbook//naming-conventions/file-naming) - File naming conventions: PascalCase for components, camelCase for hooks and other files.
- [Variable Naming](https://applifting.github.io/frontend-playbook//naming-conventions/variable-naming) - Variable naming conventions: PascalCase for types, camelCase for variables, and boolean prefixes.
- [Function Naming](https://applifting.github.io/frontend-playbook//naming-conventions/function-naming) - Naming functions with the A/HC/LC pattern: action + high context + low context for clarity.
- [Naming Tips & Gotchas](https://applifting.github.io/frontend-playbook//naming-conventions/naming-tips) - Common naming pitfalls and tips for TypeScript types, zod schemas, and avoiding unnecessary prefixes.
- [Writing Components](https://applifting.github.io/frontend-playbook//components/writing-components) - Guidelines for writing React components: props definition, destructuring, arrow functions, and avoiding FC types.
- [Code Order in Components](https://applifting.github.io/frontend-playbook//components/code-order) - Recommended order of code inside React components: state, derived values, handlers, then effects.
- [Compound Component Pattern](https://applifting.github.io/frontend-playbook//components/compound-components) - The compound component pattern for flexible, declarative APIs with implicit state sharing.
- [Type vs Interface](https://applifting.github.io/frontend-playbook//typescript/type-vs-interface) - Why we default to 'type' over 'interface' in TypeScript: unions, mapped types, and declaration merging.
- [Utility Types](https://applifting.github.io/frontend-playbook//typescript/utility-types) - Leveraging TypeScript utility types like Pick, Omit, Exclude, Extract, and ReturnType.
- [Immutability](https://applifting.github.io/frontend-playbook//typescript/immutability) - Using 'as const' and 'satisfies' for immutable, type-safe values in TypeScript.
- [Enumerations](https://applifting.github.io/frontend-playbook//typescript/enumerations) - Avoiding native TypeScript enums in favor of string literal unions or const objects.
- [Type Guards and Parsing Data](https://applifting.github.io/frontend-playbook//typescript/typeguards) - Using type guards and runtime validation with zod or narrowland for type-safe data handling.
- [Function Best Practices](https://applifting.github.io/frontend-playbook//coding-patterns/function-best-practices) - Function guidelines: arrow functions, async/await, single responsibility, and avoiding boolean flags.
- [Pure Functions](https://applifting.github.io/frontend-playbook//coding-patterns/pure-functions) - Writing pure functions for better testability and performance. Define them outside components when possible.
- [Boolean Conversion](https://applifting.github.io/frontend-playbook//coding-patterns/boolean-conversion) - How to properly convert values to booleans using !! or Boolean(), with type narrowing considerations.
- [Declarative vs Imperative](https://applifting.github.io/frontend-playbook//coding-patterns/declarative-vs-imperative) - Why declarative code is preferred over imperative: clearer intent with filter, map, and other array methods.
- [Environment Variables](https://applifting.github.io/frontend-playbook//tooling/environment-variables) - Managing environment variables with T3 Env for validation and type-safety across frameworks.
- [Code Comments](https://applifting.github.io/frontend-playbook//tooling/code-comments) - Comment formatting guidelines using TODO, FIXME, and NOTE prefixes for better code clarity.
- [UI Components (Shadcn)](https://applifting.github.io/frontend-playbook//ui-styling/ui-components) - Using Shadcn/ui for reusable UI components built on Radix primitives with Tailwind styling.
- [Tailwind CSS](https://applifting.github.io/frontend-playbook//ui-styling/tailwind-css) - Tailwind CSS best practices: cn utility, theming with CSS variables, and managing color palettes.
- [Assets & Icons](https://applifting.github.io/frontend-playbook//ui-styling/assets-icons) - Best practices for optimizing images, SVGs, and using icon libraries in React projects.
- [TanStack Query Overview](https://applifting.github.io/frontend-playbook//data-fetching/tanstack-query-overview) - Why TanStack Query is our go-to for REST and GraphQL. Includes Apollo Client comparison and zod validation patterns.
- [HTTP Client with ky](https://applifting.github.io/frontend-playbook//data-fetching/http-client-ky) - Using ky HTTP client with custom hooks, authentication handling, and automatic token refresh.
- [Query Keys & Options](https://applifting.github.io/frontend-playbook//data-fetching/query-keys-options) - Patterns for query key factories and queryOptions to keep data fetching flexible and maintainable.
- [API Type Generators](https://applifting.github.io/frontend-playbook//data-fetching/api-type-generators) - Recommended tools for generating TypeScript types from GraphQL schemas and OpenAPI specifications.
- [Router Choice](https://applifting.github.io/frontend-playbook//routing/router-choice) - Why we recommend TanStack Router over React Router for better typesafety and ecosystem integration.
- [TanStack Router Patterns](https://applifting.github.io/frontend-playbook//routing/tanstack-router-patterns) - Integrating TanStack Router with TanStack Query: loaders, prefetching, suspense boundaries, and pending states.
- [Forms](https://applifting.github.io/frontend-playbook//forms-translations/forms) - Our recommended form stack: react-hook-form with zod validation and Shadcn/ui form components.
- [Translations](https://applifting.github.io/frontend-playbook//forms-translations/translations) - Setting up i18n with react-i18next or next-intl. Covers namespaces, hooks usage, and nested translation keys.
- [Git Workflow](https://applifting.github.io/frontend-playbook//contributing/git-workflow) - Git workflow standards: branch naming, commit messages following conventional commits, and JIRA integration.
- [Merge Requests](https://applifting.github.io/frontend-playbook//contributing/merge-requests) - Merge request conventions: naming, squashing commits, review process, and conventional comments format.