{"id":15355459,"url":"https://github.com/ittus/vuejs-slack-clone-realtime","last_synced_at":"2025-04-15T06:29:00.072Z","repository":{"id":90076987,"uuid":"99471559","full_name":"ittus/vuejs-slack-clone-realtime","owner":"ittus","description":"Slack clone using VueJS and firebase","archived":false,"fork":false,"pushed_at":"2017-08-15T06:59:09.000Z","size":542,"stargazers_count":51,"open_issues_count":0,"forks_count":17,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-28T17:05:44.868Z","etag":null,"topics":["chat","firebase","javascript","realtime","slack","vuejs"],"latest_commit_sha":null,"homepage":"https://slackclonevuejs.firebaseapp.com","language":"Vue","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/ittus.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,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-08-06T07:37:07.000Z","updated_at":"2024-08-04T05:29:05.000Z","dependencies_parsed_at":null,"dependency_job_id":"3dcee93d-7f8f-4dd7-b8f2-2b7f259043d2","html_url":"https://github.com/ittus/vuejs-slack-clone-realtime","commit_stats":{"total_commits":20,"total_committers":1,"mean_commits":20.0,"dds":0.0,"last_synced_commit":"9ac652ba24c68b52d4e46ace39226acfc6bd82b1"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ittus%2Fvuejs-slack-clone-realtime","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ittus%2Fvuejs-slack-clone-realtime/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ittus%2Fvuejs-slack-clone-realtime/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ittus%2Fvuejs-slack-clone-realtime/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ittus","download_url":"https://codeload.github.com/ittus/vuejs-slack-clone-realtime/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249020159,"owners_count":21199500,"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":["chat","firebase","javascript","realtime","slack","vuejs"],"created_at":"2024-10-01T12:24:28.014Z","updated_at":"2025-04-15T06:29:00.054Z","avatar_url":"https://github.com/ittus.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Slack Clone real time VueJS\n\n\u003e Slack clone real time Using VueJS and Firebase\n\n[![dependencies Status](https://david-dm.org/ittus/vuejs-slack-clone-realtime/status.svg)](https://david-dm.org/ittus/vuejs-slack-clone-realtime)    [![devDependencies Status](https://david-dm.org/ittus/vuejs-slack-clone-realtime/dev-status.svg)](https://david-dm.org/ittus/vuejs-slack-clone-realtime?type=dev)\n\n# Demo\nhttps://slackclonevuejs.firebaseapp.com\n![Demo Image](images/screenshot1.png)\n\n# Technology\n- VueJS\n- Firebase\n- SemanticUI\n- Gravatar\n\n## Build Setup\n\n- Open `src/config/firebaseConfig.js` and change `const config` to your project's configuration\n\n- Change Database rules in firebase to\n\n```json\n{\n  \"rules\": {\n    \"channels\": {\n      \".read\": \"auth != null\",\n      \"$channelId\": {\n        \".write\": \"auth != null\",\n        \".validate\": \"newData.hasChildren(['id', 'name'])\",\n        \"name\": {\n          \".validate\": \"newData.val().length \u003e 0\"\n        },\n          \"id\": {\n            \".validate\": \"newData.val() === $channelId\"\n          }\n      }\n    },\n    \"messages\": {\n      \"$channelId\": {\n        \".read\": \"auth != null\",\n        \".validate\": \"root.child('channels/' + $channelId).exists()\",\n        \"$messageId\": {\n          \t\".write\": \"auth != null\",\n            \".validate\": \"(newData.hasChildren(['content', 'user', 'timestamp']) \u0026\u0026 !newData.hasChildren(['image'])) || (newData.hasChildren(['image', 'user', 'timestamp']) \u0026\u0026 !newData.hasChildren(['content']))\",\n            \"content\": {\n              \".validate\": \"newData.val().length \u003e 0\"\n            },\n             \"image\": {\n               \".validate\": \"newData.val().length \u003e 0\"\n             },\n              \"user\": {\n                \".validate\": \"newData.hasChildren(['name', 'avatar', 'id'])\",\n                  \"id\": {\n                    \".validate\": \"newData.val() === auth.uid\"\n                  }\n              }\n        }\n      }\n    },\n    \"privateMessages\": {\n      \"$uid1\": {\n        \"$uid2\": {\n          \".read\": \"auth != null \u0026\u0026 ($uid1 === auth.uid || $uid2 === auth.uid)\",\n          \"$messageId\": {\n            \".write\": \"auth != null \u0026\u0026 newData.child('user/id').val() === auth.uid\",\n            \".validate\": \"$uid1 \u003c $uid2 \u0026\u0026 (newData.hasChildren(['content', 'user', 'timestamp']) \u0026\u0026 !newData.hasChildren(['image'])) || (newData.hasChildren(['image', 'user', 'timestamp']) \u0026\u0026 !newData.hasChildren(['content']))\",\n             \"content\": {\n              \".validate\": \"newData.val().length \u003e 0\"\n            },\n            \"image\": {\n               \".validate\": \"newData.val().length \u003e 0\"\n             },\n            \"user\": {\n              \".validate\": \"newData.hasChildren(['name', 'avatar', 'id'])\",\n                \"id\": {\n                  \".validate\": \"newData.val() === auth.uid\"\n                }\n            }\n          }\n        }\n      }\n    },\n    \"presence\": {\n      \".read\": \"auth != null\",\n      \".write\": \"auth != null\"\n    },\n    \"users\": {\n      \".read\": \"auth != null\",\n      \"$uid\": {\n        \".read\": \"auth != null\",\n        \".write\": \"auth != null \u0026\u0026 auth.uid === $uid\",\n        \".validate\": \"newData.hasChildren(['name', 'avatar'])\",\n          \"name\": {\n            \".validate\": \"newData.val().length \u003e 0\"\n          },\n          \"avatar\": {\n            \".validate\": \"newData.val().length \u003e 0\"\n          }\n      }\n    }\n  }\n}\n```\n\n- Create folder `tchat` in firebase storage\nChange storage rules in firebase to:\n```\nservice firebase.storage {\n  match /b/{bucket}/o {\n    match /tchat {\n    \tmatch /public/{imagePath=**} {\n      \tallow read: if request.auth != null;\n        allow write: if request.auth != null \u0026\u0026 request.resource.contentType.matches('image/.*') \u0026\u0026 request.resource.size \u003c 1 * 1024 * 1024;\n      }\n\n      match /private/{user1}/{user2}/{imagePath=**} {\n      \tallow read: if request.auth != null \u0026\u0026 (request.auth.uid == $user1 || request.auth.uid == $user2);\n        allow write: if request.auth != null \u0026\u0026 (request.auth.uid == $user1 || request.auth.uid == $user2) \u0026\u0026 request.resource.contentType.matches('image/.*') \u0026\u0026 request.resource.size \u003c 1 * 1024 * 1024;\n      }\n    }\n  }\n}\n\n\n```\n\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n\n# build for production with minification\nnpm run build\n\n# build for production and view the bundle analyzer report\nnpm run build --report\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fittus%2Fvuejs-slack-clone-realtime","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fittus%2Fvuejs-slack-clone-realtime","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fittus%2Fvuejs-slack-clone-realtime/lists"}