Skip to content

Commit 303d3dc

Browse files
TheAdichTheAdich
committed
minor_changes
1 parent 2c1012a commit 303d3dc

File tree

2 files changed

+215
-6
lines changed

2 files changed

+215
-6
lines changed

‎README.md

Lines changed: 208 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,208 @@
1+
# Custom Code Editor
2+
<p align=middle>
3+
<img src="./banner.svg" height="200" alt="Custom Code Editor"/>
4+
</p>
5+
6+
<div align="center">
7+
8+
[![Join Our Discord](https://img.shields.io/badge/Discord-Join%20Server-blue?logo=discord&style=for-the-badge)](https://discord.com/invite/Yn9g6KuWyA)
9+
[![Subscribe on YouTube](https://img.shields.io/badge/YouTube-Subscribe-red?logo=youtube&style=for-the-badge)](https://www.youtube.com/@dhanushnehru?sub_confirmation=1)
10+
[![Subscribe to Newsletter](https://img.shields.io/badge/Newsletter-Subscribe-orange?style=for-the-badge)](https://dhanushn.substack.com/)
11+
12+
</div>
13+
14+
15+
This project is a React-based code builder that utilizes the Monaco Editor. It allows users to write and execute code snippets within a web browser. It uses Judge0 as a code execution system
16+
17+
## Getting Started
18+
Follow these instructions to get the project up and running on your local machine.
19+
20+
## Prerequisites
21+
Node.js installed on your machine
22+
npm or yarn package manager
23+
24+
## Installation
25+
Clone the repository to your local machine:
26+
27+
```
28+
git clone <repository-url>
29+
```
30+
- Note:- Please fill in the necessary keys in the `.env` file for successful code submissions
31+
# Without Docker
32+
Install dependencies using npm or yarn:
33+
bash
34+
```
35+
npm install
36+
# or
37+
yarn install
38+
```
39+
40+
To Start project
41+
```
42+
npm run start
43+
```
44+
45+
## Server is being hosted at render with domain name
46+
https://webservice-nbbv.onrender.com
47+
## To set up the server
48+
Inside root directory of the project run these commands
49+
```
50+
cd server
51+
npm install
52+
node index.js
53+
```
54+
55+
## Setting up the database
56+
```
57+
Use your own mongodb connection uri and update in the index.js
58+
```
59+
<p>Server would be running on port 5000</p>
60+
61+
62+
# With Docker
63+
## Prerequisites
64+
Before starting with the project, ensure you have Docker installed. If not, follow these steps to install Docker:
65+
66+
### Docker Installation
67+
68+
1. **Windows**:
69+
- Download Docker Desktop from [Docker Hub](https://hub.docker.com/editions/community/docker-ce-desktop-windows).
70+
- Follow the installation instructions.
71+
72+
2. **Mac**:
73+
- Download Docker Desktop from [Docker Hub](https://hub.docker.com/editions/community/docker-ce-desktop-mac).
74+
- Follow the installation instructions.
75+
76+
3. **Linux**:
77+
- Docker Engine installation varies by Linux distribution. Refer to [Docker's official documentation](https://docs.docker.com/engine/install/) for installation instructions specific to your Linux distribution.
78+
79+
To start the project using Docker Compose:
80+
1. Build and run the project:
81+
```bash
82+
#Detach mode
83+
docker-compose up -d
84+
```
85+
```
86+
docker-compose up
87+
```
88+
2. Access the project:
89+
- Once Docker Compose has started the containers, access the project using your web browser at `http://localhost:3000`.
90+
91+
3. Close project
92+
```
93+
docker-compose down
94+
```
95+
96+
## Setting Up Judge0 with RapidAPI
97+
98+
1. **Navigate to Judge0**:
99+
- Start by going to the [Judge0 page on RapidAPI](https://rapidapi.com/judge0-official/api/judge0-ce).
100+
- Select the **Basic Plan**, which offers a limit of 50 requests per day.
101+
102+
2. **Sign Up for the Basic Plan**:
103+
- RapidAPI hosts Judge0, so you need to sign up for the Basic Plan on RapidAPI.
104+
- Follow the sign-up process to get started.
105+
106+
3. **Access the RapidAPI Dashboard**:
107+
- After signing up, go to the [RapidAPI Dashboard](https://rapidapi.com/judge0-official/api/judge0-ce).
108+
- In the navigation bar, select **API Hub**.
109+
110+
4. **Navigate to the API's Section**:
111+
- Click on **Endpoints** to view
112+
- You will see multiple endpoints such as Submissions, About, and Languages.
113+
114+
5. **Using the Submissions Endpoint**:
115+
- For code submissions, go to the **Submissions** endpoint and then select **Create Submission**.
116+
- Here, you will find `X-RapidAPI-Key`, `X-RapidAPI-Host`, and the URL (`url`) needed for API calls. Url is located below the "Code Snippets" section.
117+
118+
6. **Copy Required Keys**:
119+
- Copy the `RAPIDAPI_HOST` and `RAPIDAPI_KEY` values. These are necessary to perform API calls to the code execution system.
120+
- Ensure you have these keys saved as they will be used in your API requests.
121+
122+
By following these steps, you'll be able to set up Judge0 for code submissions using RapidAPI's infrastructure, enabling you to execute and evaluate code within your application.
123+
124+
## Firebase Configuration
125+
126+
1. Create a Firebase account at [firebase.google.com](https://firebase.google.com/) and go to the console.
127+
2. Go to Authentication.
128+
3. In Sign-in method, choose the Google provider.
129+
4. Go to settings and you'll see authorized domains.
130+
5. Add your production URL in authorized domains for our project: `https://custom-code-editor.vercel.app/`
131+
6. Create a `.env` file in your root directory and add these values:
132+
```
133+
REACT_APP_FIREBASE_API_KEY=""
134+
REACT_APP_FIREBASE_AUTH_DOMAIN=""
135+
REACT_APP_FIREBASE_PROJECT_ID=""
136+
REACT_APP_FIREBASE_STORAGE_BUCKET=""
137+
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=""
138+
REACT_APP_FIREBASE_APP_ID=""
139+
REACT_APP_BACKEND=""
140+
```
141+
142+
## Local Configuration
143+
144+
- Create a .env file in the root directory of your project if it doesn't already exist.
145+
- You can copy content from `.env.example` to `.env`, you can run below command.
146+
```
147+
cp .env.example .env
148+
```
149+
- Set the following environment variables in the .env file:
150+
151+
```
152+
REACT_APP_RAPID_API_HOST=YOUR_HOST_URL
153+
REACT_APP_RAPID_API_KEY=YOUR_SECRET_KEY
154+
REACT_APP_RAPID_API_URL=YOUR_SUBMISSIONS_URL
155+
156+
# key for docker container name
157+
COMPOSE_PROJECT_NAME=custom_code_editor
158+
```
159+
Replace YOUR_HOST_URL, YOUR_SECRET_KEY, & YOUR_SUBMISSIONS_URL with the appropriate values for your Rapid API and Judge0 API endpoints.
160+
161+
## Server Setup Configuration
162+
Create a .env file in the root directory of your project if it doesn't already exist.
163+
Set the JUDGE0_SUBMISSION_URL environment variable in the .env file. This variable should point to the URL of the Judge0 API endpoint you want to use for code execution. For example:
164+
plaintext
165+
166+
```
167+
JUDGE0_SUBMISSION_URL=https://api.judge0.com/submissions
168+
```
169+
170+
Replace https://api.judge0.com/submissions with the appropriate URL for your Judge0 API endpoint.
171+
172+
Running the Development Server
173+
Once the configuration is complete, you can start the development server to see the React code builder in action.
174+
175+
```
176+
npm start
177+
# or
178+
yarn start
179+
```
180+
181+
Open your web browser and navigate to http://localhost:3000 to access the application.
182+
183+
## Usage
184+
185+
- Write your code in the Monaco Editor.
186+
- Execute the code snippet by clicking the "Run" button.
187+
- View the output in the console or output panel.
188+
189+
## Important Information
190+
Currently the project url is based out of the free version of judge0 this means at most one can have 50 requests per day.
191+
192+
## Contributing
193+
Contributions are welcome! Feel free to submit pull requests or open issues.
194+
195+
### Contributors
196+
<a href="https://github.com/DhanushNehru/CustomCodeEditor/graphs/contributors">
197+
<img src="https://contrib.rocks/image?repo=DhanushNehru/CustomCodeEditor" />
198+
</a>
199+
200+
## Gitpod
201+
202+
In the cloud-free development environment where you can directly start coding.
203+
204+
You can use Gitpod in the cloud [![Gitpod Ready-to-Code](https://img.shields.io/badge/Gitpod-Ready--to--Code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/DhanushNehru/CustomCodeEditor/)
205+
206+
----
207+
208+
Feel free to customize this README.md according to your project's specific requirements and features. Let me know if you need further assistance!

‎src/components/firebase.js

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,13 @@ import { getAuth, GoogleAuthProvider, GithubAuthProvider, signInWithPopup } from
55
import { getFirestore } from "firebase/firestore";
66

77
const firebaseConfig = {
8-
apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
9-
authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
10-
projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
11-
storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
12-
messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
13-
appId: process.env.REACT_APP_FIREBASE_APP_ID
8+
apiKey: "AIzaSyD1hSaR5PzPXYs90AhuFshIE85ZGBsWT3I",
9+
authDomain: "codelive-503da.firebaseapp.com",
10+
projectId: "codelive-503da",
11+
storageBucket: "codelive-503da.appspot.com",
12+
messagingSenderId: "52006541158",
13+
appId: "1:52006541158:web:5cdc1584e3bcd5d1c19aa7",
14+
measurementId: "G-HB4DLV7RBZ"
1415
};
1516

1617

0 commit comments

Comments
 (0)