{"id":15687062,"url":"https://github.com/basir/support-desk-app","last_synced_at":"2025-05-07T18:05:16.765Z","repository":{"id":119056341,"uuid":"529258391","full_name":"basir/support-desk-app","owner":"basir","description":null,"archived":false,"fork":false,"pushed_at":"2022-09-01T05:49:12.000Z","size":570,"stargazers_count":16,"open_issues_count":0,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-20T00:38:21.900Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/basir.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":"2022-08-26T12:58:35.000Z","updated_at":"2024-10-26T20:17:18.000Z","dependencies_parsed_at":null,"dependency_job_id":"8772e93b-a50d-4a45-b8c6-a9573fd0e47e","html_url":"https://github.com/basir/support-desk-app","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basir%2Fsupport-desk-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basir%2Fsupport-desk-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basir%2Fsupport-desk-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basir%2Fsupport-desk-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/basir","download_url":"https://codeload.github.com/basir/support-desk-app/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252931480,"owners_count":21827109,"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":[],"created_at":"2024-10-03T17:42:51.099Z","updated_at":"2025-05-07T18:05:16.698Z","avatar_url":"https://github.com/basir.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Build \u0026 Deploy Support Desk By Socket.IO \u0026 React.JS\n\n![amazona](/frontend/public/support-desk.png)\n\n## Features:\n\n- beautiful UI by react bootstrap\n- display chat button on public website to start chat\n- browse website while chatting with admin\n- pause/resume chat with admin\n- display admin dashoard\n- show all users with their status (online, offline, new message)\n- enable live chat with selected user\n- flag new messages from online users\n- support multiple users from one single page by admin\n\n## Run\n\n```sh\n# clone project in a folder\n$ git clone git@github.com:basir/support-desk-react-socket-io-final.git\n# open folder in vs code\n$ cd support-desk-react-socket-io-final\n$ code .\n# run backend\n$ cd backend\n$ npm install\n$ npm start\n# run frontend in a new terminal\n$ cd frontend\n$ npm install\n$ npm start\n```\n\n### Chat with admin\n\n- open http://localhost:3000\n- click on Chat with us\n- send message to admin\n\n### Admin dashboard\n\n- open http://localhost:3000/admin\n- select user in left panel\n- send message to user\n\n## Lessons\n\n1. create-react-app\n   - creating support-desk-app in desktop\n   - npx create-react-app frontend\n   - creating layout using react-bootstrap bootstrap\n2. add routing\n   - create home page\n   - create admin page\n3. create chatbox component\n   - add chat with us button\n   - handle click on button\n   - show support box\n   - create footer section for support box\n4. create web server\n   - create backend folder\n   - npm install socket.io express\n   - create express app\n   - server html files in build folder\n5. create socket server\n   - handle connection to the server\n   - define users array\n   - handle onLogin\n   - handle disconnect\n   - handle onMessage\n   - handle onUserSelected\n6. Finish chatbox\n   - handle login user\n   - handle list messages\n   - handle send message\n7. create admin dashboard\n   - handle login user\n   - handle list messages\n   - handle send message\n8. publish to heroku\n   - push to github\n   - create heroku account\n   - connect to github\n   - deploy app\n\n## Intro\n\nHello and Welcome to my coding course to build a support desk system from scratch . In this course You will learn the essential tools and skills to design, develop and deploy a support desk system website using React.js in frontend and Socket.io in backend.\n\nMy name is Basir and I’ll be your instructor in this course. I have 17 years of coding experience in international companies like ROI Vision in Montreal,\nand now I am a coding instructor with more than 50 thousands students around the world.\n\nI designed this course for anyone seeking to develop a support desk website. By the end of this course you’ll be able to design a responsive web site, implement a user-friendly frontend and build a scalable backend. Also you can deploy the website on cloud servers.\n\nYou need to open a code editor along with me and start coding throughout this course.\nI teach you:\n\n- Creating functional components by React\n- Defining different screens from normal users and admins using React Router Dom\n- Using React hooks to handle form inputs and scroll in elements\n- Building real-time backend to exchange messages between users and admin by Socket.io\n\nAlso you will learn how to use deploy this applicaton in heroku and share your work on internet\n\nI have used the latest version of react, node.js and socket.io in this course.\n\nI designed this course for web developers and entrepreneurs.\n\nIf you are or want to a web developer, take this course to become a professional web developer, have a great project in your portfolio and get a job in 22 million job opportunities around the world.\n\nIf you are a entrepreneurs, take this course to to launch your startup and sell your products and services using this fully-functional ecommerce website and earn money from your idea.\n\nThe only requirement for this course is having basic knowledge on React js and Node.js\n\nFeel free to take a look at the course preview and enroll if it is along with your ambitions.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbasir%2Fsupport-desk-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbasir%2Fsupport-desk-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbasir%2Fsupport-desk-app/lists"}