{"id":14961228,"url":"https://github.com/chnirt/react-sendbird-messenger","last_synced_at":"2025-07-06T00:05:36.541Z","repository":{"id":37184516,"uuid":"292461935","full_name":"chnirt/react-sendbird-messenger","owner":"chnirt","description":"ReactJS (React-router-dom v6 + Antdesign + Firebase + Sendbird + Sentry) codebase containing real world examples (CRUD, auth, advanced patterns, etc).","archived":false,"fork":false,"pushed_at":"2023-01-06T14:11:18.000Z","size":32671,"stargazers_count":52,"open_issues_count":21,"forks_count":17,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-07-06T00:05:22.234Z","etag":null,"topics":["antdesign","circleci","cra","filter","firebase","framer-motion","githubci","husky","i18next","react","react-hooks","react-router-dom-v6","sendbird","sentry","ssl"],"latest_commit_sha":null,"homepage":"https://react-sendbird-messenger.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chnirt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2020-09-03T04:02:50.000Z","updated_at":"2024-06-01T08:21:01.000Z","dependencies_parsed_at":"2023-02-06T05:01:33.312Z","dependency_job_id":null,"html_url":"https://github.com/chnirt/react-sendbird-messenger","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/chnirt/react-sendbird-messenger","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chnirt%2Freact-sendbird-messenger","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chnirt%2Freact-sendbird-messenger/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chnirt%2Freact-sendbird-messenger/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chnirt%2Freact-sendbird-messenger/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chnirt","download_url":"https://codeload.github.com/chnirt/react-sendbird-messenger/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chnirt%2Freact-sendbird-messenger/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263827343,"owners_count":23516789,"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","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":["antdesign","circleci","cra","filter","firebase","framer-motion","githubci","husky","i18next","react","react-hooks","react-router-dom-v6","sendbird","sentry","ssl"],"created_at":"2024-09-24T13:24:14.479Z","updated_at":"2025-07-06T00:05:36.520Z","avatar_url":"https://github.com/chnirt.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SendBird messenger\n\n\u003cimg src=\"src/assets/images/banners/default.png\" alt=\"sendbird-messenger\"\u003e\n\n## [Demo](https://react-sendbird-messenger.vercel.app/)\n\n\u003cimg src=\"src/assets/images/demo/mobile.gif\" alt=\"mobile\"\u003e\n\u003cimg src=\"src/assets/images/demo/web.gif\" alt=\"web\"\u003e\n\n## Life cycle processes\n\n\u003c!-- [![CircleC](https://circleci.com/gh/chnirt/react-sendbird-messenger.svg?style=svg)](https://circleci.com/gh/chnirt/react-sendbird-messenger) --\u003e\n\n![CI/CD](https://github.com/chnirt/react-sendbird-messenger/workflows/GithubCI/badge.svg)\n[![GitHub issues](https://img.shields.io/github/issues/chnirt/react-sendbird-messenger)](https://github.com/chnirt/react-sendbird-messenger/issues)\n[![GitHub forks](https://img.shields.io/github/forks/chnirt/react-sendbird-messenger)](https://github.com/chnirt/react-sendbird-messenger/network)\n[![GitHub stars](https://img.shields.io/github/stars/chnirt/react-sendbird-messenger)](https://github.com/chnirt/react-sendbird-messenger/stargazers)\n[![GitHub license](https://img.shields.io/github/license/chnirt/react-sendbird-messenger)](https://github.com/chnirt/react-sendbird-messenger)\n\n## Tasks: 1 Sep, 2020 ~ Now\n\n-   [x] Design login, register, dashboard\n-   [x] Router-router-dom v6\n-   [x] Custom components\n-   [x] useAuth\n-   [x] useFirebase\n-   [x] useSendBird\n-   [x] Multiple Environment\n-   [x] Constants\n-   [x] Convert js --\u003e jsx\n-   [x] Generate ssl\n-   [x] Start https with ssl\n-   [x] Pre-commit with husky\n-   [x] CircleCI, GithubCI\n-   [x] Analyze source\n-   [x] I18n\n-   [x] Dark mode - css one line\n-   [x] Sentry - error tracking\n\n-   [ ] Filter firebase\n-   [x] Design settings\n-   [x] DTO\n-   [x] Mock data - https://mockapi.io/projects/5f0ea5f8faef3500160b8664\n-   [ ] Full testing\n-   [ ] Lazy image\n-   [x] Scroll to bottom\n-   [x] Load more\n-   [x] Responsive mobile\n-   [x] Design calling\n-   [x] Calling\n-   [x] Custom console.log for dev, prod\n-   [x] Animation with Framer\n-   [x] message status: Sent, Delivered, Seen\n-   [x] Integrate Electron - Desktop app\n\n## Prepare!!!\n\n-   Register an account [Firebase](https://firebase.google.com/) and [Sendbird](https://dashboard.sendbird.com/auth/signup) and [Sentry](https://sentry.io/signup/) (optional)\n-   Firebase: Create Project -\u003e Authentication -\u003e Sign-in-method -\u003e Sign-in providers -\u003e Email/Password -\u003e Enabled\n-   Sendbird: Create Application -\u003e Settings -\u003e Chat -\u003e Features -\u003e Enable all features\n-   Prepare environment for .env like .env.sample\n\n## Installation\n\n1. clone repository\n\n```\n  git clone https://github.com/chnirt/react-sendbird-messenger.git\n```\n\n2. cd into directory\n\n```\n  cd react-sendbird-messenger/\n```\n\n3. create .env\n\n```\n  touch .env\n```\n\n4. add to .env\n\n```\n  PORT=\u003cyour-port\u003e\n  ...\n```\n\n5. install dependencies using npm\n\n```\n  npm i\n```\n\n## Starting the Server\n\n1. Start in development normal\n\n```\n  npm run start\n```\n\n### Learn more\n\n-   React Router v6 Preview: https://reacttraining.com/blog/react-router-v6-pre/\n\n-   React — Environment specific builds using .env with CRA and env-cmd: https://medium.com/@rishi.vedpathak/react-environment-specific-builds-using-env-with-cra-and-env-cmd-5960a1253fe6\n\n-   CircleCI Sample config.yml Files: https://circleci.com/docs/2.0/sample-config/#section=configuration\n\n-   CircleCI Adding Status Badges: https://circleci.com/docs/2.0/status-badges/\n\n-   Circle Slack: https://circleci.com/blog/automating-the-deploy-of-an-adonis-api-to-heroku/\n\n-   Deploy ReactJS App with S3 Static Hosting: https://medium.com/serverlessguru/deploy-reactjs-app-with-s3-static-hosting-f640cb49d7e6\n\n-   How to use emojis in React: https://medium.com/@seanmcp/%EF%B8%8F-how-to-use-emojis-in-react-d23bbf608bf7\n\n-   Manage Users in Firebase: https://firebase.google.com/docs/auth/web/manage-users\n\n-   How to Build a Role-based API with Firebase Authentication :https://www.toptal.com/firebase/role-based-firebase-authentication\n\n-   Node.js Everywhere with Environment Variables!: https://medium.com/the-node-js-collection/making-your-node-js-work-everywhere-with-environment-variables-2da8cdf6e786\n\n-   Basic Security Rules: https://firebase.google.com/docs/rules/basics\n\n-   Firebase Timestamp: https://firebase.google.com/docs/reference/android/com/google/firebase/Timestamp\n\n-   Autocomplete Input Styling:\n    https://github.com/ant-design/ant-design/issues/4736\n\n-   Filter by search keyword in cloud firestore query: https://medium.com/feedflood/filter-by-search-keyword-in-cloud-firestore-query-638377bf0123\n\n-   TopBarProgress: https://codesandbox.io/s/rw156kk8km?file=/src/index.js:127-159\n\n-   Setting Up Your Editor : https://create-react-app.dev/docs/setting-up-your-editor/\n\n-   Developing Components in Isolation:\n    https://create-react-app.dev/docs/developing-components-in-isolation\n\n-   Code Quality with Prettier, ESLint and Husky:\n    https://rafaelsm.me/code-quality-prettier-eslint-husky\n\n-   Starting with preconfigured workflow templates: https://docs.github.com/en/actions/getting-started-with-github-actions/starting-with-preconfigured-workflow-templates\n\n-   Setting up a CI/CD workflow on GitHub Actions for a React App (with GitHub Pages and Codecov) : https://dev.to/dyarleniber/setting-up-a-ci-cd-workflow-on-github-actions-for-a-react-app-with-github-pages-and-codecov-4hnp\n\n-   How to add canvas support to my tests in Jest? : https://stackoverflow.com/questions/33269093/how-to-add-canvas-support-to-my-tests-in-jest\n\n-   WhatsApp-Engineering Inside-2 : https://medium.com/codingurukul/whatsapp-engineering-inside-2-bdd1ec354748\n\n-   How do you disable viewport zooming on Mobile Safari?:https://stackoverflow.com/questions/4389932/how-do-you-disable-viewport-zooming-on-mobile-safari\n\n-   How to Create a Custom useDeviceDetect() React Hook:\n    https://reedbarger.com/how-to-create-a-custom-usedevicedetect-react-hook/\n\n-   How to set alias path via webpack in CRA (create-react-app) and craco?: https://stackoverflow.com/questions/56387849/how-to-set-alias-path-via-webpack-in-cra-create-react-app-and-craco\n\n-   Configuring absolute paths in React for Web without ejecting [en-US] : https://dev.to/bybruno/configuring-absolute-paths-in-react-for-web-without-ejecting-en-us-52h6\n\n-   How to fix build failures with `create-react-app` in production: https://community.netlify.com/t/how-to-fix-build-failures-with-create-react-app-in-production/17752\n\n-   Icon :https://www.flaticon.com/\n\n-   Creating and storing encrypted secrets : https://docs.github.com/en/actions/configuring-and-managing-workflows/creating-and-storing-encrypted-secrets\n\n-   Setting an Environment Variable in a Project: https://circleci.com/docs/2.0/env-vars/#setting-an-environment-variable-in-a-project\n\n-   Shields.io: https://github.com/badges/shields\n\n-   How can I reference package version in npm script?: https://stackoverflow.com/questions/48609931/how-can-i-reference-package-version-in-npm-script\n\n-   Override console.log(); for production [duplicate]: https://stackoverflow.com/questions/7042611/override-console-log-for-production\n\n-   Hide 🙈 all console logs in production with just 3 lines of code: https://dev.to/sharmakushal/hide-all-console-logs-in-production-with-just-3-lines-of-code-pp4\n\n-   Extend console's methods without losing line information: https://dev.to/maxbvrn/extend-console-s-methods-without-losing-line-information-2d68\n\n-   Builds fail in CI: https://www.gitmemory.com/issue/timarney/react-app-rewired/391/489176960\n\n-   UNIT TESTS-ENOMEM: not enough memory, read: https://discuss.circleci.com/t/unit-tests-enomem-not-enough-memory-read/35695\n\n-   Solve Module Import Aliasing for Webpack, Jest, and VSCode \u003e \u003cmark\u003eremove line comments in jsconfig.json\u003c/mark\u003e: https://medium.com/@justintulk/solve-module-import-aliasing-for-webpack-jest-and-vscode-74007ce4adc9\n\n-   42,006 free vector icons at your fingertips : https://www.iconbolt.com/\n\n-   HTML5 video not working on iphone with react jsx: https://stackoverflow.com/questions/39852188/html5-video-not-working-on-iphone-with-react-jsx\n\n-   Framer sample: https://www.youtube.com/playlist?list=PL4cUxeGkcC9iHDnQfTHEVVceOEBsOf07i\n\n-   Mp4 to gif: https://www.onlineconverter.com/mp4-to-gif\n\n-   Deploy Amplify error with emoji: https://github.com/redhat-developer/yaml-language-server/issues/128\n\n-   Deploy react to Amplify: https://aws.amazon.com/getting-started/hands-on/build-react-app-amplify-graphql/module-one/?e=gs2020\u0026p=build-a-react-app-intro\n\n-   Build settings: https://docs.aws.amazon.com/amplify/latest/userguide/build-settings.html\n\n-   yarn build in ReactJS, Allocation failed - JavaScript heap out of memory: https://stackoverflow.com/questions/57923800/yarn-build-in-reactjs-allocation-failed-javascript-heap-out-of-memory\n\n-   Get a free Domain name and setup SSL on your Server: https://www.codementor.io/@vahiwe/get-a-free-domain-name-and-setup-ssl-on-your-server-16h2icyzox\n\n-   Create Chrome Extension in React: https://dev.to/bayardlouis470/create-chrome-extension-in-react-3pna\n\n-   How to specify icons in manifest.json?: https://stackoverflow.com/questions/35298168/how-to-specify-icons-in-manifest-json\n\n-   Service Workers: an Introduction: https://developers.google.com/web/fundamentals/primers/service-workers\n\n-   Unexpected use of 'self' no-restricted-globals React: https://stackoverflow.com/questions/44292520/unexpected-use-of-self-no-restricted-globals-react\n\n-   How to Make a React Progressive Web Application (PWA): https://www.codica.com/blog/how-to-create-pwa-with-react/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchnirt%2Freact-sendbird-messenger","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchnirt%2Freact-sendbird-messenger","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchnirt%2Freact-sendbird-messenger/lists"}