Code Craft

Code Craft is a real-time collaborative code editor designed for seamless teamwork and efficient coding. Created for the BitnBuild Hackathon on February 10, 2024, by GDSC CVR.

Team Name: 404Found
Team Members:

• Rishi Kumar Gade
• Ananya Pappula
• Sneha Muthyala
• Dhruv S Shah

Tech Stack

• Frontend: HTML, CSS, Tailwind CSS, React
• Backend: Next.js, Socket.io, Node.js, TypeScript
• Database: MongoDB

Installation

1. Clone the Repository 📥

   git clone https://github.com/RishiKumarGade/CodeCraft.git

2. Install Dependencies 🛠️

   • For the client:

     cd codeeditor
     npm install

   • For the server:

     cd server
     npm install

3. Run the Application 🚀

   • For the client:

     npm run dev

   • For the server:

     npm start

Features

Home Page:

• Central hub for navigation and overview of the features 🏠

Login and Authentication:

• Custom authentication with secure password hashing 🔐
• Single user sign-in functionality ✅

Offline Code Editor:

• Edit code even when offline 📝

Custom Avatars:

• Choose your avatar to represent your activity in the room 🌟

Room Page:

• Room Creation: Generate a unique room code to share with friends 🔑
• Room Joining: Enter a valid room code to access the room 🚪
• Your Rooms: Log of created rooms with stored session data 📚

Toast Messages:

• Indicate success & failure for account creation, login, logout, room creation, and room exiting 👏

Collaborative Code Editor:

• Code Editor:
  • Real-time code updates ⚡
  • Syntax highlighting based on file extension 🌈
  • Avatar indicators for user activity 🚶‍♂️🚶‍♀️
  • Locking protocol to prevent conflicts during simultaneous editing 🔒
• File System:
  • Real-time creation and deletion of files 📂
  • Detect file type based on extension 📄
• Chat Section:
  • Display online users with avatars 🗨️
  • Real-time chatting within the room 💬
• Session Management:
  • Automatically redirect users back to their previous room if they leave abruptly due to network issues or closing the tab 🔗

Contact Us Page:

• Submit queries directly to us through the Contact Us page 📬

About Us Page:

• Short description of the project and our objectives 📖

Screenshots

Credits

If you find this project useful and incorporate it into your own work, please provide proper attribution. Acknowledge the effort and contributions of the developers by linking back to the original repository.

How to Give Credits:

Include a visible and clear credit to the original project with a link to Code Craft on GitHub.