An online IDE with secure login functionality that allows users to run code, generate new code, refactor existing code, and share it with anyone.
Diagram
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.
- 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.
- sass: 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).
- react-oauth/google: A React wrapper for Google OAuth integration, providing easy authentication with Google accounts.
- react-google-recaptcha-v3: A React component for integrating Google reCAPTCHA v3 to protect your application from spam and abuse.
- @marsidev/react-turnstile: A React wrapper for Cloudflare Turnstile, used to protect forms and authentication flows from bots and abuse without impacting user experience.
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.
- crypto: A Node.js core module that provides cryptographic functionality, such as hashing, HMAC, and encryption.
- nodemailer: A module for sending emails from Node.js applications using SMTP, with support for attachments and HTML content.
- path: A Node.js core module for working with file and directory paths.
- axios: A popular promise-based HTTP client for making requests from Node.js and browsers, often used for interacting with APIs.
- google-auth-library: A library for authenticating with Google services, used to handle OAuth 2.0 authorization in Node.js.
- helmet: Middleware that sets various HTTP security headers (HSTS, X‑Frame‑Options, etc.).
- pino: A very fast, low‑overhead JSON logger.
- pino-http: Express middleware for automatic request logging with Pino.
- @upstash/ratelimit: Distributed rate limiting using Upstash Redis.
- @upstash/redis: Redis client for Upstash, used for storing rate‑limit counters.
Python Libraries:
- google-genai: 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.
- 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.
- redis: A Python client for interacting with Redis, an in-memory data structure store, used for caching, message brokering, and more.
- uuid: A Python module for generating universally unique identifiers (UUIDs), useful for creating unique keys or identifiers.
- datetime: A module in Python for manipulating dates and times, including working with time zones and formatting.
- pyjwt: A library for encoding and decoding JSON Web Tokens (JWT), commonly used for authentication in web applications.
- functools: A module in Python providing higher-order functions to work with functions and callable objects, such as
wraps.
- requests: A simple HTTP library for Python, used for making HTTP requests like GET, POST, PUT, DELETE, etc., with ease and flexibility.
- logging: A built-in Python module that provides flexible logging of messages, helping to track application events, errors, and debug information.
- flask-limiter: A Flask extension for rate limiting that supports Redis, memory, and other backends. It helps prevent API abuse by limiting the number of requests a client can make in a given time window.
- json: A built-in Python module for encoding and decoding JSON data, used for parsing request bodies and serializing responses.
- urllib.parse: A built-in Python module for parsing URLs and percent‑encoding special characters, used to safely construct Redis connection strings.
How to Set Up and Use
To set up and run:
What You Need
- Node.js (latest version)
- npm (usually comes with Node.js)
- Git (version control system)
- Python (latest version)
- Pip Python package installer
Clone the repository:
git clone --depth 1 https://github.com/gladw-in/online-ide.git
Backend Login
- Go to the Backend/Login folder:
cd Backend/Login
- Install dependencies:
npm install
-
Make sure the .env file is present and properly configured.
-
Run the server:
node server.js
Note:
Ensure that Genai and TempFile are assigned different ports.
You can modify the port by:
if __name__ == "__main__":
app.run(debug=False, port = <port>)
GenAi
- Go to the Backend/Genai folder:
cd Backend/Genai
- Install packages:
pip install -r requirements.txt
-
Make sure the .env file is present and properly configured.
-
Run it:
python app.py
TempFile
- Go to the Backend/TempFile folder:
cd Backend/TempFile
- Install packages:
pip install -r requirements.txt
-
Make sure the .env file is present and properly configured.
-
Run it:
python app.py
Frontend
- Go to the Frontend folder:
cd ./Frontend
- Install dependencies:
npm install
- Make sure the .env file is present and properly configured.
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
Screenshots
Homepage
HTML, CSS, JS
Python
JavaScript
C
C++
Java
C#
Rust
Go
Verilog
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.
评论