Open Code Dev

Open Code Dev is an innovative code editor application designed to provide developers with a powerful, yet user-friendly platform for writing and executing code directly in the browser. It supports multiple programming languages and includes features such as real-time collaboration, syntax highlighting, and a customizable interface to enhance the coding experience.

Project Type

• Frontend
• Backend

Deployed Link

Open Code Dev: Live Demo

Directory Structure

Video Walkthrough of the Project

Presentation Link

Screenshots

• Landing Page: A welcoming interface that introduces users to the features of Open Code Dev.

  

• Login and Signup Page: Easy access for users to create an account or log in to start coding.

  

  

• Editor Page: A powerful code editor interface where users can write, run, and debug their code.

  

Features

• Login and Signup: Allows users to create an account or log in to access the full features of Open Code Dev.
• Responsive and Dynamic: The application is designed to be responsive, ensuring an optimal user experience across desktop, tablet, and mobile devices.
• Code Editor: A powerful editor with syntax highlighting and error detection for multiple programming languages.
• Real-Time Collaboration: Users can collaborate with others in real-time, seeing changes as they happen by sharing the code.
• Code Execution: Users can run their code directly within the editor and see the output immediately.
• File Management: Easily create, delete, and manage files within the editor.

Technology Stack

• HTML: Provides the structure for the web pages.

• CSS: Manages the styling and ensures an appealing user interface.

• JavaScript: Powers dynamic and interactive elements within the application.

• React.js: A JavaScript library used for building the user interface.

• Node.js: Handles the server-side logic and backend functionality.

• Express.js: A web application framework for Node.js used to build the backend API.

• MongoDB: Serves as the database to store user information and project data.

• Tailwind-CSS: Tailwind CSS - Leveraged pre-built utility classes to simplify the styling process while maintaining full design flexibility.

Design Elements

• Interactive Components: The interface includes interactive elements like rounded buttons and tooltips to enhance the user experience.

• Flex and Grid Layout: Utilizes CSS Flexbox and Grid for a responsive layout that adapts to various screen sizes.

• Fonts & Icons: Integrates Google Fonts and Material Icons for a modern and clean look.

Installation & Getting Started

To run the Open Code Dev application locally, follow these steps:

Frontend

1. Clone the repository:

   https://github.com/shobhit9742/Online_Code_Editor.git)
   

2. Navigate to the Frontend Directory:

   cd Online_Code_Editor/client
   

3. Install all dependencies:

   npm install
   

4. Run the development server:

   npm start
   

Backend

1. Navigate to the Backend Directory:

   cd Online_Code_Editor/server

2. Install all dependencies:

   npm install
   

3. Run the server:

   npm start
   

Contributors

• Avani Lodhi
• Shobhit Gupta