{"id":22481686,"url":"https://github.com/hussaino03/devspace","last_synced_at":"2025-08-02T16:30:53.947Z","repository":{"id":111864833,"uuid":"482012048","full_name":"hussaino03/Devspace","owner":"hussaino03","description":"🏆 Best Use of Twilio ","archived":false,"fork":false,"pushed_at":"2024-04-25T21:49:56.000Z","size":558,"stargazers_count":14,"open_issues_count":2,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-04-25T23:44:36.238Z","etag":null,"topics":["css","html5","javascipt","reactjs","twilio"],"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/hussaino03.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}},"created_at":"2022-04-15T16:03:57.000Z","updated_at":"2024-04-25T21:49:59.000Z","dependencies_parsed_at":null,"dependency_job_id":"b71f81e5-910f-4af8-884c-d2067b7cd981","html_url":"https://github.com/hussaino03/Devspace","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/hussaino03%2FDevspace","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hussaino03%2FDevspace/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hussaino03%2FDevspace/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hussaino03%2FDevspace/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hussaino03","download_url":"https://codeload.github.com/hussaino03/Devspace/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228491955,"owners_count":17928719,"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":["css","html5","javascipt","reactjs","twilio"],"created_at":"2024-12-06T16:14:57.618Z","updated_at":"2024-12-06T16:14:58.355Z","avatar_url":"https://github.com/hussaino03.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n\u003cdiv id=\"top\"\u003e\u003c/div\u003e\n\n[![Contributors][contributors-shield]][contributors-url]\n[![Issues][issues-shield]][issues-url]\n[![MIT License][license-shield]][license-url]\n\n\u003c!-- PROJECT LOGO --\u003e\n\u003cbr\u003e\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://github.com/hussaino03/Devspace\"\u003e\n    \u003cimg src=\"https://www.vhv.rs/dpng/d/53-534419_college-student-vector-png-transparent-png.png\" alt=\"Logo\" width=\"80\" height=\"80\"\u003e\n  \u003c/a\u003e\n  \u003ch1 align=\"center\"\u003eVirtual Classroom!\u003c/h1\u003e\n\n  \u003cp align=\"center\"\u003e\n    A Virtual Classroom Designed To Optimize Learning Approaches!\n    \u003cbr\u003e\n    \u003cbr\u003e\n    \u003ca href=\"https://github.com/hussaino03/Devspace\"\u003e\u003cstrong\u003eExplore the docs »\u003c/strong\u003e\u003c/a\u003e\n  \u003c/p\u003e\n\u003c/div\u003e\n\n\u003c!-- TABLE OF CONTENTS --\u003e\n\u003cdetails\u003e\n  \u003csummary\u003eTable of Contents\u003c/summary\u003e\n  \u003cbr\u003e\n  \u003cbr\u003e\n  \u003col\u003e\n    \u003cli\u003e\n      \u003ca href=\"#about-the-project\"\u003eAbout The Project\u003c/a\u003e\n      \u003cul\u003e\n        \u003cli\u003e\u003ca href=\"#built-with\"\u003eBuilt With\u003c/a\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n      \u003ca href=\"#getting-started\"\u003eGetting Started\u003c/a\u003e\n      \u003cul\u003e\n        \u003cli\u003e\u003ca href=\"#prerequisites\"\u003ePrerequisites\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"#installation\"\u003eInstallation\u003c/a\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#usage\"\u003eUsage\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#roadmap\"\u003eRoadmap\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#contributing\"\u003eContributing\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#license\"\u003eLicense\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#contact\"\u003eContact\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#acknowledgments\"\u003eAcknowledgments\u003c/a\u003e\u003c/li\u003e\n  \u003c/ol\u003e\n\u003c/details\u003e\n\n\n\u003c!-- ABOUT THE PROJECT --\u003e\n**HeroHacks II Winner (Most Creative Use Of Twilio)**\n![image](https://user-images.githubusercontent.com/67332652/163739019-b3284e49-dd45-4082-bd35-c1486a9a101f.png)\n\n## Domain Name\n\nOur project's domain name is \"studywith.tech\"\n\n## Inspiration\n\nThe inspiration for our project came from the fact that due to the implementation of remote learning, teachers all over the world have to interact with their students virtually. Today, two major platforms namely Google Meet and Zoom dominate the virtual learning industry. However, both platforms have shortcomings. Google Meet for example lacks the functionality of a built in collaborative whiteboard or annotation while a teacher is presenting. Zoom on the other hand has these functionalities but lacks the ease of access of google meet via a web browser. Our app aims to strike a combination of the features of Zoom and ease of access of Google Meet.\n\n## What it does\n\nVirtual-Classroom is a web conferencing app that allows teachers to connect with their students and share their learning materials via either screen-sharing or using a collaborative whiteboard. The use of a collaborative whiteboard makes it easier for teachers to supplement their learning material and for students to better explain their difficulties and interact with teachers.\n\n## How We built it\n\nVirtual-Classroom is a React app built using Twilio's programmable video and conversations SDK. The collaborative whiteboard functionality is implemented using the Data Track API.\n\n## Most Creative use of Twilio\n\nWe use Twilio's Video SDK for JavaScript to enable users to stream data from their mic and camera via \"tracks\", these tracks can then be subscribed to by other users thus enabling sharing of video and audio. For low latency sharing of data between users required in the chat and reactions menu, we used Twilio's DataTrack API which is used to share reactions, chat messages as well as whiteboard pointer data. This allows for the users to react to other users, send them messages as well as work on a collaborative whiteboard.\n\n### Features:\n\n* Interactive environment to learn (video calling and microphone option)\n* Whitebord (learning + collaborative tool)\n* Reactions (emojis)\n* Screenshare ability \n* Chatbox \n* Multiple Individuals can join at once \n\n### Built With\n\n* React.js\n* HTML\n* CSS\n* JavaScript\n* Twilio \n* Firebase\n\n### Demo\n\nhttps://github.com/hussaino03/Devspace/assets/67332652/22941387-6c66-45e6-821b-f216eb53b9bf\n\n\n\u003c!-- GETTING STARTED --\u003e\n# Getting Started\n\n\u003c!-- PREREQUISITES --\u003e\n## Prerequisites\n* Install Desktop development with c++ workload on Visual studio\n* Git CLI\n\n## Installation\n* `git clone https://github.com/hussaino03/Devspace`\n* In project directory run `npm install`\n* Run `npm start`\n\n## Available Scripts\n\nIn the project directory, you can run:\n\n`npm install`\n\nThis will install all the required modules\n\n`npm start`\n\nThis will start the server\n\nRuns the app in the development mode.\n\nOpen [http://localhost:1234](http://localhost:1234) to view it in your browser.\n\n\u003c!-- ROADMAP --\u003e\n## Roadmap\n\n- [✅] Integrate camera/mic option\n- [✅] Integrate a whiteboard\n- [✅] Integrate emojis\n- [✅] Integrate disable/enable option for both the video and microphone \n\n\u003c!-- LICENSE --\u003e\n## License\n\nDistributed under the MIT License. See `LICENSE.txt` for more information.\n\n\u003c!-- ACKNOWLEDGMENTS --\u003e\n## Acknowledgments\n\n* [GitHub README.md template](https://github.com/othneildrew/Best-README-Template)\n\n\u003c!-- MARKDOWN LINKS \u0026 IMAGES --\u003e\n\u003c!-- https://www.markdownguide.org/basic-syntax/#reference-style-links --\u003e\n[contributors-shield]: https://img.shields.io/github/contributors/hussaino03/Devspace?color=%23\u0026style=for-the-badge\n[contributors-url]: https://github.com/hussaino03/Devspace/graphs/contributors\n[issues-shield]: https://img.shields.io/github/issues/hussaino03/Devspace?style=for-the-badge\n[issues-url]: https://github.com/hussaino03/Devspace/issues\n[license-shield]: https://img.shields.io/github/license/othneildrew/Best-README-Template.svg?style=for-the-badge\n[license-url]: https://github.com/hussaino03/Devspace/blob/main/LICENSE.txt\n[product-screenshot]: loginpage.png\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhussaino03%2Fdevspace","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhussaino03%2Fdevspace","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhussaino03%2Fdevspace/lists"}