{"id":22994361,"url":"https://github.com/donadam2/frontend-socket-io","last_synced_at":"2025-09-11T08:40:52.475Z","repository":{"id":125808125,"uuid":"332191895","full_name":"DonAdam2/frontend-socket-io","owner":"DonAdam2","description":"This app shows  you how to use socket.io-client with @reduxjs/toolkit","archived":false,"fork":false,"pushed_at":"2025-07-29T09:19:14.000Z","size":4013,"stargazers_count":6,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-08-13T22:39:46.753Z","etag":null,"topics":["react","redux-toolkit","scss","socket-io-client","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/DonAdam2.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-01-23T11:17:23.000Z","updated_at":"2025-07-29T09:19:18.000Z","dependencies_parsed_at":"2023-11-09T13:32:12.063Z","dependency_job_id":"1b100751-2c9c-4403-bdaa-3b57e85d275c","html_url":"https://github.com/DonAdam2/frontend-socket-io","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":"DonAdam2/webpack-react-boilerplate","purl":"pkg:github/DonAdam2/frontend-socket-io","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DonAdam2%2Ffrontend-socket-io","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DonAdam2%2Ffrontend-socket-io/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DonAdam2%2Ffrontend-socket-io/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DonAdam2%2Ffrontend-socket-io/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DonAdam2","download_url":"https://codeload.github.com/DonAdam2/frontend-socket-io/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DonAdam2%2Ffrontend-socket-io/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274602657,"owners_count":25315204,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-11T02:00:13.660Z","response_time":74,"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":["react","redux-toolkit","scss","socket-io-client","webpack"],"created_at":"2024-12-15T05:17:58.407Z","updated_at":"2025-09-11T08:40:52.456Z","avatar_url":"https://github.com/DonAdam2.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## overview:\n\n- This app is the frontend of [this repository](https://github.com/DonAdam2/backend-socket-io)\n- Simple react app which shows how to integrate **socket.io-client** with **@reduxjs/toolkit**\n\n## This app has the following:\n\n- Singleton socket client which has all socket functions (connect, disconnect, emit and on)\n  - **Note:** Using singleton pattern to make sure that we have a single instance throughout the app \n- Create an instance of socket client in **index.jsx** file and use it throughout the app\n- Use **createAsyncThunk** from **@reduxjs/toolkit** because it creates the following 3 types automatically (pending, fulfilled, rejected)\n\n## Created using:\n\n- webpack\n- react\n- @reduxjs/toolkit\n- socket.io-client\n\n## Prerequisites:\n\n- nodeJS \u003e 14.X.X or Docker\n\n## Installing / Getting Started:\n\n### Development:\n\n- Clone repo =\u003e `git clone git@github.com:DonAdam2/frontend-socket-io.git`\n- Navigate to project directory `cd frontend-socket-io`\n- Install dependencies =\u003e `yarn install`\n- Start the development server =\u003e `yarn start`\n\n## Configuring Prettier\n\nThis build relies on [Prettier formatter](https://prettier.io/) to enforce code style. And [ESLint](https://eslint.org/) for identifying problematic patterns found in the code.\n\n- Setting up prettier:\n\n  1- You can find steps on how to set up prettier formatter with WebStorm/PhpStorm [here](https://prettier.io/docs/en/webstorm.html#running-prettier-on-save-using-file-watcher).\n\n  **Notes**:\n\n    - It's better to use the local `node_modules` version of prettier instead of a global one, to avoid version conflicts (in case the globally installed version does not match the version specified in `package.json`).\n\n  2- Follow the next steps to set up **prettier** and **eslint** in **_VS Code_**:\n\n    - Install `prettier` plugin\n\n    - Install `eslint` plugin\n\n    - Open **_VS Code settings_** `CTRL + ,`:\n\n      a- Search for `formatter` =\u003e check **Format on save**\n\n      b- Search for `prettier` =\u003e add `.prettierrc` in **_Prettier: Config Path_** section \u0026\u0026 check **_Prettier: Require Config_**\n\n  3- Please refer to other tutorials if you are using a different IDE.\n\n## Available Scripts\n\nIn the project directory, you can run:\n\n### `yarn start`\n\nRuns the app in the development mode.\u003cbr\u003e\nIt will open [http://localhost:3000](http://localhost:3000) automatically in the browser to see your app.\n\nAll changes will be injected automatically without reloading the page.\u003cbr\u003e\n\nYou will see in the console the following:\n\n- All redux store related changes\n- Any of the following errors:\n    1. Linting errors.\n    2. Code format errors (because of [prettier](https://prettier.io/))\n\n### `yarn build`\n\nBuilds the app for production to the `dist` folder.\u003cbr\u003e\nIt correctly bundles React in production mode and optimizes the build for the best performance.\n\nThe build is minified and the filenames include the hashes.\u003cbr\u003e\nYour app is ready to be deployed!\n\n### `yarn build:serve`\n\nServes the app on `http://localhost:8080/` from the `dist` folder to check the production version.\n\n**_Note:_** Use this script only if you ran the build script `yarn build`.\n\n### `yarn analyze-bundle`\n\nIt allows you to analyze the bundle size.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdonadam2%2Ffrontend-socket-io","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdonadam2%2Ffrontend-socket-io","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdonadam2%2Ffrontend-socket-io/lists"}