Intro

The React & Modern UI Stack path covers the essential frontend ecosystem and modern tooling roadmap, built directly on top of the Core Web Stack foundation.

Tutorials

  • 00. Core Web Stack Path ✅

    • Internet Beginner: ✅ Start Now — Learn how the web works, client-server architecture, and HTTP request-response cycles.
    • HTML: ✅ Start Now — Master semantic markup, document structure, and web form fundamentals.
    • CSS: ✅ Start Now — Build responsive layouts using modern styling, Flexbox, and CSS Grid.
    • JavaScript: ✅ Start Now — Learn core programming concepts, DOM manipulation, asynchronous execution, and ES6+ features.
    • Rest API: ✅ Start Now — Design and consume scalable web services using HTTP standards and JSON.
    • Version Control ✅
      • Git: Start Now — Track changes, manage branches, handle merge conflicts, and maintain local project history.
    • VCS Hosting ✅
      • GitHub: ✅ Start Now — Host repositories, collaborate using Pull Requests, and automate workflows.
      • GitLab: ✅ Start Now — Manage projects, maintain codebases, and run integrated CI/CD pipelines.
    • Package Managers ✅
      • npm: ✅ Start Now — Manage project dependencies, automate tasks with scripts, and publish packages.
      • Yarn: ✅ Start Now — Speed up package installations and manage locks efficiently.
      • pnpm: ✅ Start Now — Save disk space using a content-addressable store and strict dependency trees.
      • Bun: ✅ Start Now — Run TypeScript applications natively with an ultra-fast package manager and runtime.

  • 01. TypeScript ✅: Start Now — Learn strongly typed JavaScript, interfaces, generics, and compiler configurations for scalable applications.

  • 02. React ✅: Start Now — Master components, hooks, state management, and the virtual DOM.

  • 03. Routing ✅

    • React Router ✅: Start Now — The industry standard for declarative routing in React applications.
    • TanStack Router ✅: Start Now — A modern, fully type-safe router with built-in data fetching capabilities.

  • 04. Tailwind CSS ✅: Start Now — Build responsive, modern UIs quickly using a utility-first CSS framework.

  • 05. State Management & Data Fetching ✅

    • TanStack Query (React Query) ✅: Start Now — Manage server state, caching, synchronization, and data fetching with ease.
    • Zustand ✅: Start Now — A small, fast, and scalable bearbones state-management solution for client state.
    • Redux Toolkit ✅: Start Now — The recommended approach for writing Redux logic in larger, complex legacy applications.

  • 06. Frameworks & SSR

    • Next.js (App Router): Coming Soon — Build SEO-friendly, performant applications with server-side rendering (SSR) and static site generation (SSG).
    • React Server Components (RSC): Coming Soon — Understand the new React architecture that enables rendering on the server and reduces bundle sizes.

  • 07. Module Bundlers

    • Vite: Coming Soon — Utilize an ultra-fast frontend build tool and dev server for a modern developer experience.
    • esbuild: Coming Soon — Understand the extremely fast JavaScript bundler that powers Vite.
    • Parcel: Coming Soon — A zero-configuration bundler focused on simplicity and developer ease.

  • 08. Linters and Formatters

    • Prettier: Coming Soon — Maintain a consistent, opinionated code format across your entire project.
    • Eslint: Coming Soon — Find and fix problems in your JavaScript code based on custom rules.
    • Biome: Coming Soon — An all-in-one ultra-fast formatter and linter tool aimed at replacing both Prettier and Eslint.

  • 09. Forms & Validation

    • React Hook Form: Coming Soon — Perform efficient form state management and validation with minimal re-renders.
    • Zod: Coming Soon — A TypeScript-first schema declaration and validation library for parsing and validating data structures.

  • 10. Testing

    • Vitest: Coming Soon — A blazing-fast unit test framework compatible with Vite, aimed at replacing Jest.
    • Playwright: Coming Soon — A comprehensive tool for reliable, cross-browser End-to-End (E2E) testing.
    • Cypress: Coming Soon — A powerful E2E test runner that runs in the browser for a visual testing experience.
    • Jest: Coming Soon — The traditional, widely-used test runner (consider Vitest for newer projects).

  • 11. Web Security: Coming Soon — Learn essential security practices for frontend applications, including Cross-Site Scripting (XSS) prevention, Content Security Policy (CSP) implementation, and secure authentication handling.

  • 12. Deployment

    • GitHub Pages: Coming Soon — The simplest way to deploy static websites directly from a GitHub repository.
    • Vercel: Coming Soon — The optimal platform for deploying Next.js applications, providing an excellent developer workflow and serverless functions.
    • Netlify: Coming Soon — A modern cloud platform with continuous deployment and serverless capabilities for static and Jamstack sites.
    • Cloudflare: Coming Soon — Utilize Cloudflare Pages for lightning-fast static and dynamic web deployments on a massive global edge network, perfect for modern frameworks.