Project Name - PairProgram
A browser based code editor with web-browsing and chatgpt/llms built into it. I wanted an IDE where I can run code and see the results along side my figma diagram. A single source of truth for all things frontend web development wise (I hate having to switch tabs on my laptop).
- Start Tailwind
npx tailwindcss -i ./input.css -o ./static/output.css --watch
- Start Server - command runs nodemon
npm start
const userSchema = new mongoose.Schema({
login: String,
id: Number,
node_id: String,
avatar_url: String,
gravatar_id: String,
url: String,
html_url: String,
followers_url: String,
following_url: String,
gists_url: String,
starred_url: String,
subscriptions_url: String,
organizations_url: String,
repos_url: String,
events_url: String,
received_events_url: String,
type: String,
site_admin: Boolean,
name: String,
company: String,
blog: String,
location: String,
email: String,
hireable: Boolean,
bio: String,
twitter_username: String,
public_repos: Number,
public_gists: Number,
followers: Number,
following: Number,
created_at: Date,
updated_at: Date,
});
const workspace = new mongoose.Schema({
work_id: { type: String, required: true },
repo_url: { type: String, required: true },
languages: [{ type: String }],
});
const instance = new mongoose.Schema({
instanceName: { type: String, required: true },
userId: { type: String, required: true },
workspace: { type: String, required: true },
sourceImage: { type: String, required: true },
networkName: { type: String, required: true },
serverIP: { type: String, required: true },
TimeCreated: { type: Date, default: Date.now },
username: { type: String, required: true },
});
const feedbackSchema = new mongoose.Schema({
name: {
type: String,
required: true,
},
email: {
type: String,
required: true,
},
feature: {
type: String,
required: true,
},
message: {
type: String,
required: true,
},
});
/username/{usename}/workspace/{workspaces} - page to edit code
/-> /login via auth0 -> /home -> /username/{usename}/workspace/{workspaces}
- as non-registered user, I can visit landing page
- as a user, I can log in to the site
- as a user, I can create and view my git repos
- as a user, I can open a code editor/online ide
- as a user, I can save my code
- as a user, I can edit my code
- as a user, I can interact with vm via a console
- (3 points) SSO - through Auth0
- I'm going to use Auth0 to enable things like SSO
- This will enable users to use their github to login to the workspace thus making the onboarding process super duper easy
- See
https://marketplace.auth0.com/integrations/github-social-connection
- Should be somewhat easy to integrate but, I am sure it will come with its own quirks - hence a 3 is justified
- (2 points) Styling using tailwind
- Enables me to style components/elements/views only using classnames
- Speeds up process of styling all
- See
https://tailwindcss.com/
- This is pretty easy to integrate hence why the effort score is 2
- (1 point) Prebuilt components via daisy ui
- Going off tailwind, I will be using prebuilt components from daisyui so that I can focus on the more difficult tasks at hand
- I am going to
- (5 points) Online code editing software (I have several options - Custom)
- The hard part of this project will be developing my own online code editing software
- Plus managing multi-tenancy between different clients
- Still haven't quite figured out how I want to do this
- https://github.com/ajaxorg/ace - this might be worthwhile
- (5 points) Next Js App
- (5 points) GCP VM creation/management
- (3 points) Deployment via vercel
11 points total out of 8 required points - I didn't want to do the math but, I bet I am over 8 points at this point.
[Basic Structure] - since this is a next.js app with routing done via the app router - see file paths under gitonline/src
- Auth0
- Tailwind
- Daisy Ui
- [Online Code Editors] - https://github.com/ajaxorg/ace
- Next.js
- GCP Compute API
- xterm.js
- monaco editor from microsoft