Learn Firebase, Reactfire and Typescript

course repository: https://github.com/ducin/egghead-typescript/tree/brand-types-value-objects

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

typescript

Domain Data Modelling using TypeScript Aliases, Brand Types and Value Objects

In this lesson you will learn how to verify if some literal value satisfies any given type or not. There are two ways to do this i.e. either by declaring a variable of some given type and assigning it the value or we can use the `satisfies` keyword. We will take an example and look at both of the ways in this video.

Verify if some literal value satisfies a given type

A queue is FIFO (First In First Out) list. When you remove elements from the queue, oldest item is removed first. In this lesson we'll cover how to implement a queue using TypeScript. Queue based questions are common in technical interviews, so it useful to be familiar with how they work.

Build a Queue data structure in TypeScript

A stack is LIFO (Last In First Out) list. When you remove elements from the list, the most recently added item is removed first. In this lesson we'll cover how to implement a stack using TypeScript. Stack based questions are common in technical interviews, so it useful to be familiar with how they work.

Create the Stack data structure using TypeScript

Use the Typescript keyof operator to create a custom type based of an object

We'll learn how to calculate the number of Nodes in a Linked List.

Return the Length of a Linked List

In this lesson we'll learn how to search through a Linked List to find the index of a Node with a given value.

Find the Index of a Linked List Node by Value

We'll learn how to get the value of a Node in a Linked List at a given Index.

Get the Value of a Linked List Node by Index

We'll learn how to remove a Node from a Linked List at a given Index.

Delete a Linked List Node at a given Index in TypeScript

We'll learn to how add a new elements to a linked list at a specific index.

Insert values into a TypeScript Linked List with insertAt

In this lesson we'll cover the basic elements of a linked list and how to append nodes to one.

Create a Linked List in TypeScript

There might be times when you want to extend a type, i.e., to add new fields to it. Instead of copying the types and creating duplicates, the better way to do that is to use the intersection operator `&`. In this quick lesson, you will learn what it does and how you can use it to reduce duplicate types.

Merge Types using Intersection Operator

Fix TypeScript Errors related to Function Type Parameters and Generic Constraints

Filter TypeScript Unions of Primitives or Objects depending on the usecase

Drizzle ORM is a library that allows us to connect, define, and interact with any kind of database.

To set it up, we will need to install its packages and then instantiate it in its own file. 

We will just need a single table that will keep track of the article slug and the number of likes for that article. We can define this shape in `src/db/schema.ts` to create a likes table.

Then, we will define an npm script in `package.json` that will generate the migration files for us, which we will apply when we first use the db instance after deployment. We'll also create a script to run the Drizzle studio app that will be useful in the future.

Drizzle will also have its own config file at the root of the project in which we will define the schema, the migrations location, the driver, etc. To prepare it for production, we will need to create a volume in fly.io and mount it to our app. 

This way when our blog gets deployed, production will reference the volume in fly.io and development will reference a `local.db` file.

Implement Drizzle ORM for Development and Deploy to a Fly.io Volume

Part of the appeal of our events site is not only being able to show cool events, but allowing others to submit their own events. But so far we’ve only worked with data that already exists in our database, how do we create data?

The Appwrite SDK gives us the ability to easily create a new Document by passing in our data. Additionally, the SDK provides helpers that make dealing with things like unique Document IDs easy. But part of the trick with creating new data, is we need a mechanism to input data, which is where we’ll see how we can read a form in React with Typed out data, so that we can pass it along formatted to Appwrite.

We’ll first learn how to create a new Document using the Appwrite SDK. This includes the ID helpers for generating a unique ID, formatting dates to the required format, and using our existing Types for that creation process. When passing along our Types, we’ll omit the ID which we’ll only get once the data exists in the first place. We’ll then see how we can dynamically grab data from a form, rather than hardcoding the input data, and open up access so that we have permission to create our new Document in Appwrite.

**What You’ll Learn**
- Create a new Document in a Database Collection
- Use the Appwrite ID helper to generate a unique ID
- Format a date in the ISO format
- Use the TypeScript Omit utility to use all properties of a Type  except the ones omitted
- Configure Create access for Documents
- Read and set Types for data from a form

**Resources**
- [Create a Document](https://appwrite.io/docs/client/databases?sdk=web-default#databasesCreateDocument)
- [Permissions](https://appwrite.io/docs/permissions)
- [Date.toISOString](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString)
- [TypeScript Omit](https://www.typescriptlang.org/docs/handbook/utility-types.html#omittype-keys)


Create a new Document in an Appwrite Database Collection

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. 

Full Stack with React and Appwrite

firebase

Push Method and Instructions Object

Firebase Dependency and Set Up

Firebase Account and Database Set Up

Firebase Intro

 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

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.

Search 100s of Issues with GitHub CLI as Context for AI Studio

I often find myself wondering how to use certain APIs in certain situations, and I have a couple of keywords that I try and search up on Google. 

What you can do in this situation is turn to GitHub and see how other people have actually used this code on public projects. The GitHub CLI enables us to run searches like this, and we can take the results and work on them programmatically.

Inside of Cursor with their Composer AI agent, we can search for the files we want, tell the agent to download them, and inspect them for better understanding of how those things work together.

Search All of GitHub's Code and Pass the Results to AI Agents in Cursor

Implement virtual scrolling to handle large datasets in an HTML table. Start with a basic table that renders 10,000 rows of data. The browser can struggle with this amount of DOM nodes to render at one time, especially on low end devices. 

We implement tanstack react virtual to render only the necessary amount of rows the user is viewing. The implementation includes proper column sizing, accessibility considerations, and convenient scroll controls, resulting in a smooth and performant table experience regardless of the dataset size.

Create a row virtualized HTML table with Tanstack Virtual

Learn how to implement virtual scrolling in React tables using TanStack Table and Tanstack Virtual with the useWindowVirtualizer React hook.

The most difficult tasks will require the strongest AI models. And those models simply aren't available as AI agents inside of your tooling. So the best workflows are to drag and drop the files you need to be changed and analyzed inside of a reasoning model such as OpenAI's O1 Pro, then letting it create a giant plan for your dumber AI agents to work on. The key here is that instead of just copying and pasting the entire plan into Cursors Composer or your AI agent, it's to create a file inside of your project and ask your agent to tackle the plan one step at a time. This allows you ample opportunity between each step to test and verify the micro steps along the way. Otherwise, as I've experienced many times, a session can go way off track and you burn a lot of time and burn a lot of AI requests Cursors Composer and it starts churning through a plan Cursors Composer and making lots of unwanted changes. Cursors Composer and it's to guide an AI agent to hold its hand along the way, especially through the most complex tasks. Cursors Composer and the most complex tasks Cursors Composer and the most complex tasks require a step-by-step plan.

Planning AI Agent Sessions with Reasoning Models

AI agents will inevitably make mistakes—it's just a matter of when. A key tool in your toolbox, once they do make mistakes after working on a problem for a while, is to use **git diff** to capture all of the changes they've made. 

Once you have those changes in a text file, you have a portable document that you can test against other AI models. This allows you to move the problem into smarter reasoning models with smaller context windows, helping you isolate and focus on the issue at hand.

**git diff** has been invaluable when working with AI agents because they'll often make many good changes but also slip in one tiny error. Finding that one small mistake is **git diff**’s superpower.

Search

Search Results