Learn Eslint, Reactfire and Strapi

**Developers aren’t the only ones working on sites.** 

Marketers, copywriters, designers, and other non-coding roles all need to be able to make content changes. If you don't want to be bothered to open a PR every time a typo needs fixed, you *need* a CMS. 

And Strapi is an *amazing* CMS option.  

Strapi helps you quickly build a robust content API. You can host it yourself, it supports both RESTful and GraphQL, handles your authentication, lets you bring team members and it's highly customizable with plugins and extensions. 

You can take those gains even further by adding **Next.js 13 to the stack.** 

Next.js is fast, supports both server and client-side rendering, and features dynamic routes. Once you are generating dynamic pages from your CMS you’ll see just how powerful the combination of Strapi and Next.js is!

**In this course you will do the following:** 

- Building Content Models with Strapi
- Fetching Data from your Headless CMS
- Using React Server Components
- Using the Next.js App directory
- Setting up pagination in Strapi and Next.js
- Parsing and rendering content in your Next.js application
- Connecting external services to your Headless CMS (like Cloudinary for Media Management)
- Deploying your Next.js and Strapi Applications to a production environment
- Setting up and using Strapi Plugins
Transferring data between your Strapi environments

By the end of this course you’ll be building pages and managing your content like a pro!

strapi

Modern CMS Driven Web Applications with Strapi and Next 13

There is a lot of extra functionality that you can import into your Strapi application through Strapi plugins. 

To demonstrate how easy this is, we'll install the `strapi-todo-plugin` and add a To-Do feature to our Strapi application that will help manage our content.

Install and Use a Strapi Plugin

Inviting users to your Strapi application is simple. First, we'll create a role for editors so they can't publish or delete content then we'll add the user and fill out name and email. This gives us a URL that we can send to the new collaborator and they can set their password and log in to the Strapi dashboard.

Invite a New User to Your Strapi App

When a new Strapi version is available, you'll see a notification in your admin panel. You can also check the [Strapi GitHub releases page](https://github.com/strapi/strapi/releases) that is linked in the notification to see what's new in the latest version and take note of the latest version number. 

Once we upgrade the Strapi dependencies and install again, you'll notice the notification is gone and when you check settings the version number has been updated. To update production, you push your changes to GitHub and run `git push heroku HEAD:main`.

Upgrade a Strapi App in Development and Production

There are times that when deploying your Strapi application you'll want the data and settings you developed with to be transferred to your production environment. To do this we can use Strapi's data transfer feature. 

To start the data transfer we will need to log into the production environment and create a transfer token. When the token is created we will just need to run `yarn strapi transfer --to :heroku-url` and paste the transfer token when prompted. You'll notice that all the data is present in your production enviroment as well as the roles you set up in development.

Transfer Data Between Environments with Strapi Data Transfer

Now that we've got a functioning application it's time to deploy. For Strapi, we'll use Heroku to deploy for production. To do so we will need to create a production environment file for `database.js` and `server.js`, then we log into Heroku and created a new app. Once logged in we will set all the environment variables in Heroku. Finally, we pushed our code to Heroku and saw our application running live on the web.

Deploy a Strapi Application to Heroku

cloudinary

We'll learn how to integrate Cloudinary into our Strapi application so that we can upload image assets in our Strapi dashboard and the resulting image will be stored in Cloudinary and ready for use in our application.

We'll create a `config/plugins.js` file and paste in some config code that sets Cloudinary as the provider with `cloud_name`, `api_key`, and `api_secret`.

Then we'll install the Cloudinary provider plugin with `npm install @strapi/provider-upload-cloudinary`, add the middleware security that lets us use Cloudinary, and finally add Cloudinary credentials to our `.env` file.

Install and Add the Cloudinary Provider to a Strapi Application

We'll cover the basics of building a new page in Next.js, specifically an "About Us" page. If you've used Next before, this will feel very similar to creating a new page in the `pages` directory. 

While doing this we will also be introduced to some of the components that come with the template, such as the `PageContainer`, `Main`, `Title`, and `Description` components which you can check out [in more detail here](https://github.com/malgamves/next-13-website-template/tree/main/components).


Create an About Us Page inside the Next.js 13 App Directory

GraphQL is a powerful technology that lets you query the exact data that you need when you need it on your front end. Strapi allows for GraphQL integration through a plugin.

You can install GraphQL with the following command:

```bash
yarn strapi install graphql
```
You'll notice this adds GraphQL in your plugins tab within Strapi. 

When that is installed you can navigate to `/graphql` in your Strapi project and query the data you have. 

Install and Query GraphQL API in Strapi

We have a problem right now in that if you were to try and fetch these posts from the API, you would get a 403 error. And that's because we haven't set up the end user permissions for the API to be able to access this content. So let's go ahead and do that now.

We'll modify the User permissions for the `Post` role and give public access to `find` and `findOne`.

Set up API End User Permissions to Make REST Queries in Strapi

The first thing we want to do is model the content that will be presented on our website. To do this we'll create a Post content type that will have several fields with types including text, rich text, date, and UID. 

After we create the content type you'll see how to manually create posts through the Strapi dashboard.

Create a Collection Type for a Post in Strapi

We'll start with the basics of creating a new Strapi project, naming the project API, and setting up the project to use an SQLite database.

Creating a New Strapi Project for Development with npx

The pluggable linting utility for JavaScript and JSX.

eslint

One of the other tools I use is Emmet. It's used for writing HTML much more quickly by using shorthand. It can also be used for JSX. VSCode also supports ESLint which we will use and configure in our VSCode `settings.json`. I will also set up Prettier as my default formatter for TypeScript and TypeScript React files. 

Configure Emmet, ESlint, and Prettier Extensions

We can leverage GitHub Actions to automate the running of all of our accessibility auditing tools as part of a Continuous Integration (CI) workflow. 

Auditing tools will only catch a percentage of potential accessibility issues, it is no replacement for manual testing.  But being able to automate the auditing will add efficiencies to our testing and provide an early warning system that can be run much more frequently than it’s practical to perform manual testing.  Additionally, we can use our CI suite as a safety net to prevent code changes that break accessibility from being able to be merged.

## Resources
* https://app.egghead.io/lessons/react-set-up-eslint-to-audit-accessibility-issues-in-react
* https://docs.cypress.io/guides/continuous-integration/github-actions#Basic-Setup
* https://github.com/cypress-io/github-action

Automate Accessibility Audits with GitHub Actions

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

Nx already comes with a default TypeScript setup. Although you can opt-out of that and generate plain JS based components, especially in a large setup TypeScript can be beneficial in uncovering potential issues early. To add an extra level, Nx also comes with preconfigured eslint for all the apps and libraries. In this lesson we're going to explore the lint setup and how it can be used.

Linting a React app with Nx

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

In this lesson you will learn how to use the eslint yeoman generator to scaffold a new plugin to provide custom rules for your project. 
You will also be able to check the basic skeleton for an eslint ruleand a working example rule to apply a naming convention for async functions.

Scaffold an eslint Plugin with Yeoman

We have a number of options to use when testing for accessibility issues concerning alternative text for images.  The react-axe library and axe browser extension will both report when an image is missing alternative text.  The tota11y browser extension will annotate any images that are missing alternative text.  Running eslint with the eslint-plugin-jsx-a11y plugin installed will report on any `<img>` elements missing an `alt` attribute.  Finally, we can use a screen reader to actually hear what is read when an image has focus.

Test for Image Alternative Text Accessibility Issues

Images must have text alternatives that describe the information or function 
represented by them so they can be read and understood by those using screen readers.

## Alternative text for images
* All `<img>` elements should have an `alt` attribute provided
    * When not provided many screen readers will fallback to reading the file name instead
* The `alt` value should not include words like _“image”_, _“picture”_ or _“icon”_
    * Screen readers are already announcing that the element is an image
* Images that are decorative only and provide no information or function to the page should be hidden from Assistive Technologies by providing an empty `alt` attribute (`alt=””`)

## References
* https://www.w3.org/WAI/tutorials/images/
* https://www.w3.org/WAI/tutorials/images/decision-tree/
* https://www.w3.org/WAI/tutorials/images/tips/
* https://www.w3.org/WAI/tutorials/images/informative/
* https://www.w3.org/WAI/tutorials/images/functional/
* https://www.w3.org/WAI/tutorials/images/textual/

Define Images with Appropriate Text Alternatives

Our accessibility auditing toolkit makes it very easy for us to test for any form controls that are missing labels or are not correctly associated with their labels.  Running Eslint with the eslint-plugin-jsx-a11y installed will show us any form controls with missing or unassociated labels.  Running react-axe or using axe to audit a web page will similarly list any of these findings.  Finally using tota11y we can annotate any form controls on a page that are missing labels.  This is definitely some of the lower hanging fruit that we can easily find and fix when making our applications accessible!

Test for Form Control Label Accessibility Issues

Labeling inputs, elements, and widgets add context and clarity for assistive technology such as screen readers.  Elements of a `<form>` such as `<input>` or `<textarea>` or `<select>` should be labelled by using a `<label>` element.  Placeholder text can be used in addition to a label but should not be used in place of a label as not all assistive technologies respect placeholder text.

Ensure Form Controls have Accessible Labels

Our first layer of defense when building accessible React applications is to add some auditing tools to our development workflow. This should include adding static analysis checking for common accessibility standards and best practices. We can get this with the latest eslint plugin: "eslint-plugin-jsx-a11y". If you are already linting your projects adding this plugin should fit very smoothly into your workflow.

## Resources
1. [List of all the rules supported by eslint-plugin-jsx-a11y](https://github.com/evcohen/eslint-plugin-jsx-a11y#supported-rules)
2. [Comparison of the difference in rules between recommended and strict mode](https://github.com/evcohen/eslint-plugin-jsx-a11y#difference-between-recommended-and-strict-mode)
3. [Background on how the Accessibility API implemented by browsers interfaces with Assistive Technologies](https://github.com/evcohen/eslint-plugin-jsx-a11y#some-background-on-wai-aria-the-ax-tree-and-browsers)

Set up ESLint to Audit Accessibility Issues in React

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

In this lesson, you'll learn how to leverage the GitHub CLI to efficiently search through issues across multiple repositories and use that data with AI Studio for deeper insights.

The lesson covers:

- Using GitHub CLI to search for specific issues across repositories
- Filtering issues based on criteria like comment count
- Extracting issue content and comments
- Using the collected data as context in AI Studio
- Creating practical applications like FAQs from issue discussions

The example demonstrates creating a Framer Motion FAQ by searching GitHub for issues with multiple comments, but the technique can be applied to any framework or library.

This workflow helps developers:
- Research common problems and solutions
- Understand recurring issues in specific technologies
- Generate useful documentation from real-world problems
- Make better use of existing GitHub discussions

This approach combines the power of GitHub's vast knowledge base with AI tools to create valuable insights for development work.

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. And what you can really 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. And inside of Cursor with their Composer AI agent, we can search for the files we want, and we can tell the agent to download them and then work on them and inspect them and teach us 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.

Leverage Git Diff to Fix AI Agents' Mistakes

AI agents are notorious for getting tasks done, but also taking some shortcuts in TypeScript, and falling back to using things like Any, which you might not want in your codebase. This creates a scenario when it's done all of the work, you've tested and verified everything, but it's left you with many things untyped. So in this situation, when you run git commit, you can set up a commit hook to expose all of the linting, expose all of the TypeScript errors. And then you just let the AI agent run that commit hook and it can find all of the mistakes that it made. And go through And fix everything without you ever having to touch the code. This lesson covers a real world scenario of a commit hook running based on a refactor that was made when extracting some types. And it shows how running commit with an agent, if you allow the commit to give exhaustive information on what went wrong, the agent can continue on and make all the changes for you.

Commit Hooks are Critical with AI Agents in Cursor

If you ever want to see data represented in a certain way, such as a chart or a graph, to better understand what's going on in the world, you can use AI's to grab the most recent data and then convert it into any visual format you want. This is enabled in AI studio with Gemini through what's called grounding from web search, structured output formatting data, and code execution, which can run Python and generate charts. This lesson is going to walk you through the challenges of using grounding, especially when working with numbers which need to be accurate. How you can use image recognition and convert that to structured output. And then the challenges of using code execution. Especially when AI's are confident that the code ran even though the code failed. At the end, we still get to generating a chart through the online editor and then we take it also to set up in Cursor in a local environment where we can run all the way through YOLO mode and just click around some buttons and get our chart.

Search

Search Results