Link for the Application 🖐️ here. P.S - Only frontend part is hosted for the time being. I my still figiring out an good alternavtive for good old Heroku backend deploying services. However you only need to run backend code (which i have pointed to local host) in order to app on netlify.
YT video of working project 📹 here
The pandemic has been a challenge for all of us and since we didn’t get to meet our friends like the pre-covid days, we devised new ways of keeping contact with them. Being a coder, what’s better than having coding sessions with our friends/peers/random folks alongside chatting, talking and even sharing our screens to resolve each others' doubts, all on a single platform.
Not Only this there are platforms that allows multiple users to create a meeting, voice/video calling and join the conversation to discuss any topics. The problem with these platforms that users who enter the conversation late are not able to catch up what's going on.
git clone https://github.com/Pranjal7852/CodingClassroom
// Frontned Setup
cd frontend
pnpm install
pnpm run dev
// Backend Setup
cd backend
pnpm i
node server.js
NOTE - You will need an .env file to make API request to the backend server. Create a new env file in the frontend folder.
REACT_APP_BACKEND_URL="YOUR FRONTEND LOCAL HOST ADDRESS" // for vite is it - http://localhost:5173
PORT=YOUR PORT NUMBER WHERE BACKEND IS RUNNING // default 5000
- React.JS - Front End JS Library.
- Socket.IO - Used for creating web sockets between client and server.
- React Toastify - Used for creating alert divs and modals throughout the application.
- UUID - Used for creating unique room id for every client using the app.
- Rapid API - API fetching using Axios for code Compilation and Questions in practice tab.
- MaterialUI - Ui library for clean and modern look to Web Application
- Netlify - Deployment of this project is done throught Netlify.
- SASS - Preporcessor for CSS for less compilation during Runtime.
- Express.JS - used for Server creation on NODE>JS
- Code Mirror - used for code editor of the app to give it real IDE look and feel.
CodeClassroom is a web platform that allows multiple users to enter the call and even enables you to code with your friends or random folks while you all are in a meeting; allowing you to chat, talk and even share your screen with them. As you land on the website, you get an option to join classroom or join the room direct or practice your coding skills on editor.
While in code editor
on the left hand side, you get a bunch of random questions to practice on. While on the right side, there is an editor to write your code on. Here, you can select your preferred coding language from the dropdown list. Then after you have written your code, you can check if the provided input gives a desired output by clicking on the provided Run Compile button.But what if you have a doubt or want to crosscheck your answer with that of your mates or just simply want to chit chat while you code? Dont worry! In the top section, you have button to start a meet with your friends.
While in Classroom
You first have to login through GoogleAuth and after that you in the classroom you get the room cards so that your classes and rooms could be maintained.
While in meeting
When the host starts the call/meeting, the platform will start to save the live transcript and it allows any users who enter the call late to be able to see the transcript of previous conversation
- The main challenge which we came into is implementing the feature of storing past transcript enabled for all users means if someone enters in between the meeting then they can see previous conversation through transcript. -Since we spent so much time implementing multiple APIs, we do not have enough time to host the platform online; -We faced an issue while setting up a custom route for the IDE api call ;
- How to make state synchronous in React;
- Had difficulty in using Cockroach Db , So Had to Drop That;
