Front End Development - spinningideas/resources GitHub Wiki

Here are the core skillsets required for modern front-end development, focused on the React + Vite + Tailwind CSS + shadcn/ui stack.

Frontend Programming Fundamentals

Modern front-end development is still built on the web platform. Master these foundations first and every framework becomes a layer on top of them.

Core areas:

  • How the web works: HTTP, DNS, TLS/SSL, request/response lifecycle, status codes, CORS
  • HTML semantics: semantic elements, forms, accessibility tree, valid document structure
  • CSS fundamentals: box model, flexbox, grid, positioning, cascade, specificity, custom properties
  • The DOM: tree structure, event propagation, rendering pipeline, reflow and repaint
  • JavaScript essentials: variables, scope, closures, prototypes, this, event loop, async programming
  • Web APIs: fetch, localStorage, URL, IntersectionObserver, ResizeObserver
  • Responsive design: mobile-first media queries, fluid layouts, accessible touch targets
  • Progressive enhancement: usable without JavaScript where possible, graceful degradation

Resources:

JavaScript/TypeScript Fundamentals

React applications are written in JavaScript and, in production codebases, almost always TypeScript. Strong typing, modern syntax, and async patterns are prerequisites.

Core areas:

  • Modern JavaScript (ES2020+): destructuring, optional chaining, nullish coalescing, modules, async/await
  • TypeScript fundamentals: types, interfaces, generics, discriminated unions, type narrowing
  • Strict configuration: strict: true, noImplicitAny, strictNullChecks to catch bugs early
  • Module systems: native ESM import/export, barrel files, path aliases (@/)
  • Immutability: spread, Array.prototype methods, avoiding direct mutation of state
  • Error handling: try/catch, result types, global error boundaries

Resources:

React Fundamentals

React is a component-based UI library. The modern mental model centers on functions, hooks, composition, and unidirectional data flow.

Core areas:

  • Components and JSX: functional components, props, composition, conditional rendering, lists
  • Hooks: useState, useEffect, useContext, useReducer, useRef, useMemo, useCallback
  • Rules of Hooks: only call hooks at the top level of React functions or custom hooks
  • Controlled vs uncontrolled inputs: when to let React own state vs. the DOM
  • Lifting state up: sharing state through props and callbacks
  • Component lifecycle: render, commit, effects, cleanup, Strict Mode double-invocation
  • React 19 features: use hook, actions, useOptimistic, improved form handling

Resources:

Modern React Patterns

Beyond the basics, production React code leans on patterns that improve performance, maintainability, and user experience.

Core areas:

  • Composition: slots, render props, compound components, container/presentational split
  • Custom hooks: extract reusable stateful logic (useLocalStorage, useDebounce, useFetch)
  • Suspense and error boundaries: declarative loading and error states
  • Code splitting: lazy loading routes and heavy components with React.lazy and dynamic imports
  • React Server Components (RSC): server-only components, reduced client bundle size, streaming
  • Data fetching patterns: colocate data with UI, avoid useEffect for fetching when possible
  • Ref forwarding and polymorphism: forwardRef, component as prop patterns

Resources:

Client-Side Routing

Single-page applications need a router to map URLs to views, manage history, and handle route-level data.

Core areas:

  • React Router v7: declarative routing, loaders, actions, nested routes, data APIs
  • TanStack Router: fully type-safe routing, search params, route loaders
  • Route loaders and data fetching: fetch data before rendering or stream it with Suspense
  • Protected routes: auth guards, role-based access, redirect handling
  • Nested and layout routes: shared layouts, outlets, route-level code splitting
  • History API: programmatic navigation, useNavigate, preventing broken back buttons

Router choice:

  • Use React Router v7 as the safe default for most teams; it has the largest ecosystem and a clear migration path from v6.
  • Use TanStack Router when end-to-end type safety for routes, search params, and navigation is a hard requirement.

Resources:

Styling with Tailwind CSS

Tailwind CSS is a utility-first CSS framework. In 2026, Tailwind v4 uses CSS-first configuration (@theme) and integrates tightly with Vite.

Core areas:

  • Utility-first workflow: compose designs directly in markup with constrained design tokens
  • Tailwind v4 setup: @tailwindcss/vite plugin, CSS-based config, automatic content detection
  • Design tokens in CSS: @theme blocks, custom colors, spacing, and font stacks as CSS variables
  • Responsive design: mobile-first breakpoints (sm:, md:, lg:, xl:)
  • State variants: hover:, focus:, active:, disabled:, dark:
  • Component extraction: extract a component when the same utility combination appears three or more times
  • Avoid overusing @apply: prefer components in React to keep styles colocated with behavior
  • Class sorting: install prettier-plugin-tailwindcss for consistent, readable markup
  • Common pitfalls: dynamic class strings, forgotten tokens, class-string explosion on one element

Resources:

UI Components with shadcn/ui

shadcn/ui is not a traditional component library. It provides copy-pasteable, accessible components built on Radix UI primitives and styled with Tailwind CSS, owned entirely by your codebase.

Core areas:

  • Setup: npx shadcn create, TypeScript, and CSS variables enabled by default
  • Component installation: add only the components you need via the CLI
  • Base color and theming: CSS variables for colors, dark mode via .dark class
  • Primitives: built on Radix UI / Base UI for accessibility and behavior
  • Composition: compose small primitives (Button, Dialog, DropdownMenu) into larger features
  • Customization: modify the component code in your repo instead of overriding library styles
  • Accessibility out of the box: focus management, keyboard navigation, ARIA attributes
  • Documentation discipline: keep a README in components/ui so future engineers know what was changed

Resources:

State Management

The most important decision is not which library, but what kind of state you are managing: server state, global client state, or local component state.

Core areas:

  • Server state: data owned by an API or database; use TanStack Query
  • Global client state: UI state, preferences, auth status; use Zustand or Context
  • Local component state: forms, toggles, counters; use useState or useReducer
  • URL state: filters, pagination, search; use the router's search params
  • TanStack Query: caching, background refetching, deduplication, optimistic updates, mutations
  • Zustand: minimal, TypeScript-friendly global store with no boilerplate
  • Context API: dependency distribution for low-frequency updates (theme, auth)
  • What to avoid: storing server state in Redux/Zustand, using Context for high-frequency updates

Decision tree:

  • Small app: useState + TanStack Query
  • Medium app: Zustand (client state) + TanStack Query (server state)
  • Large/complex app: Redux Toolkit or Zustand + TanStack Query with strict conventions

Resources:

Forms and Validation

Forms are where UI, state, validation, and accessibility intersect. Modern React favors controlled forms with schema validation.

Core areas:

  • React Hook Form: performant, uncontrolled-by-default form state management
  • Zod: TypeScript-first schema validation with great error messages
  • Integration: @hookform/resolvers/zod connects RHF to Zod schemas
  • Controlled inputs: use Controller for complex components (selects, rich editors)
  • Form accessibility: labels, aria-invalid, aria-describedby, error announcements
  • Server validation: always validate on the server; client validation is for UX only
  • shadcn/ui form helpers: use Form, FormField, FormItem, FormMessage components

Resources:

Testing and Debugging

Frontend tests should focus on user behavior, not implementation details. The 2026 stack is Vitest + React Testing Library + Playwright for E2E.

Core areas:

  • Vitest: fast, Vite-native test runner with Jest-compatible API and native ESM/TypeScript support
  • React Testing Library (RTL): query the DOM as a user would; prefer getByRole
  • User-event v14: simulate realistic keyboard, mouse, and pointer interactions
  • Mock Service Worker (MSW): intercept real network requests in tests for realistic API mocking
  • Testing trophy: ~60% integration tests, ~25% unit tests, ~10% E2E, ~5% visual regression
  • Unit tests: pure logic, utility functions, custom hooks with complex branching
  • Integration tests: mount components with real hooks, MSW-mocked APIs, assert on what the user sees
  • E2E tests: Playwright for critical user journeys in a real browser
  • Accessibility tests: axe-core or jest-axe in CI, keyboard-only manual passes

Resources:

Browser Developer Tools

The browser is both runtime and debugger. Knowing how to inspect and profile your app is essential.

Core areas:

  • Elements panel: inspect DOM, edit styles, test responsive breakpoints
  • Console: logging, breakpoints, network errors, React render warnings
  • Network panel: request/response inspection, caching, throttling
  • Performance panel: flame graphs, long tasks, render timing
  • React DevTools: component tree, props/state inspection, profiler for render counts
  • Lighthouse: audits for performance, accessibility, SEO, best practices
  • Application panel: local storage, session storage, service workers, cookies

Resources:

Performance Debugging Tools

Modern front-end performance debugging combines browser profilers, React-specific inspectors, static analyzers, and continuous monitoring. Use the right tool for the layer you are investigating.

Core tools:

  • React Doctor: deterministic static-analysis CLI that scans React codebases for performance regressions, anti-patterns, state/effect issues, architecture smells, and accessibility problems; integrates with CI and coding agents
  • React Trace: development-time React inspector that identifies rendered components, resolves source locations, and runs source-aware actions such as opening files in your editor or previewing code in the browser
  • React DevTools Profiler: records component commits, flamegraphs, render durations, and why each component rendered
  • React Performance tracks: React-specific timeline tracks inside Chrome DevTools Performance panel for Components, Effects, Scheduler, and Server Components
  • React Compiler + ESLint: automatic build-time memoization; use the ESLint plugin and React DevTools "Memo ✨" badge to verify optimizations
  • Chrome DevTools Performance panel: record traces, analyze long tasks, layout shifts, LCP candidates, network waterfalls, and INP interactions
  • Chrome DevTools Live metrics: real-time Core Web Vitals overlay while interacting with the page
  • Lighthouse / PageSpeed Insights: lab-based audits for performance, accessibility, SEO, and best practices
  • web-vitals.js + CrUX: collect and compare real-user field data against Chrome User Experience Report
  • DebugBear / SpeedCurve / Calibre: continuous synthetic monitoring and RUM dashboards
  • Sentry: frontend performance and error monitoring, including slow interactions and transactions

When to use each:

  • Start with React Doctor for static scans of code-quality and performance regressions in CI.
  • Use React Trace during development to jump from rendered UI to source code quickly.
  • Use React DevTools Profiler + React Performance tracks to find unnecessary renders and expensive commits.
  • Use Chrome DevTools Performance panel to debug LCP, INP, CLS, long tasks, and layout shifts.
  • Use Lighthouse for quick lab audits and DebugBear/SpeedCurve for long-term trend monitoring.
  • Always correlate lab scores with real-user field data (CrUX, web-vitals.js, RUM).

Resources:

Performance Optimization

Performance is a feature. In 2026, focus on real-user Core Web Vitals: LCP, INP, and CLS.

Core areas:

  • Core Web Vitals:
    • LCP (Largest Contentful Paint): target ≤ 2.5s
    • INP (Interaction to Next Paint): target ≤ 200ms
    • CLS (Cumulative Layout Shift): target ≤ 0.1
  • Image optimization: WebP/AVIF, responsive srcset, explicit dimensions, lazy load below-the-fold
  • Resource prioritization: fetchpriority="high" for LCP images, preload critical fonts
  • Code splitting: route-based and component-based dynamic imports
  • Bundle size: analyze with vite-bundle-visualizer, tree-shake unused code
  • Minimize layout shifts: reserve space for images, ads, embeds; avoid inserting content above existing content
  • Reduce JavaScript work: break long tasks, defer non-critical scripts, use requestIdleCallback
  • Memoization: React.memo, useMemo, useCallback only where profiling proves benefit
  • Monitoring: field data via CrUX, RUM tools, Lighthouse CI

Resources:

Version Control Systems (Git)

Git is the foundation of collaborative frontend work. A clean history and clear workflow keep a team moving fast.

Core areas:

  • Distributed VCS: every clone is a full backup of history
  • Three states: modified, staged, committed
  • Branching: lightweight feature, bug-fix, and experiment branches
  • Workflows: GitFlow, GitHub Flow, trunk-based development
  • Collaboration: pull/merge requests, code review, rebasing
  • Atomic commits: one logical change per commit, clear messages

Resources:

Build Tools and Task Runners (Vite)

Vite is the default build tool for modern React projects. It provides a fast dev server, native ESM, and optimized production builds.

Core areas:

  • Vite dev server: native ESM, instant HMR, fast cold start
  • Vite React plugin: @vitejs/plugin-react with SWC or Babel
  • Production build: Rollup-based bundling, code splitting, asset hashing
  • TypeScript support: native via esbuild, type checking via tsc --noEmit
  • Path aliases: @/ alias to src/ for clean imports
  • Environment variables: import.meta.env, .env files, type-safe env with Zod
  • Plugins ecosystem: PWA, SVG, image optimization, bundle visualizer
  • Task runners: npm scripts, vite, vitest, eslint, prettier

Vite vs alternatives:

  • Webpack: mature but slower; use only when a large existing config or specific plugin requires it
  • Turbopack/Rolldown: next-generation Rust-based bundlers; worth monitoring but Vite is the stable 2026 default

Resources:

Continuous Integration and Deployment

CI/CD automates linting, type checking, testing, building, and deploying front-end applications.

Core areas:

  • GitHub Actions: event-driven YAML workflows, reusable actions, matrix builds
  • GitLab CI: stage-based pipelines with built-in security scanning
  • Common pipeline stages:
    1. Lint and format check (eslint, prettier)
    2. Type check (tsc --noEmit)
    3. Run tests (Vitest, Playwright)
    4. Build application (vite build)
    5. Deploy to staging / production (Vercel, Netlify, Cloudflare Pages, AWS S3/CloudFront)
  • Preview deployments: per-PR preview URLs for manual and visual regression testing
  • Secrets management: store API keys and tokens in CI secrets, never commit them
  • Caching: cache node_modules and build artifacts to speed up pipelines

Resources:

Sources

This page synthesizes information from the following sources: