Project Name - PairProgram

PairProgram

Overview

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).

Dev Build Process

1. Start Tailwind npx tailwindcss -i ./input.css -o ./static/output.css --watch
2. Start Server - command runs nodemon npm start

Data Model

Models/Relationships

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, }, });

Schema

Wireframes - not accurate visit website to see everything

/

/home

/username/{usename}/workspace/{workspaces} - page to edit code

Site map

/-> /login via auth0 -> /home -> /username/{usename}/workspace/{workspaces}

User Stories or Use Cases

1. as non-registered user, I can visit landing page
2. as a user, I can log in to the site
3. as a user, I can create and view my git repos
4. as a user, I can open a code editor/online ide
5. as a user, I can save my code
6. as a user, I can edit my code
7. as a user, I can interact with vm via a console

Research Topics

• (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

Annotations / References Used

1. Auth0
2. Tailwind
3. Daisy Ui
4. [Online Code Editors] - https://github.com/ajaxorg/ace
5. Next.js
6. GCP Compute API
7. xterm.js
8. monaco editor from microsoft