Learn Cycle, Graphcms and Nuxt

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.

snipcart

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

graphcms

Displaying a list of physical locations is helpful, but showing them on a map, giving your potential customers the ability to see how close each store really is to their location is even better.

GraphCMS supports adding coordinates as a field to our data models, where we can dynamically pull those coordinates in and add them to a map.

We'll walk through how we can loop through our store locations and add each one to a new React Leaflet map. We'll also learn about some pitfalls of using React Leaflet in an app framework like Next.js and how we can solve it with dynamic imports and manual image imports.

* [Dynamic Import - nextjs.org](https://nextjs.org/docs/advanced-features/dynamic-import)
* [Leaflet Map Marker Rendering - github.com](https://github.com/Leaflet/Leaflet/issues/4968)

I also have a whole course on how to [Build Maps using React Leaflet](https://egghead.io/courses/build-maps-with-react-leaflet) if you want a further dive on the topic. 

Add All Store Locations to a React Leaflet Map with Location Data From GraphCMS

If our store supports physical locations, we want to give our customers the opportunity to easily find out those locations so they can visit us in person. That means, we need to show them somewhere on our site.

We can take advantage of GraphCMS custom Schema Models to create a new document for each store.

We'll walk through setting up a new model for our stores and how we can query them in our app to list out all of our locations.

List Store Locations on a Page Using a Store GraphCMS Schema and Data

We are going to create a schema as we did in lesson 2, but this one is going to be for our Categories at the bottom of the home page. This will be slightly different because we are going to add a Reference field. This way we can create a reference between our categories and our products. 

Then over in the content tab, we will add our existing products to an Apparel category, an Accessory category, and a Featured category. 

Create a Product Category Graphcms Schema to Manage Product Groupings

We want to set up a schema for the most important part of our store, our products. We set up all the fields that we'll need, including the name, the image, and the price.

We also set up the description, which we'll use later when we're setting up individual product pages. Then we will see how we can easily construct and query for our data inside of GraphCMS and append that products query to the end of our existing query.

There, we will pass along that data, just like our existing home page data to our app, where we dynamically render our first four products inside of GraphCMS.

Manage Product Details with a Custom GraphCMS Schema Model

To manage my product data, I'm going to use [graphCMS](https://graphcms.com/) which is a content management system that's going to give us a content API backed by GraphQL. You'll need to login, or register an account, with just the free version for this course. I will also run you through the initial setup for graphCMS. 

Use GraphCMS Schema Models to Manage Page Content

Set up GraphCMS to Manage Data with a GraphQL API

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

In this video you'll learn how to use Amplify hosting to deploy a Nuxt site from a Git repository. We'll begin by walking through the steps of creating the deployment and configuring the correct build settings to enable a static build. Once the site is deployed, we'll view the live site hosted on AWS.

Deploying a Nuxt Site to AWS from a Git repository with Amplify hosting

In this video you'll learn how to deploy a static Nuxt site to AWS's global edge CDN in less than two minutes. We'll start from scratch, creating a new Nuxt site using npx and walk through the build configuration to set up the deployment target for Jamstack / static site hosting. From there, we'll initialize a new Amplify project using the Amplify CLI and walk through the settings to configure the proper build command for Amplify hosting. Finally, we'll deploy and view the live site. Once we're finished, we'll delete the project and the hosting service.

Deploying a Nuxt Site to AWS with the Amplify CLI

URLs often reflect some bit of data that the page should load. This lesson walks you through adding a custom URL Param to the router then forwarding that Param to load data onto the page.

Load Data from URL Params in Vue.js and Nuxt.js

As you create more and more routes, the paths become difficult to manage and concatenate the parts together as just a giant string. Using named routes allows you to reference the route by a simple string then pass in the params as an object. This lesson covers configuring named routes in Nuxt.js in the `nuxt.config.js` and the passing the named route to a `router-link`.

Configure Named Routes in Vue.js and Nuxt.js

Sometimes the `pages/` directory structure doesn't meet your needs, so you'll need to customize your routes manually. Using the nuxt config and "hidden pages" you can map routes to view components without getting in the way of the default pages routing.

Add Custom Routes for Hidden Pages with Vue.js and Nuxt.js

Nuxt.js allows you to return a `Promise` from your `data` function so that you can asynchronously resolve data before displaying the page. This allows the server to fetch the data and render the page once it's ready.

Preload Data using Promises with Vue.js and Nuxt.js

Nuxt.js enables you to easily create layout and navigation by replacing the default App.vue template with your own `app.vue` layout in a `layouts` directory. Then you simply surround your content (the `<nuxt>` instance) with your navigation and/or layout and you're ready to go.

Create Vue.js Layout and Navigation with Nuxt.js

The vue-cli allows you to easily start up Vue projects from the command line while Nuxt.js enables a page-based routing system that follows your file structure. Combine these two projects and you'll have a Vue app created from scratch deployed in a matter of minutes.

Build Vue.js Apps with the Vue-CLI and Nuxt.js

Cycle.js is a framework where your app is described as a simple function taking an event stream as input and outputting an event stream.

cycle

This lesson shows what can be learned next as a continuation of this course, and gives a recap on the core concepts: main for pure logic, drivers for side effects, run() to connect main and drivers, sources for read effects, sinks for write effects, and nesting Cycle.js apps to work as components.

Overview of Cycle.js

Cycle.js is a framework where your app is described as a simple function taking an event stream as input and outputting an event stream. 

Cycle.js builds on functional and reactive streams and is a JavaScript framework. What does that mean? In the course, André Staltz, the creator of Cycle.js, will explain it to us.

We'll start this course with an empty project and build out our own toy version of Cycle.js to understand exactly what's going on under the hood. When we have a solid base of how Cycle.js works we will move on to use the Cycle.js API and build an app using the Model-View-Intent pattern.

Cycle.js Fundamentals

Our app is not yet a BMI calculator, because it only has two sliders, but doesn't show the calculated BMI number. In this lesson we will learn how to export any stream from a child component and use it in the parent component, in order to display the BMI calculation on the DOM.

Export Values from Components through Sinks in Cycle.js

We added classNames to pre-processing and post-processing steps when calling the LabeledSlider, in order to instances independent of each other. It would be better if we could hide these steps away. This lesson introduces the isolate() helper function to achieve that.

Isolate Component Instances in Cycle.js

Once we have a labeled slider component inside the main function, we should be able to create another labeled slider. This lesson teaches how to accomplish that, and make sure those two instances work independently of each other.

Use Multiple Independent Instances of a Cycle.js Component

We have made a Cycle.js app for generic labeled slider which can be configured through props, but how can we reuse it in other Cycle.js apps? This lesson shows how we can embed any Cycle program inside a larger Cycle program in a very simple manner.

Use a Cycle.js Component in the main() Function

I've been using Cursor as my primary editor for over a year now, but recently I've heard wonderful things about Windsurf AI Agent features. I decided to record myself building out something I've always wanted to make, but never made the time for.

In this lesson, I demonstrate how to leverage Windsurf's powerful agent process to create a fun word-guessing game inspired by Heads Up. Watch as I build an interactive application featuring category selection and word navigation, complete with data hosting on GitHub Gists and deployment to GitHub Pages - all in under 30 minutes (before editing the lesson down to 12 minutes)!

What makes this project particularly exciting is how Windsurf eliminates the typical friction points of development. While this game was always on my project wishlist, the overhead of setup, configuration, and deployment made it hard to justify the time investment. Windsurf's agent process handles all these pain points seamlessly, from managing URLs to orchestrating deployment.

This lesson perfectly showcases how AI agents can help developers bring their backlog of project ideas to life, transforming what would typically be time-consuming tasks into efficient, enjoyable development experiences.

Build a Word Game with Windsurf's Cascade AI Agent



Discover how to harness the power of Cursor IDE's Composer Agent feature to optimize your code. In this lesson, you'll witness an AI agent doing all the work to generate test suites, implement performance benchmarks, and create optimized function variations - all without writing a single line of code. You'll learn how to validate performance improvements through data-driven benchmarking, ensuring that optimizations are backed by concrete metrics rather than speculation. This hands-on demonstration showcases a groundbreaking approach to automated function development that combines the precision of test-driven development with the efficiency of AI-powered optimization.


Agent-Driven Development in Cursor: Testing, Benchmarking, and Optimizing Functions

This course is aimed for using `zod` effectively in projects based on TypeScript (both browser and node.js). The benefits you gain with this course is not just simply coding, but also understanding when/why/how should you perform runtime validation.

`zod` is the missing piece to TypeScript's capabilities, which can guarantee type-safety only in compile-time.

`zod` can be used whenever the compiler cannot guarantee what happens in runtime. And... it's a very frequent usecase, such as HTTP calls, websockets, etc.

In this course you get quickly up and running by:
1. using `zod` with primitives and objects
2. adapting `zod` quickly to existing projects thanks to automatic generators
3. changing the strategy frm type-first to schema-first
4. using error-throwing `parse` or non-error-throwing `safeParse` basing on your needs
5. applying `zod` to the most common usecase - validating API responses
6. handling errors the most convenient way (out of many!)

Take advantage of runtime validation with `zod`. Take advantage of the detailed lessons in this course 🔥

Effective Runtime Type Checks with Zod


Cursor can now automatically run commands in the terminal and walk step-by-step towards building out your entire project. You give it a goal, then it will suggest the commands you need to run and the files that you need to create and you can work with it to achieve what you're building. This lesson does a quick walkthough of using a Cursor Agent to build a project from scratch and guide it along the way. Cursor Agents definitely feel like a sneak peek at the future of programming!

Cursor Agents Initial Impressions - Allow an AI to Build Your Entire Project

Mock Service Worker is an API mocking library that allows you to write client-agnostic mocks and reuse them across any frameworks, tools, and environments.



Mocking WebSocket APIs with Mock Service Worker


While using anonymous functions might seem convenient, they can create difficulties when trying to identify performance bottlenecks during profiling. This lesson will demonstrate how named functions make it easier to pinpoint and address performance issues, ultimately leading to more efficient and debuggable code. Learning this practice will greatly improve your ability to locate and fix performance issues in complex projects.

Always Name Functions in JavaScript


When attempting to load the same module twice in JavaScript you'll hit a cache and code won't re-run. In scenarios where you actually do want to have state in your modules, you'll have to use a cache-busting technique by passing a query parameter to a dynamic import. This lesson walks through how to add a query parameter, how to add the appropriate types for loading dynamic modules in TypeScript, and when these techniques are valuable.

Import the Same JavaScript Module Multiple Times with Cache Busting



The include keyword in GitHub Actions empowers you to add custom variables to your matrix strategy, providing flexibility beyond standard configurations. In this video, we'll explore how include allows you to define specific combinations of variables, enhancing control over your workflow runs. You'll see how this feature enables you to tailor jobs for unique environments or scenarios not covered by the default matrix options. By leveraging include, you can efficiently manage complex build processes with greater precision. This technique helps you streamline your CI/CD pipeline, making it more adaptable to your project's evolving needs.

Use GitHub Actions Matrix Include for Complex Job Configurations

While running `zod` schema validation agains domain-rich objects, the error message saying that _a string is not a number_ might not be really useful.

Especially, when you need to provide a meaningful feeback to the user, e.g. after they have submitted a form with lots of data.

`zod` allows to customize messages on a very granular level. We can also extract repeatable customization to `zod` error maps.

Finally, in order to process an error message further (e.g. display it to the user), we need to handle the `zod` validation errors effectively. Especially, when a big object validation has failed and we could receive a handful of errors.

That's what we learn in this lesson. 🔥

Customize zod Error Messages and Handle zod Errors Effectively

customize zod validation messages, customize zod schema property messages, reuse error maps across different schemas, navigate through zod error objects

You might want to run `zod` schema checks in different styles.

Sometimes you prefer to conditionally throw the error - that's what `parse` does. But another time you'd prefer to receive a `boolean` property that determines whether the validation was successful or not - and perform further actions accordingly.

Additionally, the error-throwing API of `parse` works extremely well with [TypeScript assertion functions](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#assertion-functions). Their combination is just... perfect! 👌

That's what we learn in this lesson.

Use parse and safeParse Runtime Type-checks with zod

use zod parse function to conditionally throw ZodError, use zod safeParse to get a boolean value and run typescript type guard over success property

Search

Search Results