 Courses from Ben Patton

Learn how to use Infrastructure as Code with [Architect](https://arc.codes/docs/en/get-started/quickstart) to deploy a lambda to your own AWS account in minutes. 

If you haven't setup an AWS Account or the AWS CLI create an account at https://aws.amazon.com and follow [this guide](https://blog.rishabkumar.com/aws-cli-cheat-sheet) for setting up the CLI

Use Infrastructure as Code with Architect to Deploy to AWS

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

In common workflows we do not want to push directly to the remote database from our machine. We will setup a github action that will run whenever we push to our main branch of our github repo. 



Deploy Local Database Changes to Supabase Remote Through Github Actions

It is common, when working on a team, for changes to have been applied to a remote database and for your local instance to be out of sync.

By running `npx supabase db pull` we can pull any changes to our remote database schema to keep our local database in sync.

Pull Remote Database Changes with Supabase

When `npx supabase init`, `npx supabase start`, or `npx supabase db reset` is run, supabase will look for our `seed.sql` file and seed our local database.

Since we have already created the project and we want to add seed data, we can run `npx supabase db reset`. 

Add Seed Data to Local Database with Supabase

With Supabase Link we can link our local project to a remote database. Then we can use the command `npx supabase db diff -f <fileName>` to create a local migration file. 

Then we use `npx supabase db push` to apply our local changes to the remote database.

Link Local Database to Remote and Run a Migration with Supabase

With the project setup, we can now start our local instance of supabase. This gives us a local running version of the supabase studio that we can interact with. 

We will create a table in called todos in the studio

Start Supabase Locally and Create a Table

With our project setup we will use our supabase dev dependency to run the supabase cli. We will login to our supabase account and then init the project locally. 

To run supabase locally you need to have Docker installed and running on your computer. To install Docker and get it setup visit this link - https://docs.docker.com/desktop/

Use Supabase CLI to Login and Init Project

Create an application and install packages 

Generate a New NextJS with Supabase App

Create a Supabase account and database quickly by going to https://database.new

Create a Supabase Account and Database

Get started with Supabase on your machine

Getting Started with Supabase Local Dev

Bite-size video tutorials for badass web developers.

egghead

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

Refactor Create Deposit Api Route into a Next.js Server Action

As we have been doing, refactor the deposit api route handler that handles deleting a deposit into a server action.

This video has been sped up. If you want to see the code checkout to the 'solution' branch with `git checkout solution` and look in the 'final' folder in src/app/actions for the delete deposit action.

Refactor Next.js API Route for Deleting a Deposit Into a Server Action

With our customer POST handler now moved to a server action your goal is to do the same thing with the invoice POST handler

Refactor Invoice POST Handler to Next.js Server Action

Now that we have done this a few times the encouragement here is for you to find the component that is doing client side data fetching for user info and refactor the api route and client fetching to be a server component

If you would prefer to look at the code checkout to the 'solution' branch and look in the final folder and you will find the refactored component.

Refactor Next.js User Info Api Route into React Server Components

Now that we have built an intuition for refactoring our api routes and components to server components by refactoring the customer api handlers we can do the same thing for the invoices handlers that fetch data

Refactor React Invoice Client Components in Next.js

Your goal is to move the remaining api routes to the app router. If you would like a longer form video, [here is a link](https://youtu.be/27S6qoKJ7uc) to a youtube video with timestamps 

CHALLENGE: Migrate Remaining Pages Api Routes

UploadThing makes it easy to migrate to the App router with a step by step guide. We'll move our upload functionality to the App router and finally delete our pages directory.

Migrate UploadThing Route Handler to Next.js App Router 

Now that we have moved over the bulk of our routes to the app router we can move the remaining routes to the pages routes app router. 

Migrate Remaining Next.js Pages to App Router

Having moved over all the customer routes, you have everything you need to see how to move over the remaining sales routes from the pages router to the app router

This lesson exists purely as a resource if you want to see the walkthrough

If you would prefer to look at the code you can checkout out the 'solution' branch and look at the final version with `git checkout solution`

Migrate Invoice Routes to Next.js App Router

Get up to speed with dynamic/parameter based routing in the new app router by adding a very basic Link and a dynamic route that the Link will navigate us to

Primer on Dynamic Routing in the Next.js App Router

In this lesson, you'll learn how to enhance the accuracy of components generated by Cursor Composer by aligning your project's package.json with Cursor's rules. We'll guide you through extracting the list of installed packages from your package.json and incorporating them into your .cursorrules file, along with brief descriptions of their functionalities. By providing Cursor with this contextual information, you'll enable it to generate components that are more precise and functional on the first attempt. The lesson includes demonstrations of component generation both with and without these enhancements, highlighting the improvements in accuracy and efficiency.

Boost Cursor Composer Accuracy: Integrating package.json with Cursor Rules

Speed up your bug-fixing process dramatically with Cursors Composer. Take a warning from your logs, search for relevant terms, then seamlessly import both the warning and search results into Composer. Add documentation and apply fixes to all search results in one go. This streamlined workflow resolves multiple issues rapidly, saving valuable development time.

Batch Fix Every File in Search Results with Cursor's Composer

 We map over the initial set of results then use `Promise.all` to efficiently fetch the details of each pokemon rendered in the table. This allows us to add more columns to our pokemon table.

Fetch and display row details with Promise.all in Tanstack Table

map over the initial set of results then use `Promise.all` to efficiently fetch the details of each pokemon rendered in the tanstack table

Create a custom hook to fetch remote data by passing a promise to the React 19 `use` hook. Then render this data in Tanstack Table by memoizing the results and passing them to `useReactTable`.

Render remote data in a Tanstack Table with React 19's use hook and a promise

Create a custom hook using React 19’s use to fetch data with a promise. Render it in a Tanstack Table by memoizing and using useReactTable.

You know when you're deep in the code trenches and need someone to challenge your assumptions? That's exactly what this is about.

Instead of waiting for someone to poke holes in your master plan, you can paste that strategy straight into AI Studio and let it pressure test your ideas. We're talking about using this tool to validate everything from your feature proposals to your ambitious refactoring strategies.

The real magic happens when you hit that microphone button. Now you're in a real-time verbal sparring match. It's like rubber duck debugging but the duck actually pushes back and makes you defend every architectural decision you've made.

Here's the workflow:
1. Drop your master plan into the system instructions
2. Tell the AI to challenge every assumption
3. Hit that mic and defend your choices like you mean it
4. Watch your plan either emerge stronger or get rightfully dismantled

This approach is perfect when you're:
- Stuck in your own head with a complex problem
- Need to validate if your approach holds water
- Want to catch edge cases before they catch you
- Looking for opportunities you might have missed because you're too close to the code

It's like having a senior dev on call 24/7, ready to challenge your ideas and push you to think deeper about your solutions.

Now go forth and get your ideas challenged. Your projects will thank you for it.


An Uncomfortable and Challenging Conversation with AI Studio

In this lesson, you'll learn how to effectively brainstorm your project ideas before working with AI agents. We'll cover:

1. The importance of having a clear plan before starting work with AI agents
2. Using traditional brainstorming techniques to gather your thoughts
3. Leveraging video recording to capture your brainstorming session
4. How to review and analyze websites for inspiration
5. Documenting likes, dislikes, and potential features for your project
6. Using AI tools (like AI Studio) to organize and process your recorded brainstorming session

The lesson emphasizes a modern approach to brainstorming that combines traditional techniques with video recording, making it easier to later process your ideas through AI tools. This method helps ensure that no ideas are lost and that your thoughts can be effectively organized by AI for future reference.

How to Brainstorm Your Project Features to Prepare for AI Agents

fast-check allows us to create composite generators that suit our testing needs. We'll generate two numbers to create a point simulating an X and Y and assert that the distance should always be greater than or equal to 0.

Generate composite objects with fast-check fc.record

Just using fast-check by itself can make you tests verbose and tough to read. Lucky for us there are many integrations with fast-check such as the `@fast-check/jest` package that will help remove some boilerplate from our test.

Tidy up your test with @fast-check/jest

Many people share .cursorrules files, but trying to craft your own from scratch is a huge pain. Instead, this lesson shows you how to grab ALL community-created .cursorrules files to build a custom rule set for your projects. We'll use Gitingest and Google AI Studio to gather these examples and generate an awesome starting point customized to your specific project.

Generate Custom .cursorrules for Your Project Based on Community Examples

The GitHub CLI allows you to search issues and filter on different criteria like amount of comments. This allows you to search for real-world situations and pains/solutions people have using different technology. 

With the GitHub CLI in hand we'll drop 100s of issues as context in Googles AI Studio and have Gemini determine the 10 most frequently asked questions. This will give us a sense of how people use a library and where people get hung up.