{"id":20036450,"url":"https://github.com/taiseen/react-node-chat-app","last_synced_at":"2026-04-16T10:32:22.509Z","repository":{"id":68005767,"uuid":"495579836","full_name":"taiseen/react-node-chat-app","owner":"taiseen","description":"This app is developing by the help of JSM","archived":false,"fork":false,"pushed_at":"2022-05-25T20:06:25.000Z","size":6982,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-02T06:19:18.223Z","etag":null,"topics":["jsm","node-js","react-js","socket-io","socket-io-client"],"latest_commit_sha":null,"homepage":"https://chat-app-bd.netlify.app","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/taiseen.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}},"created_at":"2022-05-23T21:31:12.000Z","updated_at":"2022-11-17T01:28:12.000Z","dependencies_parsed_at":null,"dependency_job_id":"30b0d3b7-f7ab-4a72-bad4-c6cd3578ae0c","html_url":"https://github.com/taiseen/react-node-chat-app","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/taiseen/react-node-chat-app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taiseen%2Freact-node-chat-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taiseen%2Freact-node-chat-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taiseen%2Freact-node-chat-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taiseen%2Freact-node-chat-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/taiseen","download_url":"https://codeload.github.com/taiseen/react-node-chat-app/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taiseen%2Freact-node-chat-app/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267536251,"owners_count":24103459,"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-07-28T02:00:09.689Z","response_time":68,"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":["jsm","node-js","react-js","socket-io","socket-io-client"],"created_at":"2024-11-13T10:12:38.811Z","updated_at":"2026-04-16T10:32:17.451Z","avatar_url":"https://github.com/taiseen.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg src=\"./client/public/readme.png\" style='width:175px' align=\"right\" /\u003e\n\n\u003e 24 - May - 2022\n\n## Chat App | [Live Link][client]\n\n# React + Node.js\n\n## [Frontend][client] | [Backend][server] \n\n\n## 📝 Instruction of using this Chat App \n```jsx\nJust Open this 'Live Link' as 1st tab into your browser \u0026 give 'userName' + 'roomName'\n\u0026 open this same 'Live Link' in another (2nd) tab of your browser...\n\u0026 this time give a different 'userName' but 'same roomName' that you give before, \nwhen you open this chat app through (1st) tab into your browser.\n\nin-shot: 'userName' must be different \u0026 'roomName' must be same...\n\nNow start testing \u0026 chatting... \n\nHappy Chatting!... 😎😊😎\n```\n\n\u003cbr/\u003e\n\n# FrontEnd - Dependencies...\n|No| Package Installs               | Usage for                             |\n|--|--------------------------------|---------------------------------------|\n| 1| yarn add `react-route-dom`     | declarative routing in react web app  |\n| 2| yarn add `socket.io-client`    | for component navigation              |\n| 3| yarn add `query-string`        | Parse and stringify URL query strings |\n| 4| yarn add `react-emoji`         | An emoji mixin for React              |\n| 5| yarn add `react-scroll-to-bottom`   | React container that will auto scroll to bottom |\n\n\u003cbr/\u003e\n\n# BackEnd - Dependencies...\n|No| Package Installs       | Use for                                       |\n|--|------------------------|-----------------------------------------------|\n| 1| yarn add `cors`        | enabling Cors origin request                  |\n| 2| yarn add `express`     | creating routing for application              |\n| 3| yarn add `nodemon`     | changing happen, server restart automatically |\n| 4| yarn add `socket.io`   | real time data transfer                       |\n\n\u003cbr/\u003e\n\n    🟨\n    ├── client \n    │   ├── public              # root div#id for react app\n    │   └── src\n    |       ├── components      # all needful components \n    |       ├── style           # reset base styling\n    |       ├── App.js          # Router for navigate inside app\n    |       └── index.js        # client - app running start point\n    | \n    ├── server\n    │   ├── client\n    |   |   └── users.js        # temporary user database inside array \n    │   ├── public              # all static assets are present here\n    │   └── index.js            # server - app running start point\n    |\n    ├── .gitignore\n    ├── license\n    └── README.md\n    🟨\n\n# Learning context by developing this application:\n|No| Context learn by building this project...    | \n|--|----------------------------------------------|\n| 1| Project Structure                            | \n| 2| ReadMe file styling at new way               |\n| 3| FrontEnd + BackEnd Connectivity              | \n| 4| FrontEnd + BackEnd Full Deployment           | \n| 5| HTTP Server + Express + `Socket.io`          |\n| 6| Client + Server data passing by `Socket.io`  |\n| 7| Life Cycle Method `useEffect` Hook + cline-up| \n| 8| users[array] data manipulation by helper function's() |\n| 9| using of `.on()` + `.emit()` method from `Socket.io`  |\n|10| usage of `socket.broadcast.to`(chatRoom)`.emit`('message', {data})|\n\n\n    \nLearning by inspired from[.](https://youtu.be/ZwFA3YMfkoc)\n\n\n## 📜 License under the [MIT License](license)\n\n\n[client]: https://chat-app-bd.netlify.app\n[server]: https://react-node-chat-app-bd.herokuapp.com","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftaiseen%2Freact-node-chat-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftaiseen%2Freact-node-chat-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftaiseen%2Freact-node-chat-app/lists"}