{"id":23175888,"url":"https://github.com/pintu544/product-app-api","last_synced_at":"2026-05-07T01:35:17.231Z","repository":{"id":202762363,"uuid":"708084110","full_name":"pintu544/product-app-api","owner":"pintu544","description":"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","archived":false,"fork":false,"pushed_at":"2023-10-21T13:35:03.000Z","size":186,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-06T21:43:27.165Z","etag":null,"topics":["msw","react-hooks","react-router","reactjs","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pintu544.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-10-21T13:31:40.000Z","updated_at":"2023-10-21T13:33:23.000Z","dependencies_parsed_at":null,"dependency_job_id":"7d649563-e3f9-466f-bf30-182b100a24b0","html_url":"https://github.com/pintu544/product-app-api","commit_stats":null,"previous_names":["pintu544/product-app-api"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/pintu544/product-app-api","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pintu544%2Fproduct-app-api","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pintu544%2Fproduct-app-api/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pintu544%2Fproduct-app-api/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pintu544%2Fproduct-app-api/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pintu544","download_url":"https://codeload.github.com/pintu544/product-app-api/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pintu544%2Fproduct-app-api/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32719570,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-07T00:29:05.620Z","status":"ssl_error","status_checked_at":"2026-05-07T00:28:57.074Z","response_time":117,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["msw","react-hooks","react-router","reactjs","typescript"],"created_at":"2024-12-18T06:10:18.436Z","updated_at":"2026-05-07T01:35:17.202Z","avatar_url":"https://github.com/pintu544.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\n\u003chead\u003e\n  \u003cmeta charset=\"utf-8\"\u003e\n  \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n  \u003clink rel=\"stylesheet\" href=\"https://stackedit.io/style.css\" /\u003e\n\u003c/head\u003e\n\n\u003cbody class=\"stackedit\"\u003e\n  \u003cdiv class=\"stackedit__html\"\u003e\u003cp\u003e**# Product App\u003c/p\u003e\n\u003cp\u003eA 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.\u003c/p\u003e\n\u003ch2 id=\"home-page\"\u003eHome Page\u003c/h2\u003e\n\u003cp\u003e\u003ca target=\"_blank\" href=\"https://imageupload.io/5xHYdvZUkXfYYsS\"\u003e\u003cimg src=\"https://imageupload.io/ib/x9IPsdQaLrsx9hV_1697894713.png\" alt=\"Screenshot (651).png\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003ch2 id=\"view-page\"\u003eView Page\u003c/h2\u003e\n\u003cp\u003e\u003ca target=\"_blank\" href=\"https://imageupload.io/qtQqmOYCRj4qYvM\"\u003e\u003cimg src=\"https://imageupload.io/ib/5DQ5fcNvhel4X1V_1697894753.png\" alt=\"Screenshot (652).png\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003ch2 id=\"prerequisites\"\u003ePrerequisites\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cp\u003eNode.js installed on your system\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003eGit (optional)\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"installation\"\u003eInstallation\u003c/h2\u003e\n\u003col\u003e\n\u003cli\u003eClone the repository to your local machine (or download the ZIP file and extract it):\u003c/li\u003e\n\u003c/ol\u003e\n\u003cpre class=\" language-sh\"\u003e\u003ccode class=\"prism  language-sh\"\u003e\ngit clone \u0026lt;repository-url\u0026gt;\n\n\u003c/code\u003e\u003c/pre\u003e\n\u003col start=\"2\"\u003e\n\u003cli\u003eNavigate to the project directory:\u003c/li\u003e\n\u003c/ol\u003e\n\u003cpre class=\" language-sh\"\u003e\u003ccode class=\"prism  language-sh\"\u003e\ncd product-app\n\n\u003c/code\u003e\u003c/pre\u003e\n\u003col start=\"3\"\u003e\n\u003cli\u003eInstall dependencies using npm or yarn:\u003c/li\u003e\n\u003c/ol\u003e\n\u003cpre class=\" language-sh\"\u003e\u003ccode class=\"prism  language-sh\"\u003e\nnpm install\n\n# or\n\nyarn install\n\n\u003c/code\u003e\u003c/pre\u003e\n\u003ch2 id=\"usage\"\u003eUsage\u003c/h2\u003e\n\u003ch3 id=\"running-the-application\"\u003eRunning the Application\u003c/h3\u003e\n\u003col\u003e\n\u003cli\u003eStart the development server:\u003c/li\u003e\n\u003c/ol\u003e\n\u003cpre class=\" language-sh\"\u003e\u003ccode class=\"prism  language-sh\"\u003e\nnpm start\n\n# or\n\nyarn start\n\n\u003c/code\u003e\u003c/pre\u003e\n\u003col start=\"2\"\u003e\n\u003cli\u003eOpen your browser and go to \u003ccode\u003ehttp://localhost:3000\u003c/code\u003e to view the application.\u003c/li\u003e\n\u003c/ol\u003e\n\u003ch3 id=\"project-structure\"\u003eProject Structure\u003c/h3\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cp\u003e\u003cstrong\u003e\u003ccode\u003esrc/\u003c/code\u003e\u003c/strong\u003e: Contains the source code of the application.\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003cstrong\u003e\u003ccode\u003ecomponents/\u003c/code\u003e\u003c/strong\u003e: Reusable UI components.\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003cstrong\u003e\u003ccode\u003eApp.tsx\u003c/code\u003e\u003c/strong\u003e: Main application component.\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003cstrong\u003e\u003ccode\u003eindex.tsx\u003c/code\u003e\u003c/strong\u003e: Entry point of the application.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e\u003ccode\u003epublic/\u003c/code\u003e\u003c/strong\u003e: Static assets and HTML template.\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003cstrong\u003e\u003ccode\u003emocks/\u003c/code\u003e\u003c/strong\u003e: MSW mock API handlers.\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3 id=\"dependencies\"\u003eDependencies\u003c/h3\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cp\u003e\u003cstrong\u003e\u003ccode\u003e@reduxjs/toolkit\u003c/code\u003e\u003c/strong\u003e: Redux toolkit for efficient Redux development (optional).\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003cstrong\u003e\u003ccode\u003eaxios\u003c/code\u003e\u003c/strong\u003e: HTTP client for making API requests.\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003cstrong\u003e\u003ccode\u003emsw\u003c/code\u003e\u003c/strong\u003e: Mock Service Worker for intercepting and mocking API requests in development.\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003cstrong\u003e\u003ccode\u003ereact-router-dom\u003c/code\u003e\u003c/strong\u003e: React router for managing navigation in the application.\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003cstrong\u003e\u003ccode\u003ereact-redux\u003c/code\u003e\u003c/strong\u003e: Official React bindings for Redux (optional).\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003cstrong\u003e\u003ccode\u003e@testing-library/react\u003c/code\u003e\u003c/strong\u003e: Testing utilities for React applications.\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003cstrong\u003e\u003ccode\u003e@types/jest\u003c/code\u003e\u003c/strong\u003e, \u003cstrong\u003e\u003ccode\u003e@types/react\u003c/code\u003e\u003c/strong\u003e, \u003cstrong\u003e\u003ccode\u003e@types/react-dom\u003c/code\u003e\u003c/strong\u003e: Type definitions for Jest and React.\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3 id=\"running-unit-tests\"\u003eRunning Unit Tests\u003c/h3\u003e\n\u003cp\u003eRun unit tests using the following command:\u003c/p\u003e\n\u003cpre class=\" language-sh\"\u003e\u003ccode class=\"prism  language-sh\"\u003e\nnpm  test\n\n# or\n\nyarn  test\n\n\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003eThis will execute all the tests and provide feedback on the test coverage and results.\u003c/p\u003e\n\u003c/div\u003e\n\u003c/body\u003e\n\n\u003c/html\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpintu544%2Fproduct-app-api","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpintu544%2Fproduct-app-api","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpintu544%2Fproduct-app-api/lists"}