{"id":19871714,"url":"https://github.com/hhimanshu/rapid-front-end-development","last_synced_at":"2026-04-17T05:02:10.827Z","repository":{"id":49038679,"uuid":"365253532","full_name":"hhimanshu/rapid-front-end-development","owner":"hhimanshu","description":"How to work with Mock Service Worker when using REST APIs","archived":false,"fork":false,"pushed_at":"2021-05-18T13:37:43.000Z","size":4216,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-01T00:56:51.080Z","etag":null,"topics":["jest","mock-service-worker","msw","mswjs","react-query","storybook","tyepscript"],"latest_commit_sha":null,"homepage":"rapid-front-end-development.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hhimanshu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-05-07T14:06:46.000Z","updated_at":"2022-01-04T03:06:48.000Z","dependencies_parsed_at":"2022-07-26T07:47:48.948Z","dependency_job_id":null,"html_url":"https://github.com/hhimanshu/rapid-front-end-development","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":"hhimanshu/create-react-ts-starter","purl":"pkg:github/hhimanshu/rapid-front-end-development","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hhimanshu%2Frapid-front-end-development","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hhimanshu%2Frapid-front-end-development/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hhimanshu%2Frapid-front-end-development/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hhimanshu%2Frapid-front-end-development/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hhimanshu","download_url":"https://codeload.github.com/hhimanshu/rapid-front-end-development/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hhimanshu%2Frapid-front-end-development/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31915900,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-16T18:22:33.417Z","status":"online","status_checked_at":"2026-04-17T02:00:06.879Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["jest","mock-service-worker","msw","mswjs","react-query","storybook","tyepscript"],"created_at":"2024-11-12T16:13:15.877Z","updated_at":"2026-04-17T05:02:10.767Z","avatar_url":"https://github.com/hhimanshu.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Rapid Front-end Development\n\n## Goal\n\nIt is very common in a web-development lifecycle to work on a feature that touches the full-stack - database, backend\nlogic, backend APIs, front-end logic, front-end views. Often times, a feature is scoped in the same sprint (a duration\nof a feature conception to completion). This presents challenges related to work parallelization. Most times the teams\nare divided functionally - front-end, backend, and therefore front-end team has dependency until backend team has\nfinished the work and published an API.\n\nThe goal of this project is to demonstrate that the work can happen in parallel as long as the API contract, or the\nhand-off between the front-end and backend team is put in place.\n\n## The Idea\n\nOnce the API contract is defined mocked data (realistic to business domain) is created and used by the front-end team to\nkick off their work. For simplicity, HTTP GET requests are demonstrated in this codebase because of 2 reasons\n\n1. Any project has most HTTP GET requests to make than HTTP POST/PUT/DELETE commands\n2. It takes of the burden in this demo to set up a database server to store the information (those can be mocked too,\n   however)\n\nThe main idea is that when developing the feature the project workflow will be following\n![Development Workflow](docs/images/dev.jpeg)\n\nIn this workflow, no calls are made to the server. There is no point because the server team is working on creating the\nAPI infrastructure. However, this ***does not block*** front-end team to make progress. When both teams are done with\ntheir work, the API workflow could be tested using the following workflow\n![Production Workflow](docs/images/prod.jpeg)\n\nThis approach helps both teams make progress in the same sprint.\n\n## How is it achieved?\n\nThis project captures the requests at the network level by\nleveraging [Service Worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API). Specifically, this\nproject utilizes [Mock Service Worker (MSW)](https://mswjs.io/). The best part fo this integration is that you still\nmake the same API calls as you would in production, however, depending on which environment you are in, the responses\nwill be either mocked or **real**. You can capture the HTTP requests and debug them if you like.\n\nYou can watch the demo on YouTube by clicking on the following link\n[![YouTube Demo](docs/images/demo.jpeg)](https://youtu.be/1TRh7G__JKk \"Develop Front-end Faster\")\n\n## Technologies Used\n\n1. ReactJS with TypeScript, for entire development\n2. Jest for testing\n3. Mock Service Worker, for API level interception\n4. Vercel for deploying front-end (this project) and backend (production APIs). The backend codebase is available\n   separately at [GitHub](https://github.com/hhimanshu/businesses) and it contains the APIs listed on Vercel.\n5. React-Query for fetching HTTP APIs\n6. Chakra-UI for UI components\n\n## Project Structure\n\n`api/`\n\n- contains HTTP APIs that the project will call. It also contains a utility `constants.ts` that is responsible for 2\n  things\n    * Abstracting API endpoints and routes from rest of the codebase\n    * Identifying environment to return the right URL when asked for\n\n`components/`\n\n- contains all views that a user would be looking in the app. The goal should be send them data so that they only work\n  on presentation aspects of the system\n\n`containers/`\n\n- responsible for connecting data (calling fetch, data massaging) with views (`/components`).\n\n`mocks/`\n\n- contains the mocked data based on the API contract decided with the backend team\n- contains handlers that are functions that return mocked data when serviceworker asks for. You can learn more about the\n  handlers at [official documentation of MSW](https://mswjs.io/docs/basics/request-handler)\n\n`shared/`\n\n- contains `lib/types.ts` that contains domain models to be used with in the application.\n- contains helper functions that are useful for the application\n\n`stories/`\n\n- contains storybook integration, but no work was done in this regard for this goal.\n\n## How to run?\n\n- Clone this repository\n- Run `npm install` to install necessary dependencies\n- Run `npm start` to start development server. This will make all API requests against mocked data. Follow steps shown\n  in YouTube demo for confirmation\n- Run `npm run test:watch` to run Jest tests in watch mode\n- Run `npm run build` to create a production build in `dist/` directory\n- Run `npm run prod`. This runs the production build against the production API, which is currently based on\n  other [GitHub repo](https://github.com/hhimanshu/businesses). You can change this URL\n  at [constant.ts](src/api/constants.ts)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhhimanshu%2Frapid-front-end-development","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhhimanshu%2Frapid-front-end-development","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhhimanshu%2Frapid-front-end-development/lists"}