An Online IDE with login functionality enables users to run code, generate new code, and refactor existing code through secure login.

Structure of a .env File

#Frontend
VITE_GEMINI_API_URL=
VITE_BACKEND_API_URL=
#Login
MONGO_URI=mongodb+srv://username:pass@cluster0.<abcs1234>.mongodb.net/<databaseName>?retryWrites=true&w=majority
JWT_SECRET=
PORT=
#GenAi
GEMINI_API_KEY=

Frontend Dependencies:

• monaco-editor: A fast code editor React wrapper, commonly used in applications like Visual Studio Code.
• lodash: A utility library with helpful functions for working with arrays, objects, and other JavaScript data types.
• react: A JavaScript library for building declarative, component-based user interfaces.
• react-icons: A collection of customizable icons for React applications.
• react-router: A library for adding dynamic routing and navigation capabilities to React applications.
• rollup: A plugin for minifying JavaScript code with Terser, improving performance by reducing bundle size.
• terser: A fast JavaScript minifier used with bundlers like Rollup to optimize file sizes.
• sweetalert2: A customizable library for creating responsive, beautiful popup alerts in JavaScript applications.
• autoprefixer: A PostCSS plugin that automatically adds vendor prefixes to CSS for cross-browser compatibility.
• eslint: A tool to identify and fix JavaScript code issues, enforcing best practices and style consistency.
• globals: A package that provides a list of common global variables used across JavaScript environments for linting.
• postcss: A tool for transforming CSS with JavaScript plugins, enabling features like autoprefixing and minification.
• sass-embedded: A modern version of Sass embedded for improved performance and support for advanced CSS features.
• tailwindcss: A utility-first CSS framework designed for rapid styling with predefined classes.
• tailwindcss-motion: A plugin for adding animations and transitions to Tailwind CSS projects.
• vite: A fast build tool and development server for modern frontend development, featuring hot module replacement (HMR).

Backend Dependencies:

• bcryptjs: A JavaScript library for securely hashing passwords using the bcrypt algorithm.
• cors: A Node.js package that enables Cross-Origin Resource Sharing (CORS) for handling requests from different origins.
• dotenv: A module that loads environment variables from a .env file into process.env.
• express: A minimal and flexible Node.js web framework for building web and mobile applications.
• jsonwebtoken: A library for creating and verifying JSON Web Tokens (JWT) to securely transmit data between parties.
• mongoose: A MongoDB Object Data Modeling (ODM) library for Node.js, offering schema-based data modeling.

Python Libraries:

• google-generativeai: A collection of Google APIs and tools for integrating generative AI models into applications.
• python-dotenv: A Python library for loading environment variables from a .env file into the environment.
• absl-py: A Python library developed by Google, providing utilities for building scalable and efficient applications.
• flask_cors: A Flask extension to handle Cross-Origin Resource Sharing (CORS) and allow requests from different origins.
• flask: A lightweight Python web framework used for building web applications.
• os: A module in Python providing a way of using operating system-dependent functionality, such as reading or writing to the file system.
• re: A module in Python used for working with regular expressions, allowing pattern matching and text manipulation.

How to Set Up and Use

To set up and run:

What You Need

• Node.js (version 20.0 or newer)
• npm (usually comes with Node.js)
• Git (version control system)
• Python (version 3.11 or newer)
• Pip Python package installer

Frontend

1. Clone the repository:

git clone https://github.com/gladw-in/online-ide.git
cd online-ide/Frontend

2. Install dependencies:

npm install

3. Remember to have the .env.

For Development

To start working on the project:

npm run dev

This starts the development server. Open your web browser and go to http://localhost:5173 (or the address shown in your terminal) to see the app.

Building for Release

To make the project ready for release:

npm run build

This creates optimized files in the dist folder.

Looking at the Release Version

To see how the release version looks:

npm run preview

Backend Login

1. Clone the repository:

cd Backend/Login

2. Install dependencies:

npm install

3. Remember to have the .env.

4. Run the server:

node server.js

GenAi

1. Clone the repository:

cd Backend/Genai

2. Install packages:

pip install -r requirements.txt

3. Remember to have the .env.

4. Run it:

python app.py

Screenshots

Homepage

HTML, CSS, JS

Python

JavaScript

C

C++

Java

C#

Rust

Go

Shell

SQL

MongoDB

Swift

Typescript

Dart

Kotlin

Perl

Scala

Julia

Accounts

Login

Register

License

You can use this under the MIT License. See LICENSE for more details.