Learn Alpine, Bash and Stripe

Next.js is a minimalistic framework for server-rendered React applications.

You will implement stripe checkout in your application so that customers can buy products.

To do this, you will first create a Next.js API route that starts a stripe session and passes in products that are in the cart. This will forward users to the Stripe checkout page where they can input their credit card information.

Upon success or cancel, stripe will forward the user back to urls that you set.

Accept Payments through Stripe Checkout using Next.js API Routes

snipcart

While we have a lot of options for the different payment gateways that we can use in order to take payments, we're going to use [Stripe](https://stripe.com/), which is a well-known secure payment processing platform, where it's going to be able to easily integrate into our Snipcart account.

Once we add our Stripe account, we will head over to the Snipcart dashboard where we will connect Stripe as our payment gateway, which simply allows us to go through an authentication process, where we will have Stripe configured.


Use Stripe as a Payment Gateway in Snipcart

Supabase is an open source Firebase alternative. A service to:

- Listen to database changes.
- Query your tables, including filtering, pagination, and deeply nested relationships (like GraphQL).
- Create, update, and delete rows.
- Manage your users and their permissions.
- Interact with your database using a simple UI.

Supabase is not a 1-to-1 mapping of Firebase. Most notably, Supabase uses Postgres rather than a NoSQL store. 

supabase

Every transaction in Stripe is associated with a customer. Since we want our user to be able to see their transaction history in Stripe, we need to keep a track of their customer ID in our `profile` table.

In this video, we create a new Stripe account and configure our Next.js application to use its publishable and secret API keys. Additionally, we discuss by adding `NEXT_PUBLIC_` to our environment variable names, it exposes them to the client - running in the user's browser. This is entirely safe for our publishable key - which can be public - but not our secret key - which should always be kept private.

To create a Stripe customer, we need to use our private API key, meaninh this logic will need to be executed on the server. Next.js makes this simple with API routes - special serverless functions that will be created for any `.js` files in the `pages/api` directory.

We create a new API route to handle adding a stripe customer and updating the user's profile with their customer ID. 

Create a Stripe Customer with Next.js API Routes

Each of our subscription options will be a product in Stripe. In this video, we create a `/pricing` page to display our new products. We use the Stripe package to fetch these options at build time and add some simple styling to make it look nice!

Annoyingly, the `prices` list is what we need to request for pricing information, but does not contain product information - such as `name`. This means we need to make an additional request for the product information for each price. Good thing we are only doing this once at build time, as the request time could add up pretty quickly, if we needed to do this on every request!

Lastly, we sort the list of plans from Stripe, to ensure that the prices go up in ascending order. Since each plan has a price, we can use a simple native JS sorting technique.

Use Stripe.js to Query Product Data and Pre-Render with Next.js

Stripe makes taking payments easy. We can use the Stripe library to create a checkout session. This takes a configuration object, which describes how we want to charge our customer, the method we would like to use, and where we want to redirect the user based on a successful transaction or cancellation.

In this video, we create a new API route to initiate a Stripe session to charge for a particular subscription option. This API route returns the session's ID, which we can use to redirect the client. In order to do this, we install the `stripe-js` library - which is used client-side to interact with Stripe - and initialize it using our `publishable` key.

Lastly, we can use the test credit card for Stripe to confirm everything is working in test mode.

Charge Customer for Stripe Subscription in Next.js

Webhooks allow us to subscribe to particular events, and have Stripe let us know when they occur. From the Stripe dashboard we can specify an endpoint to call, and which events we care about. For subscriptions, we want to know when a new subscription occurs, is updated, or deleted.

In this video, we create a new API route to handle webhook events from Stripe. We can call the `stripe.webhooks.constructEvent` function which returns the event object. It also takes the `req`, `signature` and `signingSecret` to verify the request is valid and came from Stripe.

The `signature` can be extracted from the request's headers, and the signing secret is available in the Stripe dashboard, however, the Next.js `req` object is a different structure to what `constructEvent` is expecting. Therefore, we need to install the `micro` package and use its `buffer` function to get the `reqBuffer`. We also need to export a config object from our page component, setting `bodyParser` to `false`.

Subscribe to Stripe Webhooks Using Next.js API Routes

We can use Stripe's Customer Portal to allow our users to manage their subscription and payment information. We will configure the Customer Portal in the Stripe Dashboard and create the required pages for `/terms` and `/privacy`.

Additionally, we create an API route to initiate our customer portal session. Similarly to our API route that charges for a subscription, we need to get the token from the cookie, add it to the Supabase session and fetch the associated `profile` data. 

Since the `updated` event gets triggered for creating a new subscription, as well as updating an existing one, and we want to perform the same changes in our Supabase DB, we can replace our case statement to handle `customer.subscription.updated`.

Lastly, we implement a case for `deleted`, setting `is_subscribed` to `false` and `interval` to `null`. Since this event doesn't actually trigger until the end of the customer's billing cycle, we can manually cancel the user's subscription from the Stripe dashboard.

Allow Customer to Manage Their Subscription with Stripe Customer Portal

There are a few steps to go through to push our application and all of our services to production!

1. In order to "activate" our Stripe account, we need to fill out some details about our business. 

2. Update everywhere `[http://localhost:3000](http://localhost:3000)` is referenced in our application to use the `CLIENT_URL` environment variable, which can be set to localhost in `.env.local`.

3. Create a GitHub repo, and commit and push all of our changes.

4. Create a Vercel account, import project from GitHub, configure all environment variables and deploy!

5. Use our Vercel domain to configure our Customer Portal and Webhooks in Stripe.

6. Update `STRIPE_SIGNING_SECRET` environment variable in Vercel and manually redeploy.

7. Update our Site URL in Supabase and remove our test `user` and `profile` records.

8. Create a function hook in Supabase to use our Vercel domain

We now have a SaaS application deployed to the Internet that we can start making that side hustle money from!! 🎉

Configure Stripe for Production and Deploy Next.js Application with Vercel

Docker containers wrap a piece of software in a complete filesystem that contains everything needed to run: code, runtime, system tools, system libraries – anything that can be installed on a server. This guarantees that the software will always run the same, regardless of its environment.

docker

This lesson uses some advanced concepts and some bash scripting to build a better Dockerfile. By using the concepts showed here, you will be able to build more future-proof and production-ready containers. If you prefer to focus on the content about containers, feel free to ignore this lesson and come back to it later on if needed.

Currently, we use `sed` to overwrite the hard-coded path to the API. This works well when there is a single value to replace. Now if one of your team members replaced the value of localhost:3000, your build will break.

We'll use `jq` to fix this issue. Jq is a command-line tool that makes it easy to change values in a JSON file. The base image that we used for building the application does not contain this tool, but that is not an issue. To install `jq`, you will need to download the [binary](https://github.com/stedolan/jq/releases/download/jq-${JQ_VERSION}/jq-linux64.), we'll need that to execute `jq` commands in our Dockerfile. This will allow us to update specific properties i

Modify a JSON Configuration File with jq

### Accept payments & sell products powered by Stripe and the best of the JAMStack

There are as many ways to build an e-commerce store on the internet as there are products to sell. One thing is for certain, e-commerce is here to stay and as professional developers we need to understand how to build fully custom stores for our clients using the best modern tools available.

- React: flexible and customizable while following modern best practices
- Next.js: lightening fast with guide rails to help your project perform as consumers expect
- Stripe Checkout: lets you offload reams of complicated business logic to a trusted third party that maintains regulatory compliance, global payments, and a standard UX.

Your store will have well managed local component state using React Hooks and you'll also have clear and cohesive shared (global) state with React Context.

Finally you'll deploy your custom store to Vercel (the platform behind Next.js) as well as how to make your Next.js e-commerce store portable to deploy to other platforms.

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Create an eCommerce Store with Next.js and Stripe Checkout

Payments infrastructure for the internet.

stripe

Now that we have an app and our products configure in Stripe, it's time to connect the two and give people a way to purchase our products.

Using Stripe's API, we can initiate a new instance of the Stripe Checkout flow with a simple click of a button.

We'll create an `initiateCheckout` function that handles this flow for us. After loading stripe through `@stripe/stripe-js` we'll `await` a `stripePromise` that will allow us to redirect to stripes checkout flow. You'll notice that we will need to pass in line items with the price id and quantity.

Integrate Stripe Checkout to Purchase Products in Next.js with Stripe @stripe/stripe-js Cl

With Stripe or many other services, their APIs rely on special keys that authenticate requests or allow that service to track usage for things like billing.

Some of these keys are able to be used publicly and some must be kept private, but ultimately we want to have a way to easily manage these keys and not hard-code them into our application, which is where environment variables come in.

We will find our Stripe public key that will be used locally as well as in production on Vercel. You'll learn how to set an environment variable in Next.js (hint, you need to prepend `NEXT_PUBLIC` to the variable name make it available in the client) as well as in production on Vercel.

Add a Stripe API Key as an Environment Variable in Next.js & Vercel

Stripe has a variety of solutions that makes it super powerful as a payment provider. We're taking advantage of their Stripe Checkout product because it allows us to get started with an online store without having to manually accept payments.

To do this though, Stripe Checkout relies on the browser to make API requests, which we have to configure to work for our website.

We will set our eCommerce site domain on Stripe's CLIENT-ONLY integration to set us up to add the checkout workflow for our site.

Configure a Stripe Checkout Domain for Client-Only Integration

Extracting meaningful data from strings is a crucial skill when working with bash, and bash gives us powerful tools to do so: `head`, `tail`, `cut`, `sed`, and `awk`. But these tools can be hard to understand without spending time to learn them, so many developers fall into a rut of blindly copying and pasting commands. No more! With this mini-course, you'll understand the basic ins and outs of these commands in under 15 minutes. 


Bash is a Unix shell and command language written by Brian Fox for the GNU Project as a free software replacement for the Bourne shell. Bash is a command processor that typically runs in a text window, where the user types commands that cause actions. Bash can also read and execute commands from a file, called a shell script.

bash

Manipulating strings in bash

In this lesson, we'll use the power of awk to select the columns and rows of data that match our condition. We'll pass a `,` (comma) to the `-F` flag (the F stands for field separator), to tell awk to split on commas. From there, the world is our oyster and we can tell awk to only return rows that match whatever parameters we pass.

Extract Columns of Data from a CSV with awk

`awk` is a specialized tool and programming language for querying and transforming text.   In this lesson, we’ll scratch the surface of the possibilities it provides by leveraging it in one of its most common use cases: extracting data from columns of text. Awk makes it easy to select and print just the columns and rows that we want from commands, like `ps`, that return a table of data.

Extract Data From Columns of Text with awk in Bash

Pandoc is a command-line tool built in Haskell that can convert almost any markup or word processing format interchangeably. You specify the input and the output types and pandoc will do the rest.

In this lesson we will convert a few markdown files to pdf. You will see how to convert a single file and then we'll write a script to loop through a couple files and convert them dynamically.

This lesson requires that you install `pandoc` and have `pdflatex` available.

You can install `pandoc` with brew: `brew install pandoc`
To access `pdflatex`, you can install `basictex` and set the path for `--pdf-engine` to `pdflatex`

Convert a File from Markdown to PDF with pandoc

🚀 In this collection, I will be going over some command line tools I use on a daily basis that make my life a lot easier.

[First up is fzf](https://github.com/junegunn/fzf).

> fzf is a general-purpose command-line fuzzy finder.

Upgrade Your Terminal and Make It a Joy to Work with

`fzf` is a fast cli finder tool. The `fzf` command will launch an interactive find session. You can type a path to a file and see a list of possible results.

Piping the output of commands (such as git branch) to `fzf` makes it easy to find the line you are looking for.

Interactively Find Anything By Piping it to fzf in the terminal

Many people just drop all of their Zsh functions inside of their .zshrc and forget about it. But as your collection of functions begins to grow, you start looking for a better way to organize everything. Since Zsh provides `autoload` for loading in functions dynamically, we can drop all of our functions into individual files, loop through that directory, then autoload each file as a function.

Store Zsh Functions in Individual Files Inside a Directory

SSH provides a secure way for your to [connect to and authenticate with GitHub's servers](https://help.github.com/en/github/authenticating-to-github/about-ssh). While HTTPS connections use usernames and passwords as credentials, SSH instead uses public and private key pairs. These can be generated on your system using a CLI like [`ssh-keygen`](https://help.github.com/en/github/authenticating-to-github/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent) and then associated with your GitHub account using the public key.

In some cases, you may need to connect to more than one GitHub account from the same system. For example, you may have [separate accounts for personal and professional projects](https://ryanharris.dev/managing-ssh-keys-for-github/), which can be difficult to manage manually. Using `ssh-agent` and a SSH configuration file, you can alleviate this pain point by automatically determining which key to use based on your GitHub repository's `git` URL.

Secure GitHub connections with SSH

AI is amazing for generating code, but often leaves us staring at functions and libraries we've never seen before. This creates a huge problem: When things break (and they will break), we're lost. We don't understand the individual pieces, let alone how they interact. Knowing one part isn't enough; we need to see how unfamiliar components work together.

The solution? Real-world examples.

This lesson introduces ghx, a tool I built to do exactly that. ghx searches GitHub, finding actual code examples that use the specific combinations of functions and libraries that are tripping you up. Instead of generic documentation, you get concrete implementations. You can find the ghx repository at https://github.com/johnlindquist/ghx.

Here's the workflow we cover:

Identify the Unknown: Pinpoint the AI-generated code you don't understand – specific functions, libraries, or their interactions.

Search with ghx: Use ghx to search GitHub for examples using those terms together. ghx finds repos where those elements co-exist.

Consolidate Examples: ghx combines the relevant code snippets from those examples into a single, digestible file.

Ask the AI (Again, but Better!): Feed this consolidated code to an AI (like a coding-focused model in an AI studio). Now, instead of asking general questions, you can ask targeted questions based on real-world usage:

"Explain how these functions are used together in these examples."

"What are some common use cases for this combination of libraries?"

"Show me alternative code snippets that achieve the same result."

"Can you identify potential problems or areas for improvement, based on these examples?"

Iterate. Use your improved understanding to make changes, and then repeat the process to debug.

By leveraging ghx and targeted AI prompting, we transform from being lost in a sea of unfamiliar code to actively learning from how others have solved similar problems. We gain a deeper understanding of our AI-generated codebase, making debugging, modification, and future development far more manageable. This gives you the tools to understand, debug and improve your own code.

John Lindquist

How to Work with AI-Generated Code You Don't Understand

In this less we create a custom Zod schema using `z.custom`.

The example case covers room numbers validation: it must start with an uppercase letter followed by three digits. `z.custom` allows the creation of a brand new custom schema with a callback function that returns a boolean indicating validity.

We highlight a challenge with type inference in Zod's custom schemas: callback parameter types don't get aligned automatically - type-safety must be explicitly defined using type parameters.

We run tests against various room numbers and demonstrate how to effectively validate inputs and manage error messages.


Tomasz Ducin

Create Custom Zod Schemas and Validate project-specific data

Create custom validation logic in Zod using z.custom, for primitive values, ensuring type safety and proper error messages for room numbers.


Excessive properties refer to any additional attributes that are not explicitly listed in an object schema. When creating an object based on a schema, it is important to ensure that only the defined properties are included.

In TypeScript, if an object is created with an extra property that isn't defined in the schema, TypeScript will not raise an error unless the type is explicitly annotated. When the type is annotated, TypeScript will issue an error indicating that the extra property is not allowed.

Zod provides a strict utility to enforce similar checks. This feature ensures that only specified properties are allowed in an object schema. When unnecessary properties are added at both the top level and within nested schemas, Zod will throw errors indicating unrecognized keys.

Adding an unrecognized property to a Zod schema results in an error message that specifies which keys are not recognized. Applying strict checks on nested schemas ensures that all levels of the data structure are validated correctly.


Make Excessive Object Properties Fail on Zod Validation

Prevent excessive properties in TypeScript and Zod schemas using strict checks for better data validation

In this lesson we discuss how Zod works with TypeScript to handle special types like `undefined`, `null`, `any`, `unknown`, `never` and `void`.

We modify our room booking schema to demonstrate the use of `optional` and `nullable` Zod utilities.

By using `.optional`, we allow a property to be either its _original type_ or `undefined`. With `.nullable`, we allow it to be either its _original type_ or `null`. Finally, `.nullish` allows a value to be either its _original type_, `null`, or `undefined`.

For all cases, we run tests to show how these schemas work in practice, as well as how TypeScript infers types.


Declare Lack of Value in zod (optional, nullable and nullish)

use Zod for TypeScript schemas, including handling undefined, null, and special types like optional and nullable values, as well as any, unknown never and void

In this lesson we make use of partial validation of large and nested schemas in Zod.

Instead of creating many small schemas, which can complicate maintenance, Zod allows for the extraction of specific parts of a schema using the concept of ".shape". It "unwraps" the object schema, enabling access to sub-schemas within specific properties.

Additionally, we can use the `.unwrap` to get into element schemas of altered schemas such as `.optional` or `.array`.

Simplify working with complex schemas without the need to break them into hundreds of small schemas.

Use Zod Schemas partially using shape and unwrap

Manage large and nested Zod Schemas by extracting partial validations using shape and unwrap utilities

In this lesson we cover implementing sets and maps in Zod.

Using `z.set`, a schema for string-based amenities is created. We demonstrate how validation works by intentionally introducing errors and customizing error messages for better clarity.

Next, a map is created for existing guestDetails schema using `z.map`, with string keys and an existing `z.object`-based schema. The validation process is shown again by deliberately breaking the schema, such as omitting the age property, which triggers appropriate error messages.


Validate maps and sets using Zod schemas

Use sets and maps in Zod for schema validation, ensuring type safety for both keys and values.

In this lesson we'll use a few predefined schemas which will serve as constituents to create union and intersection schemas.

Three room booking schemas are defined: _single_, _double_, and _suite_. Each schema has slight differences in the structure.

The `z.union` utility is used to create a union of these schemas, allowing for validation against any of them. Type inference (using `z.infer`) for the room booking schema produces a union of object literals, exactly like in TypeScript.

We also create an intersection using `z.intersection`, combining room booking details with discount information.

These techniques enhance data validation and allow to make `zod` aligned even more with `TypeScript`.


Define Unions and Intersections with Zod

implement unions and intersections in Zod schemas for example domain related objects, enhancing TypeScript validation with clear examples

This lesson demonstrates how to provide runtime type-safety for arrays in TypeScript applications.

First we need to understand the challenges behind ensuring array type-safety in TypeScript. We explain how TypeScript infers arrays with an undefined length, making it difficult to guarantee that array accesses are safe.

Zod schemas provide the `z.array` to define arrays of various element types. 

We compare how utilities such as `.min`, `.max` and `.nonempty` get reflected in inferred TypeScript types, and how zod processes the validation.


Declare Precise Array Types within Zod Schemas

Provide array type safety in TypeScript using Zod schemas, including handling non-empty arrays for better validation

In this lesson we make string-based schemas more specific using Zod in TypeScript. We focus on defining allowed values for a room type, showing how to use literals and enums effectively.

Zod's `z.literal` method allows us to specify a single allowed value for a string schema. For example, if we want to define a room type as `"premium"` and make it backward-type-safe in TypeScript, we can use `z.literal("premium")` to ensure that only this value is valid.

`z.enum` lets us define a set of allowed string values. This is useful when we have multiple options for room types, like `"standard",` `"premium"` or `"childrenFriendly"`. 

`z.enum` creates a union of TypeScript-compatible string literals, making it easy to validate against multiple values. Zod enums can be used to extract or exclude specific values from the enum.

Finally, zod's `z.nativeEnum` a native enum creates an equivalent of TypeScript's native `enum` ("real enums", we could say).

We can validate against all these values just like we do with literals and enums.


Work with Zod Literals and Enums Effectively

Use Zod for string schemas in TypeScript, including literals, enums, and native enums for room type validation

In this lesson, we dive into the Zod's `refine` utility, allowing defining more complex schema validation **on top of existing schemas and utilities**.

Sometimes, we need special validation rules for our applications to work correctly. The `refine` utility lets developers create their own validation rules. This method's uses a callback to check if the input is valid. We also create meaningful messages when something doesn’t meet the validation rules.

We use a practical example involving a room booking schemawith `dueDate` and `price` property refinement.


Apply Schema Custom Refinement with Zod

Enhance your TypeScript validation skills with Zod's refine utility for custom room booking schemas, focusing on date and price validation.


Search

Search Results