Learn D3, Reactfire and Turborepo

Turborepo is a fast build system for JavaScript and TypeScript.

turborepo

Turborepo is a task runner that helps speed up and manage your Monorepos. It's not a dependency management tool. It knows nothing about your dependencies. 

It speeds up Monorepos by using local and remote caching as well as incremental builds. It helps to manage your repo with very handy and easy-to-use scripts. 

Here is the [npm-workspaces repo](https://github.com/alejandronanez/npm-workspaces)

So let's hop in and learn about Turborepo!

Note: This course is a continuation of the course [Introduction to Monorepos with NPM Workspaces](https://egghead.io/courses/introduction-to-monorepos-with-npm-workspaces-c03f500b) where we initially build out the Monorepo that is used in this course. It is highly suggested to watch that course first before jumping into this one. 

What is Turborepo?

At the root of our project, we'll run `npm install turbo --save-dev` to install Turborepo.

We'll also look at how to configure Turborepo in the `turbo.json` file. We'll look into the [$schema](https://turborepo.org/schema.json) and how it affects our configuration. 

Install Turborepo in an Existing Monorepo

With our npm scripts, if utils can't build, then the dashboard and blog can't build or run their tests. Turborepo Pipelines changes that. Using the pipeline, we can set up caching, what our scripts depend on, and where we want our logs to be output. 

Also since we now have Turborepo installed and configured our pipelines, we can remove concurrently from our scripts and dependencies. 

Migrate NPM Scripts to Turborepo Pipelines

We are going to be going through Turborepo speeds up your builds and testing with caching. When a command is first run in Turborepo, it gets cached. This way if something has changed in one of your repos in your Monorepo, it will detect that change. For the repos that haven't changed, it will pull their info from the cache inside of `node_modules` instead of fully re-running that command. For the repo that has changed, it will run that command solely on that repo. 

Understand Turborepo Local Cache

It's fairly straight forward to create repo specific pipelines with Turborepo. The script goes like this: `{monorepo-name}/{repository}#{script-name}`. For example, if we wanted to run the typecheck command in just the dashboard repo, it would look like this: `@monorepo/dashboard#typecheck`. Lastly, we will make sure that it `dependsOn` the `utils#typecheck` pipeline. 

Create Repository Specific Turborepo Pipelines

A dependency graph is exactly what it sounds like! A visual graph created by Turborepo to show you your dependencies and what dependencies the projects rely on. For our Monorepo, we'll run `npx turbo run build --graph` in the root of our project and that will build the dependency graph for all of our projects.

We can also do one with a graphic but that requires the [Graphviz](https://graphviz.org/download/) library. We can edit our command to have some arguments: `npx turbo run build --graph=graph.pdf` and it will create a graphic in a .pdf file. 

Generate a Dependency Graph for Monorepos Using Turborepo

You can set up all of your specific pipelines in the turbo.json file, or you can filter through your pipelines in the terminal. If we wanted to run the `typecheck` command in just the `utils` package, our command would look like this: `npx turbo run typecheck --filter=@monorepo/utils`. You can remove `@monorepo` as long as the `utils` package is unique. 

Turborepo also gives you the option to filter your commands based on what files have changed on your branch using `--filter="[HEAD^1]". 

Now that we know a bit more about Turborepo, we can edit all of the scripts that we build in the previous course to use `turbo` instead of `npm`. 

Filter Pipeline Tasks Using Turborepo

By default, Turborepo will stop its execution if it runs into an error. We may not want that if we want Turborepo to continue in the projects that don't have an error. We can do this by adding the `--continue` flag to the end of our command. 

Prevent Turborepo Exiting Early on Failing Tasks

Another really good tool that Turborepo offers is the `--dry` flag. The `dry` flag will display details about the affected workspaces and tasks that would be run. It will help you to know what Turborepo is doing under the hood. 

Preview Turborepo Tasks at the Pipeline Level

The logs produced by Turborepo can get really really long. Turborepo give us a flag, `--output-logs` and if we add on the argument `new-only`, it shortens the logs to just the new information for the repositories that have changed. 

Shorten Turborepo Logs using --output-logs

Remote caching is key when coworking on a project. Using Turborepo, you can upload your cache to the cloud and use it everywhere else. For example, if your coworker switches to your branch and runs the build, they can have your most recent cache saving them time. 

We will start off by logging into Vercel and Turborepo then linking our Turborepo account to our Vercel account. Once that is done, we run `npx turbo link` to connect to our remote cache. Then in our Vercel dashboard, we will need to do some configuring to finish it up. 

Enable Remote Caching in Vercel

Now that we have Turborepo installed, configured, and we have some knowledge about it, let's deploy our two client-side applications, dashboard and blog, to Vercel. We'll link our Github to Vercel and point it towards our Monorepo. We'll then run through all of the configurations and commands needed to get our apps deployed. 

Deploy the Client-Side Apps in a Turborepo Monorepo to Vercel

Github Actions helps to automate the building, testing, and deploying of your applications. We'll configure our actions in the `ci.yml` file in a new directory called `.github/workflows`. When that file is configured, we can update our scripts in our package.json to run off of those. We will also need to make/set up our `TURBO_TOKEN` and our `TURBO_TEAM` which we will create on Vercel and Github. 

Enable Github Actions with Turbporepo Remote Caching

Now you might have a project that currently isn't in your Monorepo that you want to add to it. We can copy that project over into our `apps` folder and then update the `package.json` to update the name to make it consistent across our apps. We'll update the dev port to make sure it's not going to run on the same port as one of our other applications. Lastly, we'll update the build pipeline to include our new application. 

Migrate a VueJS Application to an Existing Turborepo Monorepo

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

In this lesson, we'll clean up some of our placeholder elements. We'll then look at D3's ordinal scale to create a color scale that maps our regions to colors. We'll apply the colors based on region to our data points via the SVG `g`(group) element to apply the color to both our bars and their corresponding inline labels.

Create a Color Scale with D3's scaleOrdinal

Looking at our bars against each other with the x-axis as a guide gives us some relative information, but doesn't deliver the most precise values. In this lesson, we'll add additional labels to show the exact values of each data point in the context of the individual bars.

Clarify Data in D3 with Additional Labels and Rounded Domain Values

In this lesson, we'll see how we can add labels down the y-axis using our band scale. We'll see how to render the labels in React and how we can precisely position the labels based on values calculated by D3 and our scales.

Render a Y Axis for a Bar Chart with D3 and React

In this lesson, we'll take advantage of our `xScale` and the bottom margin to create an axis to start giving our data meaning. We'll access `ticks` from the scale and then use React to render and position the SVG `rect` and `text` elements to create the x-axis for our chart.

Render an X Axis for a Bar Chart with D3 and React

When applying scales to data elements in D3, it's common to combine the scale with an accessor function in order to apply the scale to the appropriate key on a data object. In this lesson, we'll create scaled accessors to refactor and tighten up some existing code.

Create Scaled Accessor Functions from D3 Scales

A band scale allows us to map a discrete set of values to a continuous range. In this lesson, we'll use a band scale in D3 to take the distinct "region" keys in our sample data and map those to evenly spaced and sized elements on our y-axis. We'll use this band scale to show a bar in the bar chart for each region, setting their size and position based on this scale.

Layout SVG Elements on a Y Axis with a D3 Band Scale in React

Drawing data accurately requires a consistent and precise mechanism for mapping data values to pixels on the screen. We can accomplish this mapping in D3 using scales. There are various scales available in D3, depending on your needs. In this lesson we'll using a linear scale to map a data domain of continuous values to continuous range of pixel values. We'll render a new SVG element, setting its width from our scale.

Set an SVG Element's Width Based on a D3 Linear Scale in React

 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