What is a Playwright?

Playwright is an open-source automation framework that enables developers to test web applications across different browsers, including Chromium, Firefox, and WebKit. Developed by Microsoft, Playwright offers a unified API for automating browser actions, making it an excellent choice for end-to-end testing and browser automation.

Why Use Playwright for React Component Testing?

Playwright is an excellent choice for React component testing for several reasons:

1. Cross-Browser Testing: Playwright allows you to test your React components in multiple browsers, including Chromium, Firefox, and WebKit. This ensures that your components work consistently across different browsers, which is crucial for delivering a great user experience.

2. Real User Interactions: Playwright can simulate real user interactions, such as clicking, typing, and navigating. This helps you test your React components in a way that closely resembles how users interact with your application.

3. Headless and Headful Mode: Playwright supports both headless and headful modes, making it versatile for different testing scenarios. You can run tests headlessly for continuous integration (CI) pipelines or run them in headful mode to visually inspect the test execution.

4. Accessibility Testing: Playwright includes built-in accessibility testing tools, allowing you to ensure that your React components are accessible to all users, including those with disabilities.

Set Up React App

Step 1 - Create a react app using the given command.

npx create-react-app react-app

After running the above command output looks like

Step 2 - Go to the root directory and launch the React app.

cd react-app
npm start

After running the npm start command your react app will be started on http://localhost:3000

Take a look at your Visual Studio Code - the project has been successfully created. Now, let's see what it looks like, shown below.

Notice that the application is up and running.

Set up Playwright

Step 1 - Run the below command to initiate Playwright in react-app that you have created.

npm init playwright@latest -- --ct

After running the given command output will look like

SelectJavascript by pressing the down arrow button + enter.

Select React 18

Now, Playwright is initiated in your project you can see screenshoot.

Now you can see, that Playwright is installed in your project.

Test your react component.

Now Let’s take an example to test Counter Component using Playwright.

Step 1 - update the name of the existing file src/App.test.js -> App.spec.js

Step 2 - Create a Counter component.

Let's give the name of the js file as ‘Counter.js’ and the spec name ‘Counter.spec.js’

Step 3 - Paste the following code to Counter.js file

import { useState } from 'react'
export default function Counter({ initial = 0 }) {
    const [count, setCount] = useState(initial)

    return (
        <div>
            <button style={{ color: "black", backgroundColor: "green", margin: 10 }} aria-label="decrement" onClick={() => setCount(count - 1)}>
                -
            </button>
            <span data-cy="counter">{count}</span>
            <button style={{ color: "black", backgroundColor: "green", margin: 10 }} aria-label="increment" onClick={() => setCount(count + 1)}>
                +
            </button>
        </div>
    )
}

Step 4 - Paste the following code to Counter.spec.js file.

import { test, expect } from '@playwright/experimental-ct-react';
import App from './Counter.jsx';
const counterSelector = '[data-cy="counter"]';
const incrementSelector = "[aria-label=increment]";
const decrementSelector = "[aria-label=decrement]";
test.use({ viewport: { width: 500, height: 500 } });

test('Two time Increment in the Counter ', async ({ mount }) => {
    const component = await mount(<App/>);
  await component.locator(incrementSelector).click();
    await expect(component.locator(counterSelector)).toHaveText('1');
    await component.locator(incrementSelector).click();
    await expect(component.locator(counterSelector)).toHaveText('2');
});

test('Increment then the decrement the Counter ', async ({ mount }) => {
    const component = await mount(<App/>);
  await component.locator(incrementSelector).click();
    await expect(component.locator(counterSelector)).toHaveText('1');
    await component.locator(decrementSelector).click();
    await expect(component.locator(counterSelector)).toHaveText('0');
});

In the above test case, we are covering two scenarios. First ‘Two time Increment in the Counter’. The second scenario is ‘Increment then the decrement the Counter’.

Step 5 - Run the test cases using the below command.

npm run test-ct

Step 6 - See output using the below command.

npx playwright show-report

Now you can see the test report of the Counter component.

Find Source Code Here: https://github.com/theatulanand/react-playwright

Follow us for more articles related to software development and testing.

Benifits of using FCM:-

• Cross-Platform: FCM works on Android, iOS, and web apps, simplifying multi-platform messaging.

• Reliability: FCM is known for its dependable message delivery, even during high-demand periods.

• Cost-Effective: It offers a free tier suitable for most small to medium-sized apps.

• Security: Ensure secure communication between servers and devices.

Cloud Integration: Easily integrates with other Firebase services for enhanced functionality.

Create Firebase project:

• Go to the Firebase Console: Visit the Firebase Console by going to https://console.firebase.google.com/.

• Sign In: Sign in with your Google account. If you don't have one, you'll need to create a Google account first.

• Add a New Project: Click on the "Add project" button to create a new Firebase project.

  

• Enter Project Name: Give your project a name. This name should be unique within Firebase, so choose something descriptive.

• (Optional) Set Up Google Analytics: You can choose to enable Google Analytics for your project. This will help you gather data about your app's usage. You can also enable this later if needed.

• Click "Create Project": Once you've filled in the necessary information, click the "Create Project" button.

• Wait for Project Creation: Firebase will set up your project, which may take a moment.

Project Created: Once the project is created, you'll be taken to the project dashboard, where you can see the below image.

How to set up your Firebase project?

Here's a step-by-step guide.

1. Click on web notification button.

Click on 'Register app' button.

Now set up your firebase to your react-app

1. Create your react app.

2. Install Firebase in your React app

3. Create a firebase.js file inside your src folder.

    const firebaseConfig = const firebaseConfig = {
      apiKey: "YOUR_API_KEY",
      authDomain: "YOUR_AUTH_DOMAIN",
      projectId: "YOUR_PROJECT_ID",
      storageBucket: "YOUR_STORAGE_BUCKET",
      messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
      appId: "YOUR_APP_ID"
    };  
      // Initialize Firebase
      export const app = initializeApp(firebaseConfig);
      export const messaging = getMessaging(app);
   

   

Replace firebaseConfig with your firebase project firebaseConfig object.

• open app.jsx.

    import { useEffect } from "react";
    import { messaging } from "./firebase";
    import { getToken } from "firebase/messaging";
  
    import "./App.css";
  
    function App() {
  
      async function requestPermission() {
        const permission = await Notification.requestPermission();
        if (permission === "granted") {
          // Generate Token
          const token = await getToken(messaging, {
            vapidKey: Your_Vapid_key
              // replace with your vapid key,
          });
          console.log("Token Gen", token);
          // Send this token  to server ( db)
        } else if (permission === "denied") {
          alert("You denied for the notification");
        }
      }
  
      useEffect(() => {
        // Req user for notification permission
        requestPermission();
      }, []);
  
      return (
        <div className="App">
          <h1>Push notification service</h1>
        </div>
      );
    }
  
    export default App;
  

  For the code snippet above, you'll need to generate your project's Vapid key. Here are the steps.

  • Go to Project settings

    

• Click on cloud messaging option.

  

• Scroll down and click on Generate key pairbutton. This action will generate a string, which will serve as your Vapid key.

  

1. Now, run your React app using the npm run star command. Open your console, and you will be able to see that your token has been successfully generated.

Create a file firebase-messaging-sw.js in the public folder.

importScripts("https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js");
importScripts(
  "https://www.gstatic.com/firebasejs/8.10.0/firebase-messaging.js"
);
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

const app = firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();

messaging.onBackgroundMessage((payload) => {
  console.log(
    "[firebase-messaging-sw.js] Received background message ",
    payload
  );
  const notificationTitle = payload.notification.title;
  const notificationOptions = {
    body: payload.notification.body,
    icon: payload.notification.image,
  };
  self.registration.showNotification(notificationTitle, notificationOptions);
});

Here's a simplified explanation of the code:

• We include two Firebase JavaScript libraries: 'firebase-app.js' and 'firebase-messaging.js.'

• We configure Firebase with the 'firebaseConfig' object, which contains various settings for our app.

• We initialize the Firebase app and messaging service.

• We set up a listener for background messages, which allows our app to receive messages even when it's not in the foreground.

• When a background message is received, we log it to the console and extract the notification title, body, and icon.

• Finally, we display the notification using the extracted title, body, and icon.

This code is essential for enabling push notifications in your web app with Firebase.

Now set up your firebase with NestJS:-

1. Create nestJS project and install firebase-admin package.

    //run this command 
    nest g resource fcm-notification //for creat fcm-notificatiob module
    npm install firebase-admin // for install firebase-admin to your project
   

2. Now go to fcm-notification.Service.ts

    import { Injectable } from '@nestjs/common';
    import * as admin from 'firebase-admin';
   
    admin.initializeApp({
      credential: admin.credential.cert({
        projectId: PROJECT-ID,  // replace with your app project-ID
        clientEmail: CLIENT-KEY, //replace with your app CLIENT-KEY
        privateKey: PRIVATE-KEy //replace with your app PRIVATE-KEy
      }),
    });
    @Injectable()
    export class FcmNotificationService {
      constructor() {
      }
    }
   

   Above code, we are importing admin is imported as a namespace from 'firebase-admin. Next admin.initializeApp({ ... }) initializes the Firebase Admin SDK with the provided configuration.
   To access your Admin SDK configuration details, navigate to your project settings and select 'Service accounts.' From there, you can generate a new private key in the form of a downloadable JSON file, which will serve as your admin SDK configuration. For reference, please consult the image below.

   

   Now add sending notification function to your service folder.

    import { Injectable } from '@nestjs/common';
    import * as admin from 'firebase-admin';
   
    admin.initializeApp({
      credential: admin.credential.cert({
        projectId: PROJECT-ID,  
        clientEmail: CLIENT-KEY,
        privateKey: PRIVATE-KEy
      }),
    });
    @Injectable()
    export class FcmNotificationService {
      constructor() {
      }
   
      async sendingNotificationOneUser(token:string) {
        const payload= {
          token: token
          notification: {
            title: "Hi there this is title",
            body: "Hi there this is message"
          },
          data: {
            name:"Joe",
            age:"21"
          }
          }
        return admin.messaging().send(payload).then((res)=>{
          return {
              success:true
          }
   
        }).catch((error)=>{
          return {
            success:false
          }
        })
      }
    }
   

   The sendingNotificationOneUser function sends a notification to a specific user. It uses the user's device token to target them, constructs the notification content (title, body, and additional data), and sends it through Firebase. If successful, it returns success: true; otherwise, it returns success: false.

3. Now go to Fcm-Notification.controller.ts.

    import { Controller, Get, Post, Body, Patch, Param, Delete } from '@nestjs/common';
    import { FcmNotificationService } from './fcm-notification.service';
   
    @Controller('firebase')
    export class FcmNotificationController {
      constructor(
        private readonly sendingNotificationService: FcmNotificationService,
       ) {}
   
      @Post('send-notification/')
      async sendNotidication(@Body() body:{ token: string }) {
      const {token}=body
       return await this.sendingNotificationService.sendingNotificationOneUser()
      }
    }
   

   In the code snippet provided, a route for sending notifications is defined in a NestJS controller. When a POST request is made to '/firebase/send-notification/', the function sendNotidication is called. It expects a JSON body with a 'token' field, which is passed to the sendingNotificationOneUser function from the FcmNotificationService. The result of the notification sending process is returned in the response.

Making a Request with Postman:-

That's all for now. I hope you find this tutorial helpful! Feel free to leave feedback or questions below, I would love to hear and work on them. Thank you :)

Benefits of Automated API Testing with Postman:

1. Time Efficiency: Automating API testing with Postman saves time by running tests automatically, freeing up resources to focus on other critical tasks.

2. Consistency: Automated testing ensures that API tests are performed consistently without manual errors, improving reliability and repeatability.

3. Faster Feedback: Rapid execution of test scripts allows for quick feedback on API changes, enabling developers to fix issues promptly.

4. Scalability: Postman supports testing multiple APIs simultaneously, making it suitable for projects of various sizes.

5. Integration with CI/CD: Automated API testing can be integrated into Continuous Integration and Continuous Deployment (CI/CD) pipelines, ensuring thorough testing at every code change.

If you're familiar with Postman basics, like sending requests and using collections, now let's dive into creating tests in Postman.

Writing test cases in Postman

Before writing test cases in Postman, ensure you have the following:

1. Postman is installed on your system.

2. A basic understanding of APIs and HTTP methods.

3. Familiarity with JSON (JavaScript Object Notation) for response validation.

Where to write test cases.

In Postman, you can write and organize your test cases using the "Tests" tab within the Postman request editor. Here's how you can write test cases in Postman:

• Create a Request: First, create a request by selecting the request type (GET, POST, PUT, DELETE, etc.) and entering the request URL along with any necessary headers, parameters, and request body.

• Navigate to the Tests Tab: After setting up the request details, click on the "Tests" tab located below the request editor. This is where you'll write your test scripts.

• Write Test Scripts: In the "Tests" tab, you can write JavaScript code to define your test scripts. These scripts will be executed after sending the request, and you can use them to validate the response received from the server.

Here's a simple example of a test script that checks if the response status code is 201:

COPY

pm.test("Response status code is 201", function () {
    pm.expect(pm.response.code).to.equal(201);
});

You can add more test scripts to validate various aspects of the response, such as response headers, response body, specific data values, etc.

• Run the Request: After writing your test scripts, you can click the "Send" button to send the request to the server. Postman will execute your test scripts and display the results in the "Tests Results" section below the request editor.

• 

• View Test Results: The test results will show you whether your test scripts passed or failed. If a test fails, Postman will provide information about the failure, which can help you identify the issues in your API.

• Organize Test Scripts: You can organize your test scripts by creating multiple requests within a Postman collection. Each request can have its own set of test scripts. Collections allow you to group related requests and tests together, making it easier to manage and run your test suite.

Remember that the examples provided here are basic illustrations. You can write more complex test scripts using various assertions and conditions based on your API testing needs.

Additionally, Postman offers documentation and tutorials to help you learn more about writing test scripts and performing API testing effectively.

Refer this article for common test scripts in postman 👉 Click Me

Integrate Postman automated testing with CI/CD

Now We’ll learn about How to integrate Postman automated testing with CI/CD of GitHub using Newman in the Nest JS Project.

Integrating Postman automated testing with CI/CD using Newman involves setting up a process that allows you to run Postman collections and tests automatically as part of your Continuous Integration and Continuous Deployment (CI/CD) pipeline. Newman is a command-line tool provided by Postman that allows you to run Postman collections from the command line, making it suitable for automation in CI/CD environments.

I’m assuming that you have already created a collection with test cases.

Here's a step-by-step guide on how to integrate Postman automated testing with CI/CD using Newman.

Generate Postman Collection API URL.

For generating Postman collection API Url, Follow the given steps:

1. Click on the “View More Actions“ button of the collection.

   

2. Click on the “Share“ Option

1. Choose the “Via API” option.

1. Copy the Postman API URL using copy button.

Your Collection API Generated Successfully.

Configure Your CI/CD Pipeline:

• You'll need to set up a job or stage that will run your Postman tests using Newman.

• In the pipeline configuration, you'll need to specify the commands to install Newman, run your tests, and possibly report the results.

To configure your CI/CD pipeline, Follow the given steps:

1. Create a .github folder in the root of the project.

1. Create the workflows folder inside the .github folder.

2. Create yourFileName.yml file inside the workflows folder.

1. Now, write a shell script to run your Postman tests as part of the build or test phase.

   COPY

     name: Test Nest.js Application
   
     on:
       push:
         branches:
           - create-company // Replace with your branch name
   
     jobs:
       run-and-test:
         runs-on: ubuntu-latest
         steps:
           - uses: actions/checkout@v2
           - name: Install Node.js
             uses: actions/setup-node@v2
             with:
               node-version: '18'
           - name: Install Nest.js CLI
             run: npm install -g @nestjs/cli
           - name: Install Dependencies
             run: npm install
           - name: Run Nest.js Application on Localhost
             run: npm run start:dev & sleep 10
           - name: Run API Tests with Newman
             run: |
               npm install -g newman
               newman run "Paste Generated Collection API Url"
   

In Postman, test scripts are written using JavaScript in the "Tests" tab after sending an API request. Each test script is associated with a specific API request and is executed automatically after the request is sent. The test script has access to the response data, request details, and various utility functions provided by Postman.

A basic test script structure looks like this:

// Test script
pm.test("Test Description", function () {
    // Assertion logic goes here
});

Common Test Scripts

1. Status Code Validation

// Test if the response status code is 200 (OK)
pm.test("Status code is 200", function () {
    pm.response.to.have.status(200);
});

2. Response Time Validation

// Test if the response time is less than 500ms
pm.test("Response time is within acceptable range", function () {
    pm.expect(pm.response.responseTime).to.be.below(500);
});

3. Response Body Validation

// Test if the response body contains a specific value
pm.test("Response body contains expected data", function () {
    pm.expect(pm.response.text()).to.include("expected_value");
});

4. JSON Response Validation

// Test if the response is a valid JSON
pm.test("Response is valid JSON", function () {
    pm.expect(pm.response.json()).to.be.an("object");
});

5. Header Validation

// Test if a specific header is present in the response
pm.test("Header is present in the response", function () {
    pm.response.to.have.header("header_name");
});

6. Chaining Tests

// Chaining multiple test assertions
pm.test("Chaining multiple assertions", function () {
    pm.expect(pm.response.json().property1).to.eql("value1");
    pm.expect(pm.response.json().property2).to.eql("value2");
});

7. Dynamic Data Validation

// Test if a specific value in the response matches the environment variable
pm.test("Dynamic data validation", function () {
    pm.expect(pm.response.json().user_id).to.eql(pm.environment.get("user_id"));
});

8. Setting data from the environment variable

var jsonData = pm.response.json();
pm.environment.set("companyIdToDelete", jsonData.data._id);

9. Response Schema Validation

// Test if the response adheres to a specific JSON schema
pm.test("Response schema validation", function () {
    const schema = {
        "type": "object",
        "properties": {
            "property1": { "type": "string" },
            "property2": { "type": "number" }
        }
    };
    pm.expect(tv4.validate(pm.response.json(), schema)).to.be.true;
});

10. Dynamic Response Validation

// Validate dynamic data in the response by extracting values from the response and using them in assertions.
// Extract a value from the response and use it in an assertion
pm.test("Dynamic response validation", function () {
    var responseBody = pm.response.json();
    var dynamicValue = responseBody.dynamic_property;

    pm.expect(dynamicValue).to.equal(pm.variables.get("expected_dynamic_value"));
});

11. API Versioning Validation

// Test different API versions
var apiVersion = "v2";
pm.test("API versioning validation", function () {
    pm.request.headers.add({ key: "Accept-Version", value: apiVersion });
    pm.sendRequest(function (response) {
        pm.expect(response.status).to.equal(200);
        pm.expect(response.json().version).to.equal(apiVersion);
    });
});

12. File Upload Validation

// Test file upload
pm.test("File upload validation", function () {
    var formData = {
        file: {
            value: pm.globals.get("fileData"),
            options: {
                filename: "sample.txt",
                contentType: "text/plain"
            }
        }
    };

    pm.sendRequest({
        url: "https://api.example.com/upload",
        method: "POST",
        body: formData
    }, function (response) {
        pm.expect(response.status).to.equal(200);
        pm.expect(response.json().success).to.be.true;
    });
});

13. Authentication and Authorization Testing

// Test authentication and authorization
pm.test("Authentication and authorization", function () {
    var authToken = pm.environment.get("authToken");

    pm.request.headers.add({ key: "Authorization", value: "Bearer " + authToken });
    pm.sendRequest(function (response) {
        pm.expect(response.status).to.equal(200);
        pm.expect(response.json().authorized).to.be.true;
    });
});

14. Data Extraction and Transformation

Extract data from the response and transform it for further use or validation.

// Extract and transform data from the response
pm.test("Data extraction and transformation", function () {
    var responseArray = pm.response.json().data;
    var transformedData = responseArray.map(function (item) {
        return {
            id: item.id,
            name: item.first_name + " " + item.last_name"
        };
    });

    // Use transformed data for assertions or environment variables
    pm.expect(transformedData[0].name).to.include("John");
    pm.environment.set("transformedData", JSON.stringify(transformedData));
});

15. Session Management

//Simulate session management by saving and reusing session tokens.
// Session management using session tokens
var sessionToken;

pm.test("Login and session management", function () {
    // Perform login and extract session token from the response
    sessionToken = pm.response.json().session_token;
    pm.environment.set("sessionToken", sessionToken);
});

pm.test("Authenticated request using session token", function () {
    // Use the saved session token for authenticated requests
    pm.request.headers.add({ key: "Authorization", value: "Bearer " + sessionToken });
    pm.sendRequest(function (response) {
        pm.expect(response.status).to.equal(200);
    });
});

16. Pagination Testing

// Test APIs that return paginated results and validate pagination logic.
// Pagination testing
pm.test("Pagination testing", function () {
    var response = pm.response.json();
    var currentPage = response.page;
    var totalPages = response.total_pages;

    // Validate pagination logic
    pm.expect(currentPage).to.be.at.least(1);
    pm.expect(currentPage).to.be.at.most(totalPages);
});

17. Load Testing

//Perform load testing by sending multiple concurrent requests.
// Load testing with concurrent requests
var concurrentRequests = 10;

pm.test("Load testing", function () {
    var requests = [];

    for (var i = 0; i < concurrentRequests; i++) {
        requests.push(pm.sendRequest);
    }

    Promise.all(requests).then(function (responses) {
        responses.forEach(function (response) {
            pm.expect(response.status).to.equal(200);
        });
    });
});

18. Database Validation

// Validate API responses by comparing them with data from a database.
// Database validation using a mock database
var mockDatabase = [
    { id: 1, name: "Item 1" },
    { id: 2, name: "Item 2" }
];

pm.test("Database validation", function () {
    var response = pm.response.json();

    mockDatabase.forEach(function (item) {
        var matchingItem = response.find(function (responseItem) {
            return responseItem.id === item.id;
        });

        pm.expect(matchingItem.name).to.equal(item.name);
    });
});

You can generate test cases using Postbot, which is located in the top right corner of the test case writing area.

You can write more complex test scripts using various assertions and conditions based on your API testing needs. Postman offers documentation and tutorials to help you learn more about writing test scripts and performing API testing effectively.

Redux

Redux is a predictable state container for JavaScript applications, primarily used with React. It's known for its unidirectional data flow and centralized state management. Here are some scenarios where Redux shines:

1. Large-scale Applications: Redux is an excellent choice for complex applications with a vast amount of state. Its centralized store ensures that state changes are predictable and traceable.

2. Shared State: When multiple components need access to the same state, Redux's global store eliminates the need for prop drilling or context sharing. This is especially beneficial in deeply nested component hierarchies.

3. Time-Travel Debugging: Redux provides a powerful debugging tool called "time-travel debugging," allowing you to step backward and forward through state changes. This is invaluable for debugging complex applications.

4. Middleware Integration: Redux's middleware architecture allows you to incorporate features like asynchronous actions, logging, and more seamlessly.

5. Strict Data Flow: Redux enforces a strict unidirectional data flow, making it easier to reason about your application's state changes and maintain a predictable state.

Context API

The Context API is a part of React itself and provides a way to share values like themes, user data, or localization preferences throughout the component tree without prop drilling. Here are some scenarios where the Context API is a suitable choice:

1. Small to Medium-sized Applications: For relatively simple applications where state management needs are not overly complex, the Context API can simplify the development process.

2. Local Component State: When state is needed only within a single component or a limited subtree of the component hierarchy, using the Context API can reduce unnecessary complexity.

3. Avoiding Prop Drilling: If you find yourself passing props down through multiple levels of components and it becomes cumbersome, the Context API can be a cleaner solution for sharing data.

4. Quick Prototyping: For rapid prototyping or small projects, the Context API can help you get started quickly without the overhead of setting up Redux.

5. React-specific Use Cases: If you are building a library or framework that integrates deeply with React and needs to manage its own state contextually, the Context API may be the preferred choice.

When to Choose Both

In some cases, you may find that using both Redux and the Context API is the best approach. For instance:

1. Mixed State Requirements: If your application has a mix of global and local state needs, you can use Redux for global state and the Context API for local component state.

2. Integration with Legacy Code: When working on a project that already uses Redux, but wants to leverage the simplicity of the Context API for certain components, you can use them in parallel.

3. Migration Planning: If you're transitioning from one state management solution to another, you can gradually refactor your application to use the new approach where it makes the most sense.

Conclusion

The choice between Redux and the Context API depends on the specific needs of your project. Redux excels in managing large-scale applications with shared state and offers powerful debugging tools. On the other hand, the Context API is ideal for smaller applications, local state management, and avoiding prop drilling.

Remember that you don't need to limit yourself to just one approach. In many cases, a combination of both Redux and the Context API can provide the flexibility and simplicity required to build effective and maintainable React applications. The key is to assess your project's requirements and choose the solution that best fits your needs.