Team members: Nishant Sharma
Description of the project:
Features :
1. Multiple people can type and edit code simultaneously in the editor while seeing the live preview. Great for long-distance pair programming and conducting interviews. 2. It includes user authentication elements, such as a secure logout mechanism and a smooth sign-up and login process. 3. Code written in the editor is automatically saved in the database. 4. Exceptionally crafted user interface with code highlighting, toggleable sidebars, and a dynamic view panel. 5. Users have the option to save the code on their local machines. 6. The system incorporates a robust notification system, form validation, and tooltips. User onboarding is simple. Create an account to navigate to the dashboard. In the dashboard, create a room to open your code editor, copy the roomId, and send it to other collaborators. Voilà! Now you are all connected, able to see their edits and work together.
My Experience
I have acquired great knowledge and learned to stay persistent. I learned that the best way to learn is to go and do it yourself. In April 2023, I had an idea to build a real-time collaborative code editor and started working on it. I participated in my college hackathon, during which I learned React.js. I used React Hooks such as useState, useEffect, useRef, useContext, and useCallback to create a minimal frontend. Additionally, I learned Socket.io for real-time data transfer. Later, I participated in the Appwrite month-long hackathon in June. Here, I developed the signup/login and logout mechanism using Appwrite BaaS, incorporating proper form validation with Formik and Yup. I utilized Appwrite's database for data storage. I replaced my Express-Socket server with Appwrite's real-time feature, though it wasn't a great success. Subsequently, I enhanced the frontend by splitting a page into different sections, creating individual components, organizing the project with dedicated folders, adding comments, and writing documentation. I redeveloped the backend using Express and Socket.io. Along the way, I learned to use other libraries like react-router-dom, CodeMirror, react-toastify, react-tooltip, react-icons, MUI, and nodemon. I realized how important it is to read documentation thoroughly when using a library or framework.
Tech Stack
The code sample is written entirely in JavaScript and utilizes the following frameworks and technologies:
- React.js (Frontend)
- Express.js (Backend)
- Socket.io (Real-time high-speed data transfer between collaborators)
- Appwrite
- Vercel
Libraries Used
react-router-dom
CodeMirror
react-toastify
react-tooltip
react-icons
MUI
nodemon
formik
yup
Future Scope
Integrating EsLint and other for error highlighting.
Making the editor page responsive on mobile and other devices.
Public Code Repo - GitHub Link
Demo Link - CodingFlux
Demo Test Users
email - test01@gmail.com
password - Asdfghj@13
email - sunilsharma@gmail.com
password - 12345678
If demo users can't log in please type any random email and password.