Learn Cypress, 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

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

Some components render differently based on the route they are rendered on. To use router within component tests, it is best to define its default values in `cy.mount()` function. Since we can customize this in any way we’d like, we can create a custom `path` attribute where we can pass our own routes and test our component behavior against them.

Test a Component Rendering Within Different Router Locations in Cypress Component Test

Every component test that uses Pinia needs to have Pinia imported and initialized. Instead of doing this separately for each test you can customize your `cy.mount()` command to automatically use a default store. You can further then customize it to use your own store in case you want to change its state.

Rewrite Cypress mount() Command to Provide a Default Store to all Components

Instead of calling an action function to change the state, we can choose to change it directly by importing the attributes from our store. In order to not loose reactivity while destructuring properties we can use `storeToRefs()` function.

Mutate Application State Properties Directly with Pinia’s storeToRefs()

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

cypress

When component uses a state management tool like Pinia, it needs to be defined within the test. To use Pinia inside the Cypress component test, we need to create a Pinia instance and pass it into our store. For changing the state we can call our actions directly from within our test and assert different attributes of the component with Cypress commands

Call Pinia Store Actions From Within a Cypress Component Test

`emit()` function enables components to communicate with one another. While this communication is a good candidate for end to end test, we can also test this in isolation within component. To do this, we’ll use `cy.spy()` function that will watch for the defined function call. Using this, we can confirm that our emitted event was actually invoked.

Use Cypress cy.spy() Function to Test a Vue 3 Component’s Emitted Events

By passing a `slots` option to our `cy.mount()` function, we can define content to be rendered inside our current component. We can use default or named components and eve use Vue’s `h()` function to create element and pass components with desired properties.

Render a Vue 3 Component with <slot /> and Test its Content Properties

Some components can have properties passed into them, For these, we can use an options parameter in our `cy.mount()` function and pass `props` attribute which will define the properties we want to pass into our component. This way we can test whether different properties correctly render out in our component.

Pass Properties Into a Vue 3 Component Within a Cypress Test

Importing styles is going to be essential for all of our components to render properly. We will do this similarly as we do in our application - at top level. `component.ts` file is the proper file for this, as this is the one that gets loaded before running our specs. Importing our `index.css` file here will make all of our components render with the correct styles.

Setup Global CSS Properties for Cypress Component Tests

To create our first test, you’ll create a spec file that pairs with the component. Usual naming convention is using `filename.cy.ts` (or .js), but this can be easily set up in `cypres.config.ts` file. After you create the spec file, you can mount the component by importing it and using cy.mount() command inside an `it()` block. This will render the component inside Cypress app, but will not load all the dependencies that the component needs, like css styles. These need to be imported into the spec file manually. Since we are running our component in a browser and inside a Cypress app, we can interact with it using common Cypress commands.

Mount and Test a Vue 3 Component in Cypress

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.