Courses on egghead

  • Get Started with SolidStart

    SolidStart is a JavaScript Framework designed to build full-stack SolidJS apps and enhance your developer experience.

    In this course, you will learn how to:

    • Set up a SolidStart project
    • Toggle different rendering modes
    • Leverage file system routing to turn your files into routes
    • Create API routes to expose some public endpoints
    • Fetch, prefetch, update and cache your data
    • Turn your functions and actions into server-executing ones
    • Get rid of unnecessary network waterfalls by using Single Flight Mutations

    After this course, you should be able to leverage SolidStart to build your Solid applications.

  • Create Professional Responsive Websites using Bootstrap

    Create Professional Responsive Websites using Bootstrap

    Lucas Minter5× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    Bootstrap is an incredibly popular CSS framework designed to make your website look great on mobile and desktop.

    By the end of this course, you'll be familiar with many of the popular classes and components that Bootstrap uses to apply in your own projects.

    For each feature you build in the course, you'll get a sense for what the relevant classes do for those components and links to documentation for further exploration.

    For the course demo application, we will analyze the landing pages of Microsoft and Apple to identify common components that are implemented. When these are identified, you'll implement these components yourself with Bootstrap.

    You'll build several common UI elements such as a nav bar, a carousel of images, Cards, and Forms.

    Through building these components, you'll understand what is behind the different classes Bootstrap gives you and get familiar with how it exposes flex and grid layout for you.

  • Productive Developer Workflows with AI Enhanced Cursor IDE

    Productive Developer Workflows with AI Enhanced Cursor IDE

    John Lindquist33× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    Note: This course is being actively developed and more lessons will be added in the future.

    Cursor is an AI-enhnaced code editor that allows you to call upon the robots to refactor or stub out functions for you with natural language.

    In this course, John will show you workflows that will save you time and effort by utilizing the features such as its mult-line editing and context.

    In particular, by giving Cursor's AI the proper context, whether that's lines of code or multiple files, you'll get better output when trying to extend or refactor logic that's present.

  • Build a Real-time Next.js 14 Chat App with Fauna

    Build a Real-time Next.js 14 Chat App with Fauna

    Shadid Haque12× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    Dive into the world of real-time web development with this hands-on course! You’ll learn how to build a dynamic chat application using Fauna Streams and Next.js 14, focusing on the essentials and best practices.

    What You’ll Learn:

    • Next.js Best Practices: Master Next.js best practices for building fast, maintainable apps.
    • Server-Side Rendering (SSR): Learn SSR techniques and master features like server actions, server side form submission etc.
    • Database Access Patterns: Efficiently connect and retrieve data using Fauna.
    • Real-Time Updates: Implement real-time updates with Fauna Streams.
    • Basic Authentication: Secure your chat app with simple authentication methods.

    Course Highlights:

    • Practical, project-based learning.
    • Clear, step-by-step instructions.
    • Focus on modern, real-time web development.
    • Tips and tricks for optimizing performance.

    By the end of this course, you’ll have a working real-time chat app and a solid grasp of the tools and techniques used to build it.

  • Create a Linked List in TypeScript

    Create a Linked List in TypeScript

    Paul McBride5× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    You'll learn the fundamentals of building and manipulating linked lists, a data structure that is very popular in technical interviews.

    We’ll start by creating a basic linked list and then advance to inserting and deleting nodes at specific positions. We'll also learn how to retrieve node values by index, find the index of nodes by their values, and calculate the length of the linked list.

    By the end of this course, you'll have a solid grasp of implementing and managing linked lists in TypeScript.

  • Modernize State Management in Angular with Signals

    Modernize State Management in Angular with Signals

    Tomasz Ducin41× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    You've seen that Angular signals are here, and know that signal-components are coming up.

    This marks a paradigm-shift towards reactive programming in Angular.

    Are you ready?

    What if you could start learning signals and feel pleased with your progress? And reach a point where you feel confident when using signals in production?

    And feel ready when signal-based components come?

    Changes are coming, and you can get ahead of them.

    By taking this cousre you will learn how to:

    • Create computed signals
    • Share your signals in services
    • Use and cleanup signal effects
    • Turn signals into observables and vice versa
    • ... and more

    In 52 minutes over the course of 20 bite-sized lessons, you'll learn everything you need to know to take advantage of signals now and be prepared for signal-based components!

  • Build and Deploy React Native Apps with Expo EAS

    Build and Deploy React Native Apps with Expo EAS

    Kadi Kraman52× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    Expo Application Services (EAS) is a cloud build service used to build and publish React Native apps.

    This course will show you how to create the common types of builds for iOS and Android on EAS. We'll cover Development builds for local development, Preview builds for internal testing, and Production builds for release.

    Additionally, you'll learn about:

    • app versioning
    • automatic store uploads
    • setting up store listing pages
    • installing multiple app variants on the same device
    • installing past builds with Expo Orbit

    iOS

    An overview of build signing, and why an Apple Developer account needed in order to install builds on a real device.

    How to create:

    • an iOS simulator build
    • a build to use on your device for local development
    • a build to share with your team without uploading it to App Store Connect
    • a release build to use on the App Store

    You will also learn how to upload your build to App Store Connect, share it on TestFlight and create a Release.

    Android

    How to create:

    • a build to use for development on an emulator or a device
    • a build to share with your team without uploading it to Google Play
    • a release build to use ob Google Play

    We'll cover what is needed to create a new Google Play account, and the current restrictions for individual accounts.

    You will also learn how to set up auto-submit on Google Play.

  • An Introduction to the React Testing Library

    An Introduction to the React Testing Library

    Daniel Afonso56× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    In 2018, Kent C. Dodds wrote: "The more your tests resemble the way your software is used, the more confidence they can give you." This phrase became the guiding principle for the entire Testing Library ecosystem.

    A few years later, the React Testing Library became the de facto library for writing unit and integration tests in the React ecosystem.

    Thanks to its user-centric perspective, our tests are closer to our user experience and far away from implementation details.

    In this course, you will learn how to:

    • render your components
    • properly query your UI for elements while keeping accessibility and your users' experience in mind
    • improve your testing experience with the usage of some utilities
    • interact with your components to fire events
    • leverage asynchronous utilities to customize your testing flow
    • get rid of the annoying "not wrapped in act" warning

    After this course, you should be able to write and debug any test using the React Testing Library!

  • Full Stack TypeScript with AWS Cloud Development Kit v2

    Full Stack TypeScript with AWS Cloud Development Kit v2

    Tomasz Łakomy38× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    Amazon AWS is one of the most popular cloud providers in the world, but it can also be daunting to learn thanks to the alphabet soup of service acronyms.

    Once you've figured out which subset of services to use, you've got a lot of clicking around to do in order to get things configured.

    Not anymore!

    With the AWS Cloud Development Kit (CDK v2), you are able to configure AWS services from your terminal & editor.

    Even better, you can do your configuration, frontend, and backend all with the same language.

    In this course, Tomasz Łakomy will guide you through using TypeScript to complete the lifecycle of an application powered by AWS CDK v2. You'll see how to start a project, develop it locally, deploy it globally, and then tear it all down when you're done.

    The services & development approach Tomasz demonstrates in this course are used by countless companies around the world.

    Is yours next?

  • Build a Full Stack Blog with Astro

    Build a Full Stack Blog with Astro

    Lazar Nikolov29× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    "Build a Full Stack Blog with Astro" is a hands-on course that cuts straight to the chase, offering developers a practical approach to building a fully functional blog website. Throughout this course, you'll get to grips with Astro, a modern web framework designed to help you create fast content websites with a modern development experience.

    Here's what you'll be tackling:

    • Styling and Layout: You'll learn how to style Astro pages, exploring a variety of ways to make your site look good without compromising on performance.
    • Astro Components and Static Assets: Get comfortable creating reusable components and managing static assets like images.
    • Content Publishing System: Delve into managing blog content with Astro’s content collections, with type safety included with Zod to keep your data structured and error-free.
    • Dynamic Features: Implement pagination and dynamic pages to make your content discoverable and your site easy to navigate.
    • SEO Essentials: Tackle SEO fundamentals with astro-seo, ensuring your site ranks well and reaches the right audience without the guesswork.
    • React and Vanilla JS: Enhance your site with interactive components, first using React, then refactoring with Vanilla JS for optimal performance.
    • Backend Integration: You'll dive into back-end functionality, creating custom API endpoints, and interfacing with a database using Drizzle ORM to manage your content behind the scenes.
    • Dynamic OG image generation: Every content website needs decent OG images for social sharing. You’ll learn how to dynamically generate the OG images for your pages and blog articles.

    By the end of this course, you won't just have a theoretical understanding — you'll have a live, deployable full-stack blog that reflects current best practices in web development. You’ll also gain valuable and easily-transferrable skills for working with databases and containerizing and deploying full-stack web apps. This course is about building something tangible that you can use as a springboard for more complex projects down the line. So, let's learn how to build great content websites!

  • Mock REST and GraphQL APIs with Mock Service Worker

    Mock REST and GraphQL APIs with Mock Service Worker

    Artem Zakharchenko60× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    Controlling the network is the key to fast prototyping, bullet-proof tests, and efficient debugging. In this course, you will learn how to use Mock Service Worker for API mocking—from the setup and your first request handler to describing more complex network scenarios, such as dynamic requests, HTTP streams, and schema-first GraphQL mocking.

  • Full Stack with React and Appwrite

    Full Stack with React and Appwrite

    Colby Fayock27× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    There are two major categories that you'll encounter when you start to build Full Stack applications.

    You have: 💽 Database Management 👥 Authentication

    Both of these contain their unique set of challenges and layer on top of each other as you build out your application.

    You want to be able to Create, Read, Update, and Delete data from your database and also make sure that only the right users are performing these actions that you specify.

    That is why this course is set up around these two categories.

    You'll learn everything you need to about managing data using a service called Appwrite within your React application. Using Appwrite, you'll be able to create a database, upload files, and manage users.

    You'll start out by building out the database while purposefully ignoring authentication/authorization through out the application.

    The second part of the course will have you layer on auth so that you can enable users to log in and scope specific actions to roles that you'll create.

    This course is focused on the full stack nature of web development so we will start with almost all of our UI built out for us. You can explore the course repository to get familiar with what components are available.

  • Next Migration Course Extras

    As new features are added to Nextjs app router that do not fall within the scope of the main course, these lessons will be updated and more will be added

    How to use this course:

    This course is meant to be a supplemental course for the Next Migrate Course.

    The lessons match up as follows:

    • The two 'primer' lessons follow the 'Initialize The App Router' lesson in the Next Migration Course.
    • The 'migrating routes/pages' lessons (3 & 4) match up with the migrating routes lessons (sales, customer routes, and deposit route)
    • The migrating route handler and api routes lessons follow the migration of customer api routes from the main course
    • The refactoring of api routes to server components lessons follow "Refactor Customer Id Api Route Handler to Server Component" lesson
    • The refactoring to server actions lessons follow/fall within the main course refactoring to server action lessons
  • Migrate Next.js Application to App Router

    This course will be updated as all the app router features and apis become stable

    Credit for this application goes to Kent C. Dodds. The starter application was ported to Next.js from Kent's Remix workshops at Frontend Masters.

    Why this course? Simply put, many are wondering how to migrate their application to Next.js new app router architecture and make use of server components, server actions, etc.

    "Server components are the future." Twitter is saturated with comments like this. Many of us feel like it is tech version of Thanos, "Dread it. Run from it. Server Components arrive all the same."

    Is this true? Emphatically no. So we can silence the infinity war now and say there is nothing wrong with using the pages router.

    In fact, after the initial deployment lesson, you could stop this course and go make it something better or into something you want it to be using the pages router.

    There are many incredible additions to Next.js new app router architecture. This is simply a course and resource for you should you choose/desire to migrate from pages router to app router.

    You will learn how to:

    • migrate api routes, pages, and nested layouts
    • take advantage of routing in the app router for a better nested layout experience
    • turn getServerSideProps into a React Server Component
    • use server actions

    And much more.

    Due to the applications scale here are a few things to note:

    • The course shows how to migrate a set of routes, api routes, etc with a few exceptions
    • The remainder videos have been added to a supplemental course which you can find by searching for "Next Migration Course Extras" or clicking here. Consider them your bonus features and deleted scenes from the 'movie'.
    • The extras course has been set up to align with the lessons here. For example:
      • As you create the app router, there are 'primer' videos for how to create a page and dynamic routes in the app router
      • As you go through migrating routes, you will find additional 'migrating routes' videos in the extras course
      • As you migrate api routes, the remainder of the api route migration videos are in the extras course

    And with that you are good to go!

    Start your journey today and experience the possibilities of the Next.js app router

  • Build a Twitter Clone with the Next.js App Router and Supabase

    Build a Twitter Clone with the Next.js App Router and Supabase

    Jon Meyers185× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    In this course, we build a Twitter clone from scratch, using the Next.js App Router and Supabase. We dive deep on the Next.js App Router, learning about:

    • Client Components
    • Server Components
    • Route Handlers
    • Server Actions
    • Middleware
    • Implementing Optimistic UI

    On the Supabase side we look at:

    • Configuring Supabase Auth to use cookies
    • Using Row Level Security (RLS) policies to implement Authorization
    • Querying data across multiple tables
    • Introspecting PostgreSQL schema to generate TypeScript definitions with the Supabase CLI
    • Subscribing to realtime database changes

    This course is a deep dive into modern web development and I'm very excited to see what you're going to build on the other side! 🚀

  • Modern CMS Driven Web Applications with Strapi and Next 13

    Modern CMS Driven Web Applications with Strapi and Next 13

    Daniel Phiri40× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    Developers aren’t the only ones working on sites.

    Marketers, copywriters, designers, and other non-coding roles all need to be able to make content changes. If you don't want to be bothered to open a PR every time a typo needs fixed, you need a CMS.

    And Strapi is an amazing CMS option.

    Strapi helps you quickly build a robust content API. You can host it yourself, it supports both RESTful and GraphQL, handles your authentication, lets you bring team members and it's highly customizable with plugins and extensions.

    You can take those gains even further by adding Next.js 13 to the stack.

    Next.js is fast, supports both server and client-side rendering, and features dynamic routes. Once you are generating dynamic pages from your CMS you’ll see just how powerful the combination of Strapi and Next.js is!

    In this course you will do the following:

    • Building Content Models with Strapi
    • Fetching Data from your Headless CMS
    • Using React Server Components
    • Using the Next.js App directory
    • Setting up pagination in Strapi and Next.js
    • Parsing and rendering content in your Next.js application
    • Connecting external services to your Headless CMS (like Cloudinary for Media Management)
    • Deploying your Next.js and Strapi Applications to a production environment
    • Setting up and using Strapi Plugins Transferring data between your Strapi environments

    By the end of this course you’ll be building pages and managing your content like a pro!

  • Build a Sanity CMS Powered SvelteKit Blog

    Build a Sanity CMS Powered SvelteKit Blog

    Ben Patton24× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    SvelteKit is an application framework that builds on top of Svelte that provides you the app level functionality you need. It does the boring stuff that you don't want to so you can execute on the projects you want.

    As you build with SvelteKit, you'll find it continues the philosphy of Svelte by adhering to Web Standards and APIs. It builds on top of Web APIs so when you're develop SvelteKit sites you are also learning skills that will transfer to any web-based project

    In this course, you will build a modern SvelteKit blog powered by Sanity CMS. You'll start from scratch and build out a site that dynamically generates pages that you create inside Sanity.

    As you build your blog, you will learn how to:

    • Style Svelte components with TailwindCSS
    • Add error pages to different routes
    • Query your CMS in the front end
    • Parse and validate your data with Zod and JSDoc
    • Deploy both Sanity and your app to the web
  • Build Full Stack Web Applications with Angular and Firebase

    Build Full Stack Web Applications with Angular and Firebase

    Jorge Vergara12× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    Get started building web applications with Angular and Firebase.

    In this course, you'll learn how to set up and use Firebase in your Angular applications using the AngularFire library.

    We choose the AngularFire library because it is an official library created by the Firebase and Angular teams to work better with Angular.

    It helps you by wrapping everything into observables and helps update zones.

    By the end of this course, you'll be able to build web applications using Cloud Firestore as your database, Firebase Authentication as your Auth system, Cloud Storage to save files, and Firebase Hosting to deploy your applications to the web.

  • Adopting RTK Query into an Existing Redux Application

    Adopting RTK Query into an Existing Redux Application

    Jamund Ferguson62× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    RTK Query is a powerful new way to model data fetching and caching in Redux applications. It’s built on top of Redux Toolkit, but hides almost any interaction with reducers, selectors or thunks behind custom hooks generated specifically for your API.

    If your redux application relies heavily on data coming in from over the network, there’s a good chance RTK Query is worth adopting. It will allow you to remove significant chunks of code while also giving you new tools for error handling and cache invalidation that will make your users smile. Apply what I teach in this course and you won’t have to think about thunks ever again.

    Sample code can be found here: https://github.com/xjamundx/egghead-rtkq

  • Statechart Driven UI Components with Zag.js

    Statechart Driven UI Components with Zag.js

    Segun Adebayo37× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    Learn how to build a pin-input component with state machines, Zag.js and React.

    We’ll look at modeling a UI component with state machines, implementing those in a framework agnostic way using Zag.js, and connect the logic to the UI component.

    This course is a must-watch if you’re unfamiliar with State machines, and want to learn how to use them to build UI components with ease.

    In this course, you will:

    • Learn fundamental concept of state machine, event and transition
    • Model a UI component with state machine
    • Connect state machine logic to UI
    • Manage DOM events in state machines
    • Create custom React hooks with state machines
  • Custom Authentication Flows for Modern Applications with Auth0 Actions

    Custom Authentication Flows for Modern Applications with Auth0 Actions

    Will Johnson31× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    Auth0 Actions are serverless developer tools you can use to customize Auth0.

    Actions allow developers to extend Auth0 beyond what it can do out of the box by adding logic to login, user registration, password changes, and other events. You can quickly solve complex identity problems without hosting your own environment, and worrying about performance, maintenance, and security. Your code is stored and runs on infrastructure owned and maintained by Auth0.

    Actions are JavaScript functions that run as part of a flow. Action integrations can be installed in the Dashboard, or Actions can be written directly in the Dashboard’s JavaScript code editor.

    With the drag-and-drop flow editor, you can visually arrange Actions to build custom identity flows. You don’t have to rewrite your code to reorder and reconfigure functions.

    Follow along with Will Johnson as you download a sample application configured with Auth0, then write code for several Actions.

    Some examples of Actions you can create:

    • Block access from certain counties with an Action from the Auth0 marketplace.
    • Use an npm package and secrets to send a Slack message.
    • Redirect users to an a URL after login and back to Auth0

    This course will give you a solid foundation to start developing your own Actions.

  • Build a Realtime Chat App with Remix and Supabase

    Build a Realtime Chat App with Remix and Supabase

    Jon Meyers157× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    Supabase is a collection of open-source tools that wrap around a PostgreSQL database. In this course, we look at building a realtime chat application with Remix, using Supabase for db hosting, authentication, authorization and subscribe to realtime db events - updating the UI as the database changes.

    We will learn about:

    • loaders and actions in Remix
    • querying and mutating data with Supabase
    • authentication with GitHub
    • authorization with RLS
    • merging client and server state with realtime events
    • deploying a Remix app to Vercel

    This course is 100% TypeScript, however, don't stress if you don't have any experience with TS, as Supabase does most of the heavy lifting here! 🎉

  • RTK Query Basics: Query Endpoints, Data Flow and TypeScript

    RTK Query Basics: Query Endpoints, Data Flow and TypeScript

    Lenz Weber-Tronic264× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    Almost every React application needs to fetch data from a server and cache the result between renders.

    Traditionally, in-memory API Caching is something that has been done in React applications either on a per-component-level, which lead to application state running out of sync, or using a global state like Redux, which required a lot of hand-written code.

    RTK Query is part of the official Redux Toolkit and provides an application-global API cache that abstracts most of that hand-written code away, leading to a lot more readable code bases.

    It also offers a lot of advanced features like auto-generated hooks

    In this course, you will learn about

    • Using createApi to define multiple endpoints to interact with your API
    • The auto generated useQuery hooks and how to use them in your application
    • The RTK Query Dataflow and the role of the baseQuery function
    • The Redux Devtools “RTK Query” Monitor and which actions are flowing though your app
    • How to use RTK Query either with an ApiProvider or a pre-existing Redux store
    • Using RTK Query with TypeScript
  • Javascript Internationalization Object

    Javascript Internationalization Object

    Matías Hernández35× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    Personalizing the user experience is becoming more critical every day, even more so if your application or content is consumed by users in different parts of the world who most likely use other languages, date formats, currency, etc.

    There are multiple solutions to make your content adapt to the location or language of your users. Still, many of these methods have become outdated, complex, or dependent on a particular framework.

    Javascript also offers an internationalization solution, the Intl object.

  • Migrate a Monorepo from NPM Workspaces to Turborepo

    Migrate a Monorepo from NPM Workspaces to Turborepo

    Alejandro Ñáñez76× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    Monorepos are an amazing way to collaborate on a multitude of projects with other team members. The ability to share code seamlessly between projects and have a single source of truth is paramount when working on projects with multiple moving wheels.

    One of the tradeoffs of a Monorepo is all of the management you have to do to make your projects run flawlessly and simultaneously. Each project has it’s own linting, building, testing, and deploying that it runs whenever code in that project changes.

    This becomes a real problem when each of your projects lints, builds, tests, and deploys on every PR into your monorepo. You might be fine with a handful of projects but as your applications scale and you accrue more projects, you will need a way to scale.

    Turborepo is the tool that solves your monorepo’s needs.

    Turborepo is a task runner for Monorepos. Turborepo caches the results of your CI tasks, schedules those tasks to run at maximum speed, and only runs tasks on the affected code in your PRs. And because of remote caching, your coworkers, wherever they are, will have the most up-to-date code possible.

    One of the greatest things about it is that it's easy to use and can be incrementally adopted. Turborepo is a thin layer on top of your Monorepo.

    Turborepo doesn't get in the way as it is only a task runner. You don't have to modify your application code or anything to make it work.

    You’ll learn about

    • How to set up caching for both local and remote
    • CLI-commands and how they enhance your Monorepo
    • Parallel execution of your tasks

    So hop in and learn about Turborepo today!

    Prerequisite: This course is a continuation of Introduction to Monorepos with NPM Workspaces. To get the most out of this course, watch Monorepos with NPM Workspaces first.

  • Build High-Speed Monorepos with Nx and pnpm Workspaces

    Build High-Speed Monorepos with Nx and pnpm Workspaces

    Juri Strumpflohner153× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    In a monorepo, all of your apps and packages reside in a single repo. Structuring your code this way has many organizational benefits. You can more easily manage your dependencies, and you can maintain more consistency across your various apps.

    But, if you attempted to do this with just yarn or pnpm alone, you'll quickly start running into productivity issues. Your build times will be very long, and you'll have to make sure to run builds for any internal packages an app is depending on.

    That's where Nx comes in.

    Combining the speed of pnpm with the efficiency of Nx gives you an amazingly performant monorepo setup.

    Nx builds a graph of your workspace and all of the connected dependencies. If there is a change anywhere, Nx will know about it and everything that is affected by it.

    Which means that Nx is able to use caching to prevent unnecessary builds when nothing has changed. Nx's caching features enable blazing fast <10ms build times 🔥

    You get to have all the advantages of the monorepo with none of the performance issues!

    So start watching this course and learn how to achieve these speeds today.

  • Cache Supabase data at the Edge with Cloudflare Workers and KV Storage

    Cache Supabase data at the Edge with Cloudflare Workers and KV Storage

    Jon Meyers88× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    The “Edge” is where you write and store your code where your data is being produced. This allows for a quick and efficient data transfer, eliminating or severely reducing lag.

    Supabase is a suite of open-source tools wrapping a PostgreSQL database. It provides the building blocks of an app - database hosting, auth, file storage, real-time, and edge functions - so we can focus on what makes our app unique.

    Cloudflare Workers are serverless functions that run at the Edge! In this course, we will use the Wrangler CLI tool for interfacing with your Cloudflare account and creating or publishing your Workers.

    KV Storage is a cache that Cloudflare makes available to our Workers. It replicates across multiple CDN nodes, making it super performant to cache data.

    Combined, these three things give you the benefits of that reduced lag in a smooth and streamlined process.

    Throughout this course, Jon will teach you how to create a small blog that hits the key points of how to:

    • Query Supabase from Cloudflare Workers
    • Read and write KV Storage cache from Cloudflare Worker
    • Cache Supabase response at the Edge with KV storage

    And more!

  • Full Stack Web3 and Blockchain Development on Ethereum with SvelteKit

    Full Stack Web3 and Blockchain Development on Ethereum with SvelteKit

    Matías Hernández32× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    Web3 is a paradigm shift in how applications are interacted with, ran, and built.

    It’s not just a Pump-and-Dump scheme on cryptocurrencies or Bored Ape NFT profile pictures you can put on Twitter.

    A fundamental tenet of Web3 is bringing ownership back to the user. You no longer have to trust that your data is being properly handled on someone else’s server (although, currently Web3 ecosystem mainly depends on centralized infrastructure such as GitHub).

    This ownership is achieved through blockchain, cryptocurrencies, NFTs, and smart contracts.

    A great example of this type of ownership is through how you exchange money in Web3. There is no intermediary like Stripe, or PayPal to process your transactions. You can even build your own smart contracts that receive crypto (e.g. Ethereum or ‘eth’ for short) and then process that eth how you’d like.

    Building this type of smart contract is exactly what Matías is going to show you how to do right now.

    Matías builds out a Web3 application that allows you to receive tips in the form of eth in a tip jar on your website. This means your application will be backed by a smart contract that’s accepts eth, stores data, and emits Solidity events.

    The frontend application uses SvelteKit which you’ll see how easy it is to get up and be productive with in minutes. A huge benefit here is that the JavaScript you write is just that, JavaScript. You’ll be able to take what you learn and implement it into any framework of your choosing.

    While you build this application you will learn how to:

    • Write a smart contract using Solidity language
    • Test the smart contract using just JavaScript through the waffle framework
    • Communicate and interact with the smart contract using ethers.js in a SvelteKit application
    • Deploy your smart contract to make it public and accessible to anyone
  • Introduction to Smart Contracts with Ethereum and Solidity

    Introduction to Smart Contracts with Ethereum and Solidity

    Noah Hein37× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    Smart Contracts are programs stored on the blockchain that run when certain conditions are fulfilled.

    These Smart Contracts have many benefits to them such as speed, transparency, and security. The contract is immediately run as soon as the requirements are fulfilled. This creates a system where you place trust in a transparent system, instead of an opaque intermediary.

    Noah will show you how to write, test, and deploy smart contracts on Ethereum, using the popular smart contract language, Solidity. You'll also learn how to use Foundry, a popular dev-toolbelt, to streamline our whole development process.

    Throughout this course, you'll learn how to:

    • safely and securely set up Smart Contracts
    • write and read data on your Smart Contract
    • send transactions with specific arguments to your Smart Contract
    • deploy your Smart Contract using Forge and QuickNode

    And more!

  • Write, Test and Debug Vue 3 Components in the Browser Using Cypress

    Write, Test and Debug Vue 3 Components in the Browser Using Cypress

    Filip Hric15× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    Approaching testing at a component level has definitely its benefits. Seeing your component rendered in isolation, and making sure it behaves correctly with different properties is definitely faster that trying to interact with an app at end-to-end level. On the other hand, seeing your app render in a browser in an end-to-end test is a significant advantage.

    With Cypress’ component testing you can now take the best of both worlds. Render component and interact with it in a real browser. You can pass different properties, spy on its function calls, click and type into them or even intercept its network calls. All this with a minimal setup and vast options.

    What you'll learn

    • setup component testing in Cypress
    • customize component mounting properties
    • render a component in a browser
    • examine a component with different passed properties
    • make asserrtions on component’s emitted events
    • render a component with content passed into its <slot />
    • catch edge cases by calling actions and passing values into Pinia’s state
    • handle router and it’s effect component behavior
  • Full-Stack Serverless Applications with Next.js & Fauna

    Full-Stack Serverless Applications with Next.js & Fauna

    Shadid Haque45× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    Next.js is one of the most popular server-side-rendered React frameworks you can use to build production-ready serverless applications in record time.

    On the other hand, Fauna is a flexible, serverless, distributed document-relational database. Fauna has a powerful GraphQL API and custom resolver support.

    Using Next.js and Fauna, you can build robust, feature-rich, production-ready full-stack applications without the hassle of managing any servers or databases.

    In this course, Shadid guides you through building your very own full-stack serverless marketplace application using Next.js, GraphQL, and Fauna.

    You will learn,

    • How to work with Apollo GraphQL Client in Next.js
    • How to setup Fauna GraphQL
    • Data modeling in Fauna
    • How to write custom Fauna GraphQL Resolvers (UDFs)
    • How to authenticate with Auth0?
    • Stripe payment
  • Create A Bar Chart with React and D3

    Create A Bar Chart with React and D3

    Andy Van Slaars50× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    D3, or Data Driven Documents, is the defacto standard for data visualization on the web. It's an incredibly powerful library that gives you all the tools you need to build just about visualization you can dream of.

    D3 is not a collection of predefined charts. Instead, it's a robust set of utilities you can use to ingest and transform data, to map that data to screen values, and ultimately to manipulate the DOM to render your visuals.

    When working with React, D3's desire to manipulate the DOM is at odds with React's goal of rendering the UI as a function of state. So how do we handle this? Simply put, we use D3 for everything up to the point where we want to render our output, and then we hand all that data to React for rendering.

    In this course, we'll start from scratch and build out an SVG bar chart for some sample data. We'll lean on D3 for its tools and then hand that data off to React for rendering.

  • Ecommerce Product Management & Storefront with GraphCMS, Snipcart, & Next.js

    In this course, Colby is going to do a deep dive into creating a full store for your products. You'll learn how to set up and use GraphCMS as your content management system. You'll learn about the Cloudinary UI extension and how to use it to host your images. You'll learn about Snipcart and using the useSnipcart hook to handle the cart state and the checkout. You'll learn how to implement Stripe as your payment gateway. And lastly, you'll learn how to deploy a Next js app to vercel from github with environment variables.

  • Use Playwright to Test and Automate Web Applications

    Use Playwright to Test and Automate Web Applications

    Basarat Ali Syed123× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    In this course we demonstrate how to get started with Microsoft Playwright. We follow this up with various features of Playwright that make it extremely easy for you to test and automate modern web applications.

  • Complex State Management in React with Jotai and XState

    Complex State Management in React with Jotai and XState

    Daishi Kato74× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    Jotai's state management is primitive and flexible. This gives you room to build, compose, and share state throughout your application exactly how you need it.

    This flexibility can become hard to manage when you have complex requirements that span across a number of states your application can be in.

    Jotai lets you leverage other state management solutions through integrations so that you can solve the problem you're facing exactly how you need to.

    One of those integrations is XState. XState gives you a safe abstraction to enumerate and handle the complex states your application can be in.

    With Jotai + XState, you get the flexibility and ease of use of Jotai with the power of XState.

    XState is a sophisticated library to provide a better and safer abstraction for state management.

  • Refactor a React Application to TypeScript

    Refactor a React Application to TypeScript

    Chance Strickland186× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    Intro

    TypeScript has been growing in popularity among companies who build their products with React, and for good reason!

    Types play nicely when working with components, and lead to a super smooth developer experience.

    But what if your application is already being shipped and continuously deployed? It doesn't mean you can't take advantage of everything TypeScript has to offer.

    Refactoring an application to TypeScript doesn't have to be daunting. Follow Chance's lead, and you'll be well on your way!

    The course starts with an overview of some of Chance's favorite tools and their TypeScript-specific settings. These tools will help you search your project's TypeScript paths for auto-importing, a shorthand tool for writing JSX and TypeScript to speed up your writing, and a tool for helping you to maintain your code to a high quality.

    The tools are Emmet, ESLint, Prettier, and a variety of VSCode extensions. There's even some rollup and Babel thrown in for transpiling and compiling our TypeScript to make configuration and build setup a breeze.

    The Project

    https://res.cloudinary.com/dg3gyk0gu/video/upload/e_loop/q_100/v1639426695/course-resources/refactor-react-components-to-typescript-c70bffa0/landing-page-gif.gif

    Once the tooling is in place, Chance works through converting a completely functional Windows 98-style Minesweeper game away from JS React into one that takes advantage of the power of TypeScript. It'll be clear how changing the JS to TS will not affect the functionality of the game at all but improves the safety of your app.

    Topics in the second half of the course include component refactoring as well as adding types to React Hooks, useReducer, and Context. You'll even see how to add types to a legacy Class component!

    Chance has several years of experience working with component libraries and this is your opportunity to learn from his experience and apply his process to your own.

    Gain these Skills

    Chance will give you the knowledge of how to incorporate TypeScript into any React application, whether it's shipped and continuously deployed or not. You'll take the practices and tools that you learn here to be much more productive in your TypeScript, wherever you use it. Lastly, He will give you the knowledge of when you see React Types vs your own custom types.

    Prerequisites

    This is not an introduction to React or TypeScript course. You will need to have a basic understanding of the two to be able to follow along. If you don't have that basic understanding, or just want a refresher on the subjects, The Beginner's Guide to React and Up and Running with TypeScript are the best two places to start.

    What's Next?

    The Beginner's Guide to React is the best place to go if you are just starting out in React. This course by Kent C. Dodds covers all the basics to get you up and running with React.

    Advanced TypeScript Fundamentals by Marius Schulz will take you beyond the basics to teach you some new language features TypeScript has to offer courtesy of the wonderful team over ta TypeScript.

    TypeScript: Tips and Tricks by Kamran Ahmed is where to go once you've started using TypeScript but looking for that little something to take it to the next level.

  • Use GraphQL Data Loaders to Prevent Scaling Issues by Batching & Caching Database Requests

    Most developers would raise an eyebrow if they saw database queries being done in a for-loop, but GraphQL provides just enough abstraction that it isn't always intuitive exactly how many times each resolver fires at scale, nor is it obvious how to batch operations efficiently and still return the correct results to the correct consumer.

    You'll learn how to use the GraphQL Data Loader pattern to improve the performance of your application, and solve scaling issues before they become a problem.

    To do this, we'll first implement our own naive version of the pattern to understand why the API is shaped how it is. Then we will switch over to the official DataLoader package and explore the benefits further.

    Skills you'll Gain

    • Implement a cache layer to optimize your requests
    • Batch requests so your Database isn't overloaded
    • Build a performant GraphQL API
  • Transform Local Functions Into Endpoints With Serverless

    Transform Local Functions Into Endpoints With Serverless

    Lukas Ruebbelke30× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    Front-end web architecture has made exciting advances in recent years. But before we get to that we need to have a discussion on what has led us to this point and the driving principles behind it.

    Since JQuery, we've progressively been decoupling our logic from the DOM. After JQuery, frameworks like Angular were able to abstract that logic into controllers and services. Then Redux came along and brought a simplified that let us reorganize our logic into more cohesive units.

    We should be taking advantage of improved decoupling in the modern web. If you can write a function you can write an endpoint. And if you understand frontend architecture principles, then you already understand cloud architecture principles.

    In this course, you will learn how to decouple JavaScript functions from the environment they live in. By using the Serverless framework and AWS, you will see how straightforward it is to create an endpoint.

    So check out this course and start lifting your functions into the cloud today!

  • Script Kit Showcase for Optimizing Your Everyday Workflows

    Script Kit Showcase for Optimizing Your Everyday Workflows

    John Lindquist116× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    Scripting can save you a ton of time by automating your daily workflows.

    But it's hard to justify the time investment of learning Bash to write your scripts.

    Bash is the great barrier we all face when trying to script away our daily tasks. There are some common problems that we run into when dealing with it. Like what if we want to display images? Or share our script with other devs cross platform?

    You know what you want your script to do. You know you could figure it out if you had the time. But it's all just too darn much.

    What if you could write your scripts in JavaScript, launch a GUI, and were actually easy to share with your team? audible gasp

    Script Kit is the tool that’s been missing from your developer toolbox for so, so long. 🛠

    word-api.gif

    Download the new hotness here: https://scriptkit.com 🔥

    We even use Script Kit internally at egghead.io to manage our lesson transcripts! With a single script, we query an API to list the transcripts, modify them as necessary, then post the changes.

    This course was made to show you what Script Kit can do for you.

    John Lindquist, the creator of Script Kit and co-founder of egghead.io, has put together this series of lessons to give a quick overview of the features of Script Kit to help you get oriented.

    We know you’ll be off and having a blast with your own scripting ideas in no time!

  • Animate React Apps with Framer Motion

    Animate React Apps with Framer Motion

    Will Johnson240× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    Intro

    Animations do more than just look good. They can draw the user's attention to important information or let them know they can interact with certain elements.

    You can use them to smooth transitions and bring your applications to life. It makes you stand out from the usual wall of text that you see on most applications.

    But here is the issue, animations can get complicated. You have to have a good understanding of how CSS works but it takes hours of studying before you can even start trying to animate.

    Framer Motion solves this for you and Will Johnson will show you how.

    The Project

    homepage gif for showing code

    In this course, you’ll iteratively add animation to a fully-styled shopping list app that’s built-in React.

    You’ll see how Framer works out of the box, and learn just how customizable it is. Throughout the course, Will demonstrates animation through changing size, direction, and even appearance.

    It has smart defaults that handle making the animations smooth and performant. Automatically animating layout changes. It does so much for you it almost feels like you're cheating.

    You’ll even see how to animate the path of an SVG making it draw the path for your image.

    Gain these Skills

    Will gives you the knowledge of how to incorporate Framer Motion into any React application. You will be able to customize your animations to do whatever it is you want/need and show your users what items on your app are interactable. You’ll be able to take your static application and make it interactive.

    Prerequisites

    There are no prerequisites for this course. The application we are working on is already built for you so you just have to be able to follow along with Will as he integrates Framer Motion into the app.

    What’s Next?

    If you are further interested in learning about animating your applications, Spring Animation in React with React Spring is a great place to learn! Christian Nwamba will teach you the skills to begin using the react-spring library and add animation to your React components.

    If you are interested in more courses by Will Johnson, he has a mini-course on how to Create A Blog With Jekyll. Will shows you how to download, install Jekyll plugins, and create blog posts.

  • Build a GraphQL API with AWS CDK and AppSync

    Build a GraphQL API with AWS CDK and AppSync

    Tomasz Łakomy75× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    Build a fully managed, serverless GraphQL API powered by TypeScript and AWS CDK in a matter of hours, not days.

    AWS CDK gives us the power to go all-in with infrastructure as code for AWS. With it, we can create a full GraphQL API with AppSync, a database with DynamoDB, serverless functions with Lambda, and much more.

    In this course, you will learn how to do all of the above from your command line and code editor, which will save you time and give you greater flexibility.

    Want to delete your stack? That's fine, just run cdk destroy and poof, all of the resources are gone. Changed your mind? Just deploy the stack again and they all come back.

    AWS CDK makes it that easy.

    And since we are working from the command line and our code editor, we will take advantage of TypeScript and other third-party libraries to improve our developer experience.

    So stop wasting time in the AWS console, check out this course, and learn how to leverage infrastructure as code to your advantage.

  • Introduction to GROQ Query Language

    Introduction to GROQ Query Language

    John Lindquist74× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    GROQ (Graph-Relational Object Queries) is a query language for JSON. This course will help you build your first query and walk you through filters, projections, functions, and the other features of GROQ to help you request exactly the data that you want.

    In this course, John Lindquist will teach you how to create and structure GROQ queries to load exactly the data you want.

    The course will kick off by giving you a quick introduction on what GROQ is, and then you will learn how to use the different features the language supports.

    At the end of this course you will know how to use GROQ in the context of a Sanity.io dataset.

  • Test Network Edge Cases with cy.intercept() Command in Cypress

    Test Network Edge Cases with cy.intercept() Command in Cypress

    Filip Hric96× completed
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$

    Your app can react in various way on different network conditions. Cypress has a great toolset for setting up those conditions, which enable you to test your app thoroughly. That way you can ship your app with confidence.

    Cypress’ .intercept() command is one of the most fun command to use. And it’s also one of the most useful.

    Especially when you are done with all your happy paths and want to increase your test coverage with some edge cases.

    These edge cases can mean different data, headers or server behavior. You can modify all of these, dynamically or with a static fixture prepared beforehand