Remix Fullstack This document provides comprehensive guidelines for remix fullstack development and best practices. Data Loading Loader Loader functions for data fetching Implement proper loader functions for data fetching Follow best practices for optimal results Parallel Parallel route loading Implement proper parallel route loading Follow best practices for optimal results Error Error boundaries for data errors Implement proper error boundaries for data errors Follow best practices for optimal results Deferred Deferred data with React Suspense Implement proper deferred data with react suspense Follow best practices for optimal results Cache Cache headers and optimization Implement proper cache headers and optimization Follow best practices for optimal results Routing & Navigation Nested Nested routing architecture Implement proper nested routing architecture Follow best practices for optimal results Dynamic Dynamic route parameters Implement proper dynamic route parameters Follow best practices for optimal results Route Route conventions and organization Implement proper route conventions and organization Follow best practices for optimal results Programmatic Programmatic navigation Implement proper programmatic navigation Follow best practices for optimal results Route-based Route-based code splitting Implement proper route-based code splitting Follow best practices for optimal results Styling Approaches CSS CSS imports and processing Implement proper css imports and processing Follow best practices for optimal results Tailwind Tailwind CSS integration Implement proper tailwind css integration Follow best practices for optimal results CSS CSS Modules support Implement proper css modules support Follow best practices for optimal results Styled Styled components patterns Implement proper styled components patterns Follow best practices for optimal results Theme Theme management Implement proper theme management Follow best practices for optimal results Database Integration Prisma Prisma ORM integration Implement proper prisma orm integration Follow best practices for optimal results Database Database connection management Implement proper database connection management Follow best practices for optimal results Query Query optimization Implement proper query optimization Follow best practices for optimal results Migration Migration strategies Implement proper migration strategies Follow best practices for optimal results Data Data modeling patterns Implement proper data modeling patterns Follow best practices for optimal results Performance Optimization Asset Asset optimization and bundling Implement proper asset optimization and bundling Follow best practices for optimal results Prefetching Prefetching strategies Implement proper prefetching strategies Follow best practices for optimal results Cache Cache optimization Implement proper cache optimization Follow best practices for optimal results Image Image optimization Implement proper image optimization Follow best practices for optimal results Core Core Web Vitals improvement Implement proper core web vitals improvement Follow best practices for optimal results Testing Strategies Unit Unit testing components and utilities Implement proper unit testing components and utilities Follow best practices for optimal results Integration Integration testing routes Implement proper integration testing routes Follow best practices for optimal results End-to-end End-to-end testing with Playwright Implement proper end-to-end testing with playwright Follow best practices for optimal results Performance Performance testing Implement proper performance testing Follow best practices for optimal results Accessibility Accessibility testing Implement proper accessibility testing Follow best practices for optimal results Progressive Enhancement JavaScript-optional JavaScript-optional functionality Implement proper javascript-optional functionality Follow best practices for optimal results Graceful Graceful degradation Implement proper graceful degradation Follow best practices for optimal results Accessibility-first Accessibility-first development Implement proper accessibility-first development Follow best practices for optimal results Mobile-first Mobile-first responsive design Implement proper mobile-first responsive design Follow best practices for optimal results Performance Performance on slow networks Implement proper performance on slow networks Follow best practices for optimal results Developer Experience TypeScript TypeScript integration Implement proper typescript integration Follow best practices for optimal results Hot Hot module replacement Implement proper hot module replacement Follow best practices for optimal results Development Development server features Implement proper development server features Follow best practices for optimal results Debugging Debugging techniques Implement proper debugging techniques Follow best practices for optimal results Code Code organization patterns Implement proper code organization patterns Follow best practices for optimal results Summary Checklist [ ] Core principles implemented [ ] Best practices followed [ ] Performance optimized [ ] Security measures in place [ ] Testing strategy implemented [ ] Documentation completed [ ] Monitoring configured [ ] Production deployment ready Follow these comprehensive guidelines for successful remix fullstack implementation.

React Hooks Expert Master React Hooks patterns, custom hooks, and state management with these comprehensive guidelines. Essential Hook Patterns State Management useState for Local Component State useReducer for Complex State Logic Side Effects useEffect with Proper Cleanup useContext for Consuming Context Values Custom Hooks Create Reusable Logic Extract complex logic into custom hooks Prefix custom hooks with 'use' Return consistent data structures Handle Loading, Error, and Data States Best Practices Checklist [ ] Hooks called at top level only [ ] Proper dependency arrays in useEffect/useMemo/useCallback [ ] Custom hooks for reusable logic [ ] Cleanup effects to prevent memory leaks [ ] Memoization for performance optimization [ ] Consistent return patterns from custom hooks

Next.js 14 App Router Best Practices Ultimate guide for building production-ready applications with Next.js 14 App Router, React Server Components, and modern web development patterns. Data Fetching Patterns Server Component Data Fetching Fetch data directly in server components using async/await No need for useState or useEffect for initial data loading Example: Parallel Data Fetching Use Promise.all() to fetch multiple data sources simultaneously Prevents waterfall requests and improves performance Example: Client-Side Data Fetching Use SWR or React Query for client-side data fetching when needed Implement proper loading and error states Only use for user-triggered actions or real-time updates Special Files and Conventions Loading UI Create files for instant loading states Use loading boundaries to show progressive loading Implement skeleton components for better perceived performance Error Handling Use files for error boundaries at route level Implement for custom 404 pages Add proper error recovery mechanisms Route Handlers (API Routes) Create API endpoints using files in app directory Support multiple HTTP methods in a single file Example: State Management Server State vs Client State Keep server state on the server (in server components) Use client state only for UI-specific state (modals, form inputs) Consider React Context or Zustand for complex client state Form Handling Use Server Actions for form submissions when possible Implement proper form validation and error handling Example: Testing Component Testing Test server components by testing their data fetching logic Use React Testing Library for client component testing Mock external API calls appropriately E2E Testing Use Playwright or Cypress for end-to-end testing Test critical user journeys and form submissions Implement visual regression testing for UI consistency Follow these patterns to build scalable, performant, and maintainable Next.js 14 applications.

React Query Rules This document outlines the ultimate set of rules and best practices for using React Query effectively in production environments. Organizing Queries Normalize Query Keys Create a helper to avoid duplication. Example: Encapsulate Queries in Custom Hooks Define reusable hooks like or . Keeps components clean and ensures consistent query usage across the app. Set and Wisely : How long data is considered "fresh". Set based on data volatility. : How long unused data stays cached before garbage collection. Avoid Over-Fetching Use for conditional queries. Example: wait until is available. Data Synchronization Invalidate Queries Intentionally Use after mutations that affect cached data. Narrow scope: invalidate only related queries instead of all queries. Background Refetching Use and sparingly. Enable only when data must stay real-time fresh. Error & Loading States Centralize Error Handling Use React Query's global handler. Provide user-friendly error boundaries in the UI. Never Block UI Avoid full-page global spinners. Use skeletons, placeholders, or incremental loading instead. Security & Reliability Never Expose Sensitive Data in Query Keys Query keys should be serializable and safe to log. Use Retry Strategically Default retries may harm UX on destructive operations. Configure retries per-query to fit the use case. Follow these rules to keep your React Query setup clean, scalable, and production-ready.

React Testing Library Best Practices Comprehensive guide for testing React applications with React Testing Library, focusing on user-centric testing patterns and best practices. Component Testing Patterns Form Testing Test form validation, submission, and error handling Use userEvent for realistic user interactions Test accessibility of form elements Example form testing: Testing Custom Hooks Use renderHook for testing custom hooks in isolation Test hook state changes and side effects Mock dependencies and external APIs Example hook testing: Advanced Testing Patterns Testing Error Boundaries Test error boundary behavior Verify error reporting and fallback UI Test error recovery mechanisms Example error boundary testing: Performance Testing Test component rendering performance Verify memoization and optimization Test for unnecessary re-renders Example performance testing: Summary Checklist [ ] Test user behavior, not implementation details [ ] Use semantic queries that mirror user interactions [ ] Write tests that promote accessible markup [ ] Handle async operations with waitFor and findBy queries [ ] Test form validation, submission, and error handling [ ] Use MSW for realistic API mocking [ ] Test custom hooks in isolation with renderHook [ ] Write integration tests for user workflows [ ] Test error boundaries and error recovery [ ] Verify performance optimizations work correctly [ ] Set up proper test environment and utilities [ ] Organize tests logically with clear descriptions [ ] Keep tests focused, independent, and maintainable [ ] Mock external dependencies appropriately [ ] Test loading states, error states, and edge cases Follow these practices to write comprehensive, maintainable tests that give confidence in your React applications and promote better accessibility and user experience.