Hey everyone, this is the first blog post about the technical implementation regarding the ShareYourContent app for the Portfolio Project Club.

This app will include the following things: Next.js, Tailwind CSS, TypeScript, React Testing Library and Cypress.

Next.js and Tailwind CSS template

For starting we’ll be using the Next.js + Tailwind CSS Example. To install it do the following:

yarn create next-app --example with-tailwindcss with-tailwindcss-app

This template comes with Tailwind CSS out of the box so you don’t need to worry about configuring it, its ready to use!

Add TypeScript

Adding TypeScript to a Next.js app is simple. Firstly we need to install TypeScript and its typings.

npm install --save-dev typescript

npm install --save-dev @types/react @types/react-dom @types/node

Now that it’s installed you can rename every .js file to .tsx. After doing so, if you run next dev then you’ll see that Next.js will automatically create a .tsconfig and next-env.d.ts files for you to configure if you want so.

Add React Testing Library

Speaking about testing, before anything else we need to install jest.

npm i -D babel-jest jest

To make sure that you can rust jest in your app, then we need to create a .babelrc file in the root of your project and add the following:

{
  "presets": ["next/babel"]
}

Now we can install the React Testing Library

npm i -D @testing-library/react @testing-library/jest-dom

This should allow you to run tests in your application. To make sure that you can use jest-dom matchers and load your tests from the pages folder then you need to add the following to your package.json

"jest": {
  "setupFilesAfterEnv": ["@testing-library/jest-dom/extend-expect"]
  "moduleDirectories": ["node_modules", "pages"]
}

Adding Cypress and Cypress Testing Library

To install Cypress run the following command:

npm install --save-dev cypress

After this, Cypress should be installed in your app and ready to use. To make sure that we have better queries for Cypress let us install the Cypress Testing Library.

npm install --save-dev @testing-library/cypress

After doing so, we need to make sure that Cypress knows how to use the custom queries. So inside of our Cypress folder called support edit the index.js file and add the following:

import '@testing-library/cypress/add-commands'

Now you can use the Cypress Testing Library.

If you want to know more about the Portfolio Project Club here is my first vlog about it.