rdamn - Online Playground IDEs

---

Table of Contents

• rdamn - Online Playground IDEs
  • Table of Contents
  • How Playgrounds Work
  • Tech Stack
  • Project Structure
  • Directory Structures
  • Getting Started
    • Install Node.js and clone all repositories
    • Install Dependencies for all repos
    • Start the Playground in Local Machine in Development mode
    • Start the Playground in a Local Docker Container in Development mode
    • Run the Next.js Development Server
  • Documentation

---

How Playgrounds Work

---

Tech Stack

• Next.js is used as the full stack React framework.
  • The website is hosted on Vercel.
  • The Codebase is written completely in Typescript running in strict mode. The use of any is disallowed by tsconfig.
  • Monaco Editor is used as the Code Editor for the Playgrounds.
  • Xterm.js is used as a terminal to connect to node-pty running on the Playgrounds.
  • Ajv is used to validate and parse all requests.
  • Auth0 is used for Authentication.
  • SWR is used for client-side data caching.
  • Tailwind CSS is used for styling.
  • DaisyUI is used as the primary Component UI library.
  • Prettier Code Formatter is used to enfore consistent code styling.
• MongoDB is used as the primary NoSQL Database.
  • MongoDB Atlas instance is used as the primary NoSQL DB.
  • Mongoose is used to model objects and make queries to MongoDB.
• Redis is used for caching and storing ephemeral data. ioredis is used as the Redis client to make queries.
  • Redis Enterprise Cloud (Non Persistant) is used as the primary Redis instance.
  • ioredis is used as the Redis Client.
• Amazon EC2 is used for the DNS and SSL Reverse Proxy Server for Playgrounds.
• Amazon ECS is used for running Playgrounds in Docker Containers on ephemeral AWS Fargate instances.
• Amazon S3 is used for storing Playground Files and Data across Sessions.
• Cloudflare is used to handle DNS Records for the Main Website and for DDOS Prevention.
• Let's Encrypt is used for generating SSL Certificates for the Servers.
• Sematext is used for Error logging.
• Checkly is used for Uptime Checks.

---

Project Structure

The Project is divided into three main repositories:

• rdamn: The Frontend code running Next.js and deployed on Vercel (rdamn.cloud).

• rdamn-server: The DNS (play.rdamn.cloud) and SSL Reverse Proxy Server (proxy.rdamn.cloud) for connecting to Playgrounds deployed on Amazon EC2.

• rdamn-playground: The Docker container for Playground that runs on AWS Fargate with Amazon ECS.

There are also a few additional repositories for Playground Starter Templates.
These are in the format rdamn-template-*

Current Templates:

• rdamn-template-html - A Basic HTML, CSS and JS Starter Template.
• rdamn-template-nextjs - A Next.js Starter Template with Yarn as Package Manager.

---

Directory Structures

rdamn
├── README.md (This file)
├── next.config.js (Next.js configuration file)
├── next-env.d.ts (Next.js types file)
├── package.json (npm package configuration file)
├── package-lock.json (npm lockfile)
├── postcss.config.js (PostCSS configuration file)
├── tailwind.config.js (Tailwind CSS configuration file)
├── tsconfig.json (Typescript configuration file)
├── .env (Untracked, Local Environment variables for storing Secrets)
├── .env.example (An example file showing which Environment variables are required)
├── .eslintignore (List of files to be ignored by ESLint)
├── .eslintrc.json (ESLint configuration file)
├── .gitattributes (Git pathname attributes)
├── .gitignore (List of files to be ignored by Git)
├── .prettierignore (List of files to be ignored by Prettier)
├── .prettierrc (Prettier configuration file)
├── .github/workflows/ (Directory with GitHub Actions Workflows)
├── public/ (Assets and metadata publicly served at root of domain)
├── src/
│   ├── components/ (Reusable JSX Components)
│   ├── constants/ (Global Constants)
│   ├── lib/ (Reusable Utility Functions)
│   ├── models/ (Mongoose Models)
│   ├── styles/ (Global CSS)
│   ├── types/ (Globally used Type Declarations)
│   ├── pages/ (Entrypoint of Website, served at domain root)
│   │   ├── _app.tsx (Common component to initialize pages and inject data)
│   │   ├── _document.tsx (Common serverside component to inject HTML tags to pages)
│   │   ├── 404.tsx (404 Page to show when requested page is not found)
│   │   ├── index.tsx (Homepage of the Website)
│   │   ├── api/ (Next.js API Routes)
│   │   ├── playgrounds/ (Page with list of Playgrounds to manage them)
└───└───└── playground/ (The Actual Playground Page)

rdamn-server
├── README.md
├── nodemon.json (Nodemon configuration file)
├── package.json (npm package configuration file)
├── package-lock.json (npm lockfile)
├── tsconfig.json (Typescript configuration file)
├── .env (Untracked, Local Environment variables for storing Secrets)
├── .env.example (An example file showing which Environment variables are required)
├── .eslintignore (List of files to be ignored by ESLint)
├── .eslintrc.json (ESLint configuration file)
├── .gitattributes (Git pathname attributes)
├── .gitignore (List of files to be ignored by Git)
├── .prettierignore (List of files to be ignored by Prettier)
├── .prettierrc (Prettier configuration file)
├── .github/workflows/ (Directory with GitHub Actions Workflows)
├── src/
│   ├── constants.ts (Global Constants)
│   ├── db.ts (Utility Function to connect to DB)
└───└── index.ts (Entrypoint of the Server, contains the DNS and SSL Reverse Proxy Server Code)

rdamn-playground
├── README.md
├── Dockerfile (All the commands to be run to create the Docker Image)
├── nodemon.json (Nodemon configuration file)
├── package.json (npm package configuration file)
├── package-lock.json (npm lockfile)
├── tsconfig.json (Typescript configuration file)
├── .dockerignore (List of files to be ignored by Docker)
├── .env (Untracked, Local Environment variables for storing Secrets)
├── .env.example (An example file showing which Environment variables are required)
├── .eslintignore (List of files to be ignored by ESLint)
├── .eslintrc.json (ESLint configuration file)
├── .gitattributes (Git pathname attributes)
├── .gitignore (List of files to be ignored by Git)
├── .prettierignore (List of files to be ignored by Prettier)
├── .prettierrc (Prettier configuration file)
├── .github/workflows/ (Directory with GitHub Actions Workflows)
├── src/
│   ├── constants/ (Global Constants)
│   ├── handlers/ (Websocket Route Handlers)
│   ├── s3Helpers (Utility Functions to connect to Save and Restore Files from S3)
└───└── index.ts (Entrypoint of the container, sets the container up to accept incoming connections and shutdown the container after the user disconnects)

---

Getting Started

Install Node.js and clone all repositories

git clone https://github.com/rishabhrao/rdamn
git clone https://github.com/rishabhrao/rdamn-server
git clone https://github.com/rishabhrao/rdamn-playground

Install Dependencies for all repos

cd rdamn
npm i
cd ../rdamn-server
npm i
cd ../rdamn-playground
npm i
cd ../

Start the Playground in Local Machine in Development mode

Note: You will need to have a user named rdamn for this to work.

cd rdamn-playground
npm run dev

OR

Start the Playground in a Local Docker Container in Development mode

cd rdamn-playground
echo NODE_ENV=development >> .env
npm run dev:buildDocker
npm run dev:startDocker

Run the Next.js Development Server

Note: You will need to run the following commands in a new terminal.

cd rdamn
npm run dev

Open http://localhost:3000 in your browser to see the result.

---

Documentation

See Documentation Here