{"id":15132958,"url":"https://github.com/shohamgalili/codingwebapp","last_synced_at":"2026-02-06T15:35:54.962Z","repository":{"id":255987307,"uuid":"854046442","full_name":"ShohamGalili/CodingWebApp","owner":"ShohamGalili","description":"Coding Web App is an interactive platform designed for real-time collaborative coding between mentors and students. It allows users to work on coding problems together with live updates using WebSockets. The app features role-based functionality (mentor/student), code block selection, and dynamic updates with real-time editing capabilities.","archived":false,"fork":false,"pushed_at":"2024-09-12T19:01:19.000Z","size":907,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-26T08:51:34.699Z","etag":null,"topics":["nodejs","react","socket-io"],"latest_commit_sha":null,"homepage":"","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/ShohamGalili.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":"2024-09-08T09:05:11.000Z","updated_at":"2024-09-12T19:01:22.000Z","dependencies_parsed_at":"2024-09-08T10:50:41.207Z","dependency_job_id":"ba97363f-bbc2-4587-9271-04ce4601b9c3","html_url":"https://github.com/ShohamGalili/CodingWebApp","commit_stats":null,"previous_names":["shohamgalili/codingwebapp"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ShohamGalili%2FCodingWebApp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ShohamGalili%2FCodingWebApp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ShohamGalili%2FCodingWebApp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ShohamGalili%2FCodingWebApp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ShohamGalili","download_url":"https://codeload.github.com/ShohamGalili/CodingWebApp/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246096831,"owners_count":20723029,"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":["nodejs","react","socket-io"],"created_at":"2024-09-26T04:41:55.569Z","updated_at":"2026-02-06T15:35:54.898Z","avatar_url":"https://github.com/ShohamGalili.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Coding Web App\n\nWelcome to **Coding Web App**, an interactive platform designed to enhance collaborative coding in real-time! This application allows mentors and students to work together on coding challenges, share code blocks, and solve problems in a dynamic and engaging environment.\n\nWe hope you enjoy using this app, whether you are a mentor guiding students or a student working to improve your coding skills!\n\n## Features\n\n- **Real-Time Collaborative Coding**: With WebSocket integration, mentors and students can work together on the same code block, making live coding more efficient.\n- **Roles**: Separate roles for mentors and students. Mentors can assist multiple students in a session, making it ideal for classroom environments or coding workshops.\n- **Lobby System**: Users can join sessions via a lobby, where they can select from various coding problems to solve.\n- **Session Tracking**: The app dynamically tracks how many students are active in each session, allowing for better session management.\n- **MongoDB Integration**: Stores code block states and user information, ensuring data is saved and can be retrieved across sessions.\n\n## Getting Started\n\nFollow these steps to set up the **Coding Web App** on your local machine.\n\n### Prerequisites\n\nBefore you begin, make sure you have the following installed on your system:\n\n- [Node.js](https://nodejs.org/) (v14 or higher)\n- [MongoDB](https://www.mongodb.com/) (or a MongoDB Atlas account for cloud-based storage)\n- [Git](https://git-scm.com/)\n\n### Installation\n\n1. **Clone the repository:**\n\n   ```bash\n   git clone https://github.com/your-username/coding-web-app.git\n   cd coding-web-app\n    ```\n   \n2. **Install dependencies for both the client and server:**\n    ```bash \n   # Install server dependencies\n    cd server\n    npm install\n    \n    # Install client dependencies\n    cd ../client\n    npm install\n   ```\n   \n3. **Start MongoDB (If using local MongoDB, ensure it's running):**\n    ```bash\n   mongod\n    ```\n\n4. **Run the app:**\n   * Open a terminal for the server and run:\n   ```bash\n    cd server\n    npm start\n    ```\n   * Open another terminal for the client and run:\n    ```bash\n    cd client\n    npm start\n    ```\n   The client should open in your default browser at http://localhost:3000.\n\n## Local vs Deploy Configurations\n\nThere are places in the code that allow switching between localhost for local development and the deployed version. For example, in the .env file of both the client and server, you will find the following configurations:\n\n1. **For Local Development:**\n   In local development, you will use localhost for both the client and server URLs.\n   ```bash\n    ####### FOR LOCALHOST ########\n    CLIENT_URL=http://localhost:3000\n    API_URL=http://localhost:5000/api\n    ```\n2. **For Deployed Version:**\n   When deploying the app, switch to the deployed URL. Here's an example of how the .env variables should be set up for deployment.\n   ```bash\n    ####### FOR DEPLOY ########\n    #CLIENT_URL=https://codingwebapp-pfyd.onrender.com\n    API_URL=https://codingwebapp-pfyd.onrender.com/api\n    ```\n   You can easily toggle between local and deployed versions by commenting or uncommenting the respective lines in the .env file.\n\n## Folder Structure\n\n- `client/`: Contains the frontend of the application built with React. This includes the UI for the lobby, code block pages, and real-time collaboration features.\n- `server/`: Houses the backend built with Node.js and Express. This folder contains the API and socket server for handling real-time communication.\n- `models/`: MongoDB schemas for storing user data, code block states, and session details.\n\n## How to Use\n\n- **Lobby System**: Upon launching, users will enter a lobby where they can choose a coding challenge.\n- **Mentor and Student Roles**: Mentors guide students by reviewing their code in real-time and offering feedback. Students can submit their code for review once completed.\n- **Real-Time Collaboration**: Edits made by any user in a session will be visible to all other participants immediately.\n\n## Live Demo\n\nYou can access the live version of the **Coding Web App** here:\n\n[Live Demo](https://codingwebapp-pfyd.onrender.com)\n\n## Video Explanation\n\nYou can watch a video explanation of the **Coding Web App** here:\n\n[Watch Video](https://youtu.be/0YK0-spltvM)\n\n---\n\nHope you enjoy using **Coding Web App**!\n\nMade with ❤️ by Shoham Galili\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshohamgalili%2Fcodingwebapp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshohamgalili%2Fcodingwebapp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshohamgalili%2Fcodingwebapp/lists"}