Title: Replace useSWR with React Query

Description:

It would be nice to have React Query to perform client side requests

Type of change:

• Client 💅
• Server ⚡️
• Unit Testing 🧪
• E2E Testing 🤖
• Tooling 🛠
• Config 📚

Images (If required):

Title:

Description:

Type of change:

• Client 💅
• Server ⚡️
• Unit Testing 🧪
• E2E Testing 🤖
• Tooling 🛠
• Config 📚

Images (If required):

Title: use playwright instead of cypress

Description:

Since playwright is gaining popularity, it might be a good idea to have it instead of cypress

Type of change:

• Client ????
• Server ??????
• Unit Testing ????
• E2E Testing ????
• Tooling ????
• Config ????

Images (If required):

Title:

Description:

Type of change:

• Client 💅
• Server ⚡️
• Unit Testing 🧪
• E2E Testing 🤖
• Tooling 🛠
• Config 📚

Images (If required):

Title:

Description:

Type of change:

• Client 💅
• Server ⚡️
• Unit Testing 🧪
• E2E Testing 🤖
• Tooling 🛠
• Config 📚

Images (If required):

Title:

Description:

Type of change:

• Client 💅
• Server ⚡️
• Unit Testing 🧪
• E2E Testing 🤖
• Tooling 🛠
• Config 📚

Images (If required):

Title: Fix Playwright

Description:

Right now Playwright is not running properly since it tries to run Jest tests and finds that
describe is not defined.

We need to add a specific path for e2e tests and fix the Playwright runner

Type of change:

• Client 💅
• Server ⚡️
• Unit Testing 🧪
• E2E Testing 🤖

Images (If required):

Title:

Description:

Type of change:

• Client 💅
• Server ⚡️
• Unit Testing 🧪
• E2E Testing 🤖
• Tooling 🛠
• Config 📚

Images (If required):

Title: add next-auth

Description:

Since the template is getting better, it might be a good idea to install next-auth, so repos can have authentication from the beginning.

Type of change:

• Client ????
• Server ??????
• Unit Testing ????
• E2E Testing ????
• Tooling ????
• Config ????

Images (If required):

Title:

Description:

Type of change:

• Client 💅
• Server ⚡️
• Unit Testing 🧪
• E2E Testing 🤖
• Tooling 🛠
• Config 📚

Images (If required):

Description:

Styles do not work in the NotFoundBanner.tsx

Type of change:

• Client 💅
• Server ⚡️
• Unit Testing 🧪
• E2E Testing 🤖
• Tooling 🛠
• Config 📚

Images (If required):

Right now Playwright is not running properly since it tries to run Jest tests and find that
describe is not defined.

We need to add a specific path for e2e tests and fix Playwright

Title: Setup Github Actions

Description:

Enable Github Actions on this repo

Type of change:

• Client 💅
• Server ⚡️
• Unit Testing 🧪
• E2E Testing 🤖

Images (If required):

Title: Add Mocking Working Service for testing

Description:

Add this library to enable network mocking effectively

How to (AI-Generated):

To set up MSW (Mock Service Worker) in your Jest + React Testing Library tests, follow these steps:

Install MSW and its dependencies:
sql
Copy code
npm install msw msw@next @testing-library/react-hooks --save-dev
Note: msw@next installs the latest beta version of MSW at the time of writing this.

Create a src/mocks/handlers.js file. This file will contain your mock server handlers. Here's an example:
php
Copy code
import { rest } from 'msw';

export const handlers = [
  rest.get('/api/todos', (req, res, ctx) => {
    return res(
      ctx.status(200),
      ctx.json([
        { id: 1, text: 'Buy milk' },
        { id: 2, text: 'Walk the dog' },
        { id: 3, text: 'Do laundry' },
      ]),
    );
  }),
];
Create a src/setupTests.js file. This file will configure your test environment to use MSW. Here's an example:
scss
Copy code
import { server } from './mocks/server';

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());
Note: ./mocks/server is the path to your mock server file, which we will create in the next step.

Create a src/mocks/server.js file. This file will create and export a mock server instance. Here's an example:
javascript
Copy code
import { setupServer } from 'msw/node';
import { handlers } from './handlers';

export const server = setupServer(...handlers);
Use MSW in your tests. Here's an example:
javascript
Copy code
import { render, screen } from '@testing-library/react';
import App from './App';

test('renders todos', async () => {
  render(<App />);
  const todo1 = await screen.findByText('Buy milk');
  const todo2 = screen.getByText('Walk the dog');
  const todo3 = screen.getByText('Do laundry');
  expect(todo1).toBeInTheDocument();
  expect(todo2).toBeInTheDocument();
  expect(todo3).toBeInTheDocument();
});

That's it! Now your tests will use MSW to mock your API requests.

Type of change:

• Client 💅
• Server ⚡️
• Unit Testing 🧪
• E2E Testing 🤖
• Tooling 🛠
• Config 📚

Images (If required):

Title:

Description:

Type of change:

• Client 💅
• Server ⚡️
• Unit Testing 🧪
• E2E Testing 🤖
• Tooling 🛠
• Config 📚

Images (If required):