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

Course Curriculum

Chapter 1: Introduction

Lecture 1: Welcome!

Lecture 2: Setting the expectations

Lecture 3: I want you to get the best out of this course

Chapter 2: Hands-on Demonstration: Create and publish your first package

Lecture 1: Introduction

Lecture 2: Key Updates Unveiled: A Concise Overview of Significant Changes

Lecture 3: Analyzing Template-Generated Websites and Documentation: A Critical Evaluation

Lecture 4: New Repository Setup: Analyzing Setup Action Modifications

Lecture 5: Todo.md Review & Recommended Add-ons Installation

Lecture 6: Rebrand.config.json Update & Dependencies Installation for Rebrand.js Activation

Lecture 7: Automatic Code Generators: A Review

Lecture 8: Configuring Security and DeepSource Setup

Chapter 3: Hands-on Demonstration: Create and publish your first package (Legacy)

Lecture 1: Setting Up the System

Lecture 2: Introduction to the React 18 Turborepo Template

Lecture 3: Create a new repo from the template

Lecture 4: Understanding the important changes made by workflows

Lecture 5: Cloning the repo locally and setting up pnpm

Lecture 6: Learn to use the code generator

Lecture 7: Set up CodeCov and Code Climate

Lecture 8: Create an NPM auth token

Lecture 9: Final touch-up and publish the package

Lecture 10: Troubleshoot and fix bugs

Lecture 11: Deploy the home page for your library to Vercel

Lecture 12: Update the package

Lecture 13: Apply Changeset

Lecture 14: Fix Remix styles import issue

Lecture 15: Setup repo for scoped package

Chapter 4: Creating Your First Real-World, Next-Generation Library

Lecture 1: Create and setup new repository based on Turborepo template

Lecture 2: Rebrand our new project

Lecture 3: Scaffold components and hooks using plop generator

Lecture 4: Clean up and outline tasks

Lecture 5: Eliminating Redundant Import Statements in Build and Crafting the useMode Hook

Lecture 6: Create RGS store for internal usage

Lecture 7: Handle System Preferences

Lecture 8: Sync theme state across tabs

Lecture 9: handle DOM updates

Lecture 10: Integrating with the examples

Lecture 11: Craft the Switch

Lecture 12: Using custom tag for the Switch component

Lecture 13: Update core component to support CSS modules and create styles for the switch

Lecture 14: Using classes vs data attributes for theming

Lecture 15: Configuring the CSS Plugin

Lecture 16: Crafting the ServerTarget

Lecture 17: Exploring minification tactics

Lecture 18: Fixing patched transitions

Lecture 19: Rewrite export paths using exports field in package.json

Lecture 20: Using ChatGPT to assist in creating documentation, description, etc.

Lecture 21: Clear out the todo list – Setup CodeCov, etc….

Lecture 22: ? The Grand Release – Publish the package to npm registry ?

Chapter 5: Understanding Issues template and Workflows

Lecture 1: Introduction

Lecture 2: Issues templates

Lecture 3: Setup workflow

Lecture 4: Test Workflow

Lecture 5: Docs Workflow

Lecture 6: Publish Workflow

Chapter 6: Understanding the Turborepo Setup

Lecture 1: Introduction to Monorepo and Turborepo

Lecture 2: VSCode files, docs and Turborepo configuration

Lecture 3: Explore Monorepo packages

Lecture 4: Understanding Changeset and misc. such as code of conduct, LICENCE, formatter, e

Lecture 5: Overview of the Library code

Lecture 6: Understanding touchup.js

Lecture 7: Understanding tsup config

Lecture 8: Understanding ESBuild plugins

Chapter 7: Improve the Turborepo Template

Lecture 1: Add Deepsource static code analyser

Lecture 2: Explore and fix issues pointed by deepsource

Lecture 3: Fix performance issues

Lecture 4: Fix anti-patterns

Lecture 5: Explore documentation improvements

Lecture 6: Simplified publish mechanism using files field in package.json

Lecture 7: Migrating fork-me to separate repository

Lecture 8: Migrating fork-me to separate repository – Part 2

Chapter 8: Deep Dive: Crafting NextGen UI library from scratch

Lecture 1: Introduction

Lecture 2: Update Turborepo generators

Lecture 3: Choosing server vs client component

Lecture 4: Update the build setup

Lecture 5: Create a simple loader

Lecture 6: Clean up

Lecture 7: Update shared-ui and setup to display simple loader

Lecture 8: Create dev script for the lib

Chapter 9: Recreating the Turborepo Template from scratch

Lecture 1: Introduction

Lecture 2: Review the Turborepo Scaffold and touch up

Lecture 3: Add Deepsource and CoC, setup prettier and .vscode

Lecture 4: Exploring Turborepo starter templates

Lecture 5: Scaffold Turborepo with kitchen-sink starter

Lecture 6: Exploring the packages

Lecture 7: Exploring the Apps

Lecture 8: Set up a "lib" package – the home for our library

Lecture 9: Configure tsup

Lecture 10: Test tsup config and set up generators

Lecture 11: Test generators