Learn Git, Ramda and React-storybook

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

This project is a Next.js example of Kent C Dodd's Frontend Masters Advanced Remix Workshop project.

The aim of this project and course is to take a large project using the traditional Next.js pages architecture and migrate the full project to use the new app directory architecture.

We will fork project repo and clone it to get setup with the project locally. 

Fork and Clone the Next.js 13 Project to Get Started

Fast, easy and reliable testing for anything that runs in a browser.

cypress

[Storybook](https://storybook.js.org/) is already powerful for being able to develop components in isolation as well as using those stories as living documentation for others. [Nx](https://nx.dev) goes a step further. It leverages the fact that Storybook exposes an `iframe.html` that allows to access the rendering of the story without the actual Storybook frame. On top of that, Nx generates a Cypress configuration to run tests against the Storybook stories.

Prefer to read along as well? Here's the [accompanying article](https://blog.nrwl.io/use-cypress-with-next-js-and-nx-to-battle-test-your-react-components-da273f664f81).


Write Cypress Tests for our React Storybook Components with Nx

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

In this lesson, we develop a new React component in an [Nx](https://nx.dev) library with Storybook. We explore how to leverage [Storybook](https://storybook.js.org/) to develop the component in isolation, how to expose the component props s.t. we can then dynamically change them in the Storybook rendering and much more.

Prefer to read along as well? Here's the [accompanying article](https://blog.nrwl.io/use-storybook-with-tailwind-in-an-nx-workspace-5ceb08edad71).

Develop React Components in Isolation with Storybook and Nx

Developing UI components is sometimes a highly visual effort. We continuously want to have feedback on how a particular change affects our component rendering and adjust accordingly. Most often, as a developer, we include these components in their target applications, just to get that visual feedback. This is far from ideal though.

[Storybook](https://storybook.js.org/) solves exactly this! It allows you to develop components in isolation and experiment with the inputs and outputs of a component. Furthermore, once the Storybook story is fully developed, it can serve as documentation for other developers to explore.

Prefer to read along as well? Here's the [accompanying article](https://blog.nrwl.io/use-storybook-with-tailwind-in-an-nx-workspace-5ceb08edad71).

Configure Storybook for your React Based Nx Workspace Library

Building a component library is a great way to gain efficiencies in creating accessible React apps and Storybook is a great tool for doing that. Using the accessibility add-on to Storybook you can test your components in isolation for accessibility issues before composing them into an application.

If you can write and test each of these components initially with accessibility in mind then you now have:

* A library of reusable components with accessibility baked in.
* You won’t need to solve the same problems over and over again.

## Resources
* https://storybook.js.org/
* https://www.npmjs.com/package/@storybook/addon-a11y

Audit Component Accessibility Using Storybook

In this lesson, we include the `getServerSideProps` and `getStaticProps` exports into a story, using Storybook loaders. We mock the fetch request using MSW.

Mock getServerSideProps and getStaticProps Request with MSW and Storybook Loaders

In this lesson, we add the Mock Service Worker (MSW) library to Storybook for API endpoint mocking in Storybook. We configure MSW by hand for use with Next.js features like `getServerSideProps` and `getStaticProps` in stories.

Integrate MSW and Storybook

In this lesson, we configure `next/image` for use in Storybook. `next/image` is a Next.js component that creates highly performance-optimized images to users based on device capability and browser dimensions. It can be unoptimized for compatibility in development environments like Storybook.

Configure next/image Component to be Unoptimized

In this lesson, we add Storybook controls to page stories using Storybook args. With args, stories can be manipulated and transformed in the browser. Additionally, we configure all stories in a module to use default args.

Add Controls to Next.js Page Props with Story Args

In this lesson, we configure Storybook to load global stylesheets for all stories. This is a great way to get general CSS into all stories and useful practice for adding resets, fonts, and globally shared stylesheets.

Import Global Stylesheets for all Stories in preview.js

In this lesson, we create a story for a Next.js page. Pages are components. So we can easily document and test them in Storybook.

Create Stories for Next.js Pages

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

Getting started with contributing to open source projects can be very confusing and stressful. This talk will help clear away the confusion and pinpoint why and how you can make your first open source contribution. 



How to Make Your First Open Source Contribution

It always happens again. We have some weird bug in our codebase, hard to debug and just looking at the Git history doesn't help much. Git has a powerful command to help us: `git bisect`.

We have to simply identify a commit where the bug was not present, and the bad commit (usually the latest of the `master` or `main` branch). Then we invoke `git bisect` with both of them. The rest is just following along and answering questions. Let's see how that works.

Find that bad commit that broke your App with Git Bisect

You can create diffs in markdown to show what has changed in a code snippet. I use this in blog posts to highlight changed lines for readers. This works for code snippets in most markdown packages and on Dev.to.

To show a line of code changing in a function, you can do this:

```diff
function addTwoNumbers (num1, num2) {
-  return 1 + 2
+  return num1 + num2
}
```

First, instead of specifying the programming language, use diff after the backticks. Then at the beginning of any lines of code you want to show as removed, add a -. At the beginning of any lines of code you want to show as added, add a +.

The code would look like this:

````
```diff
function addTwoNumbers (num1, num2) {
-  return 1 + 2
+  return num1 + num2
}
```
````

Create a Diff in Markdown to Show What Has Changed in a Code Snippet

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

[Nx](https://nx.dev) combines a lot of the best tools on the market, integrates them, and provides tooling to provide the best possible developer experience. One such pair is [Cypress](https://www.cypress.io/) and [Storybook](https://storybook.js.org/). Storybook allows developing components in isolation, which is also a great basis for testing components, which is where Cypress shines.
In this lesson, we're exploring some of the `@nrwl/storybook` code generation utilities that allow you to not only configure Storybook for a React application but automatically also set up a Cypress test configuration for it along with some spec files generated from the Storybook stories.

Use Cypress and Storybook to test your React Components in Isolation

[Storybook](https://storybook.js.org/) is a framework that allows you to develop components in isolation. It is ideal for a variety of use cases, most commonly when you're building some shared component toolkit. As such, Nx comes with a dedicated package `@nrwl/storybook` that adds a series of useful code generators to add storybook to an existing React library, but also to automatically generate stories and more.

Use Storybook to Develop React Components in Nx

Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.

express

In this lesson, we will use Auth0 to generate a JWT that we can use to validate future requests to our server.

We will then return that token and test that it works when authenicated by our middleware.

During the lesson, we'll also briefly look at a strategy to keep your credentials out of source control using a .gitignore file. 

Get a JWT From Auth0 in Express to Be Used in Authentication

By default, git provides `master` as the default branch. This lesson shows how to get round that and use an alternative as the default branch.

The key is to switch to a new branch before you add your first commit, I choose `main` in this lesson. When I push `main` up to Github as the first branch, it gets set to the default.

Configure a New Github Repo to Use a Different Default Branch

By default, git provides `master` as the default branch. This lesson shows how to get round that and use an alternative as the default branch for an existing repo.

Configure an existing Github repo to use a different default branch

Using the [GitHub CLI](https://github.com/cli/cli) and a shell script, we will automate the process of monitoring pull requests in repositories we maintain. Specifically, open PRs we have created and those awaiting our review.

Monitor Pull Requests with the GitHub CLI

We scaffold out a new GitHub repo to deploy netlify functions and a small index.html file, while covering Makefile basics and netlify.toml. The lesson ends with a working Netlify site.

Setting up a new GitHub repo to deploy functions on Netlify with Make and netlify.toml

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.

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.