https://github.com/pintu544/product-app-api

There should be an input field where you have to add the name of the product. There should be a button to add that name in the list Clicking on the button should make an api call to insert item in the backend
https://github.com/pintu544/product-app-api

msw react-hooks react-router reactjs typescript

Last synced: 6 days ago
JSON representation

There should be an input field where you have to add the name of the product. There should be a button to add that name in the list Clicking on the button should make an api call to insert item in the backend

• Host: GitHub
• URL: https://github.com/pintu544/product-app-api
• Owner: pintu544
• Created: 2023-10-21T13:31:40.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2023-10-21T13:35:03.000Z (about 1 year ago)
• Last Synced: 2024-04-13T23:09:58.444Z (8 months ago)
• Topics: msw, react-hooks, react-router, reactjs, typescript
• Language: TypeScript
• Homepage:
• Size: 182 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


  

  

  

  


**# Product App

A simple React application that allows users to add product names and displays them in a list. This app demonstrates the usage of React with TypeScript, integration with a mock API using MSW,  and unit testing with React Testing Library.

Home Page



View Page



Prerequisites





Node.js installed on your system





Git (optional)





Installation



Clone the repository to your local machine (or download the ZIP file and extract it):





git clone <repository-url>






Navigate to the project directory:





cd product-app






Install dependencies using npm or yarn:





npm install


# or

yarn install



Usage

Running the Application



Start the development server:





npm start


# or

yarn start





Open your browser and go to http://localhost:3000 to view the application.



Project Structure





src/: Contains the source code of the application.





components/: Reusable UI components.





App.tsx: Main application component.





index.tsx: Entry point of the application.

public/: Static assets and HTML template.





mocks/: MSW mock API handlers.





Dependencies





@reduxjs/toolkit: Redux toolkit for efficient Redux development (optional).





axios: HTTP client for making API requests.





msw: Mock Service Worker for intercepting and mocking API requests in development.





react-router-dom: React router for managing navigation in the application.





react-redux: Official React bindings for Redux (optional).





@testing-library/react: Testing utilities for React applications.





@types/jest, @types/react, @types/react-dom: Type definitions for Jest and React.





Running Unit Tests

Run unit tests using the following command:



npm  test


# or

yarn  test



This will execute all the tests and provide feedback on the test coverage and results.