Craft Next Gen UI Libraries for React 18 and Next.js 14

Explore the course introduction that compares the previous and current template versions, demonstrates template usage, and highlights key lessons and added capabilities.

Discover an updated template to build React libraries compatible with React 18 and Next.js 14, featuring plop migration, beta and alpha releases support, and MPL 2 licensing.

Analyze a template-driven React 18 loader library with live demos, theme customization, and open-source contributions, while reviewing auto-generated docs via TikTok plugins and ESLint-driven scaffolding.

Create a private library from a template; the setup action removes docs and applies a post-install rebrand config with package name, npm user, and git owner.

Set up a codespace project and template, readme file, install Node.js and VSCode extensions, and configure deep source tooling for automatic formatting and a kanban dashboard synced with version control.

execute rebrand configuration and dependency setup by cloning a template, updating rebrand.config.json, renaming packages, and running npm install to activate rebrand.js and create a commit.

Explore how automatic code generators scaffold library components, update package.json, and validate builds by creating a client component in the library, running tests, and managing exports.

Learn to scaffold server and client components, enable vulnerability reporting, configure security policies, and manage repos and workflows with yarn block, SCSS modules, and GitHub pages.

Learn to quickly create and publish your own package, guided by prerequisites like a GitHub account, Codespaces, and Node.js, with VS Code as the preferred IDE.

Install git and bootstrap the React 18 turborepo template to start publishing your npm library that mixes server and client components for Next.js 14.

Create a new repository from a template, name your library, choose public or private, and explore setup actions, rebranding, and contributing workflows for your React 18 and Next.js 14 project.

Explore how this setup changes workflows, including a commit, deletion of the setup workflow, rebranding the library from turbo template to minimum, and updating Next.js, Remix, and weight examples.

Clone the repository locally, open it in VS Code, install dependencies with npm via npm i, and prepare the development environment for Codespaces by setting up npm and turbo globally.

Master using the code generator to scaffold server components, configure turbo, and export client and server components for a React 18 and Next.js 14 UI library.

Set up Codecov and Code Climate for automatic publishing and static analysis of your library, configure repository secrets and actions, and update badges for maintainability.

learn how to create an npm auth token to authorize GitHub actions for publishing a library, save it as a repository secret, and configure an automation token.

Publish a react and next.js library compatible with react 18 and next.js 13–14 server components; clean up code, update package.json and readme, then deploy to vercel and npm.

learn to troubleshoot failing workflows, fix client index errors, streamline exports from server, run tests for coverage, and publish a library with proper dist builds and documentation.

Deploy your library's home page to Vercel by connecting a Vercel account with GitHub, selecting a Next.js template in a monorepo turborepo setup, and publishing with automatic build detection.

Update the package with repo changes, add scope.js, and format via yarn format; create a new branch to add course details and styles for the Udemy demo in Next.js.

Apply a change set with yarn, select libraries, and bump patch version; describe the update, commit, push, and open a pull request, then publish via the change set workflow.

Address remix styles import issue by removing remix example or implementing inline styles for text align, justify, and padding.

Publish a scoped package by updating scope.js to use your npm organization's @scope name. Then delete conflicting releases and tags, fix the git workflow, and re-run publishing.

Create a real-world library with a turborepo template, set up a new GitHub repository for next.js dark mode, and implement a theme toggle using media prefers color scheme.

Rebrand our new project by updating the repo owner to Reactive Tools, configuring rebrand.json, and installing dependencies with npm after closing the kanban board and syncing the turbo repo template.

Learn to scaffold react components and hooks with the plop generator, generating client and server components for a lean library while naming with meaning and minimizing footprint.

Clean up the core component by removing unused props and clarifying theme handling, and outline tasks to sync the theme across tabs with a class name.

Eliminate redundant imports by moving shared state to utils and expose a reusable use mode hook, enabling theme toggle and color scheme resolution across components.

Create a use mode store for React 18, computing resolve mode from system mode and exporting state and setters, with initial values and arrow functions to streamline the build.

Update the core component to listen for media query changes and set the system mode on the client side using use effect, theme switcher, and a set theme state function.

Sync theme state across tabs by using the storage event and local storage for persistent color scheme preferences, including a short key and safe JSON parsing.

Update the DOM by removing old mode classes and adding current mode classes on the document element when resolve mode changes; synchronize the mode to localStorage via JSON.stringify.

Integrate the library into existing examples and implement a Next.js theme switcher using the use mode hook to manage color scheme, then test the setup with yarn build.

Craft a three-state switch to cycle light, dark, and system modes using a store-based hook with skip-system logic for theme management in a React 18 and Next.js 14 UI library.

Learn to build a versatile color switch inside a theme switch by using a custom tag prop that renders as button, div, or span, with children support for flexible composition.

Learn to update a core React component to use CSS modules and global styles via data attributes, enabling a switch component with system, color scheme, and mode-driven styling.

Discover why data attributes enable reliable theming over scoped css classes, fix class-based styles, build the library, and ensure the theme switch works with updated Next.js theme styles.

Configure the CSS plugin to scope Next.js theme styles, import the dark mode styles, verify class-based switches, then rebuild to apply updates and prepare the Next.js server target.

Build a server target to apply styles on the server via cookies, avoiding the flash of unthemed content and using a data attribute for the mode.

Explore minification tactics to shrink bundles, rename symbols for shorter code, remove redundant cleanup, and optimize document usage in a React library.

Fix patched transitions by applying a modify transition to prevent jittering during theme changes, minify transitions, and update the DOM with a restored transition using a star CSS selector.

Use the exports field in package.json to customize subpath exports (e.g., /server, /books, /switch), simplifying imports and making the library more user friendly before publishing after cleanup and readme updates.

Learn to use ChatGPT to create documentation, descriptions, and keywords while building and testing a next-gen ui library with React 18 and Next.js 14.

Remove non-next.js examples to focus the ui library on Next.js. Prepare for publish by making the repo public and setting up Codecov and deployment from main and docs.

Publish the package to npm registry by updating packages, adjusting keywords, and validating via a publish workflow, while fixing readme formatting and auth token setup.

Explore the turborepo template, review setup, workflow changes, and repo creation, and learn to use code generators, badges, and fix remix style imports to modify the template confidently.

Explore how to use and customize GitHub issue templates within a starter project, clone and edit locally in VSCode, and guide user submissions with bug report and feature request templates.

Execute the setup workflow for a turbo repo template and learn how GitHub actions, yaml configurations, and setup steps rebrand and commit changes on template creation.

Explore publish, paste, and docs workflows in a GitHub Actions setup; configure cron-based scheduling, node/npm setup, unit tests, code coverage uploads, and maintainability metrics via Codecov and Code Climate.

Execute the docs workflow to check out the repo, set up node, install dependencies, run tests, update turborepo, build all apps, generate documentation, and commit changes back to GitHub.

Explains the publish workflow that publishes to npm and creates a dag. It triggers only when the leapfrog me package.json changes on the main branch, then runs tests before publishing.

Explain monorepo and turborepo concepts, including npm monorepos and yarn workspaces, and showcase incremental builds, caching, and parallel execution across multiple packages.

Explore the template's turborepo setup, including the dot turbo file, npm workspace, and turbo.json pipelines, while configuring VSCode extensions like Prettier and the docs folder for GitHub pages deployment.

Explore monorepo structure, including packages, lib, and examples, and learn how to modify and integrate a shared UI library across Next.js 14 and Remix projects.

Learn how change set auto generates change logs and bumps versions across packages with yarn change set, and review ESLint, Prettier, .gitignore, and code of conduct within a Turborepo.

Explore the UI library within the template. Learn how turbo runs tests across packages, builds, and creates coverage reports, and how to publish a package with package.json and tsconfig.

Configure touchup.js and the publishing workflow to produce a dist build, adjust package.json, copy readmes, and automate releases with GitHub actions for a React 18 and Next.js 14 library.

Explain tsup config and sub in a build tool for a library, showing config dot ts, formats esm and cjs, target es2019, no source maps, bundling, minification, and esbuild plugins.

Discover how esbuild plugins optimize bundling for React 18 and Next.js 14, including handling the use client directive, css modules, and pruning unnecessary test data and files for production.

Set up deepsource static code analysis for a React 18 and remix template, configure the JavaScript analyzer with maintainability checks and test patterns, and push changes to enable ongoing analysis.

Review deepsource results showing a non-null assertion in main.tsx for the root element, and implement a safe null check with an error.

Learn to fix performance issues in a turborepo template by replacing inline functions with useCallback, handling dependencies, and applying the nullish operator to prevent unnecessary rerenders.

Identify and fix anti-patterns in a React library project by addressing wildcard imports, improving readability with descriptive variable names, and handling type issues with selective rule disables and documentation.

Fix documentation issues in a React 18 and Next.js 14 project by adding documentation comments for functions and classes and contributing pull requests to open source.

Use the files field in package.json to control published contents, including dist index files, and practice npm publish and unpublish workflows.

Migrate fork-me to a separate repository, scope the package for publishing, run tests, update version to 211, and prepare for publish while validating code coverage and maintainability.

Troubleshoot publishing by completing the repo setup, making the package public, and configuring secrets and tokens as part 2 of migrating fork-me to a separate repository.

Launch a new React loader library and demonstrate its potential through incremental improvements and CSS handling. Encourage learners to contribute to open source by adding logos and CSS module templates.

Explore updating turborepo generators by adding a new css modules template, creating client and server files, and wiring kebab-case names with module css, while testing with turbo gen.

Decide between server and client components for loaders, preferring server components when possible, and document usage to prevent misplacing data fetching logic.

Update the build setup to import from the distributed build rather than direct source, improving reliability with CSS modules and remix compatibility for server components.

Create a simple loader by setting up a new library, choosing an npm-friendly name, updating package.json, and preparing to publish public packages for React 18 and Next.js 14.

Clean up guide shows updating package.json, creating simple loaders, removing server.ts, and refactoring imports to the list directory, then running npm install and yarn build to finalize changes.

Learn how to name and scaffold a shared ui library, set up a scope package, add React 18 loaders, and display a simple loader in a Next.js 14 project.

Define a dev script in package.json to build with watch and run two development servers filtered for the Next.js example and React 18.

Create a brand-new turbo template and learn to make a shareable setup by rewriting the template with the turbo CLI, configuring npm workspaces, and initializing a fresh repo.

Review the turborepo scaffold, disable remote caching and telemetry, and verify the upgraded turbo build and its pre-installed formatter in package.json.

We implement deep source for static code analysis, add a code of conduct, configure prettier and a prettier ignore, and set up vscode with recommended extensions and format on save.

Explore Turborepo starter templates and the official template, discovering multiple examples, including the kitchen sink, which combines Next.js, Remix, and an Express server for full-stack setup.

Scaffold a turborepo using the kitchen sink starter, explore diverse examples from Prisma, React Native, Vue, and Nuxt, then clean the workspace and commit changes for the next lesson.

Explore how a turbo template scaffolds a monorepo with apps and packages, explains turbo build and dependency graphs, and leverages a logger and Next.js themes across React, Remix, and Next.js.

Explore the apps directory and review four templates—an admin app, an express API layer, a remix blog, and a Next.js store—and examine routing, layout, and server side and client side rendering.

Move the lib directory to the repo root as the library home, update the workspace, and run a full build before renaming apps to examples for publishing.

Configure tsup to produce cjs and esm formats, manage externals, disable source maps, enable dts, and replace legacy esm output for better compatibility with Next.js.

Configure tsup and set up turbo generators to build the report/ui library. Define the entry point in config or package.json, then ensure minified outputs and template copying for the rewrite.

Test generators and turbo setup to scaffold a deeply nested client component, adjust lib rc naming, run yarn gen, and commit changes.

Refactor and move turbo generators to the root, streamline route handling with kebab-case conversion, and update config for nested routes in a React 18 and Next.js 14 UI library.

Configure pytest as the testing setup for the library package, install React Testing Library and types, adjust presets, add css module declarations, run tests, and update gitignore.

Replace turbo generators with plop by configuring block at root, convert to commonjs, and use jsdoc to preserve TypeScript advantages while improving loading time.

We craft a new react loaders library and rewrite the template. We configure for large-scale libraries like material UI using prop configurations and prop generators to guide code on GitHub.

Scaffold loader components using plop in a turborepo, creating dots and bars loaders as server components and enabling a good first issue workflow for CSS optionality and PR contributions.

Create and refine loaders, including dots and bars, as server components, tune client versus server behavior, and update CSS and tests for reliable rendering in React 18 and Next.js 14.

Configure the TypeScript compiler to emit only declaration files for the library, avoiding non-tsc declaration issues, and use a tsup/tsconfig build setup to generate typings.

Configure the admin app to use the library by integrating the UI package with examples, exporting bars, and enabling TypeScript compilation with watch mode for development and build.

Fix the dev server by preventing dist cleaning in watch mode with options.watch, stabilizing lib and admin builds.

Fixes esbuild-plugin-react18 bugs that affected minified and non minified builds, patches esm build, and updates packages; demonstrates adding color and width props to a loader with CSS variables.

Explore the loaders library code organization in a turborepo template, featuring a common base component, internal exports, and container and button wrappers for loading states.