Scratchbox

An online IDE scratchpad

Scratchbox is a full stack React app built with Next.js and written in TypeScript. The backend is hosted on AWS and built with AWS Amplify using AWS AppSync for the GraphQL API, AWS Lambda for the compute layer, and DynamoDB for the database.

This project's aim is to let users experiment with React code in an online IDE which autosaves allowing users to use the IDE as a scratchpad that they can access from anywhere.

Technologies Used

• Next.js as the React framework
• TypeScript for writing type-safe source code
• GraphQL as the data query and manipulation language for the backend API
• TailwindCSS for writing utility-first CSS styles
• AWS Amplify for interfacing with backend cloud infrastructure

Navigating this project

• Components and styling
• GraphQL data model
• Autosaving and debounce logic
• Data fetching logic
• Updating user data logic
• Cypress test spec

My workflow

• Each feature branch merged into the production-ready main branch triggered an AWS CodeBuild CI/CD job to build and push the production build to S3 and invalidate the CloudFront cache
• Most of the backend infrastructure is declaratively provisioned using CloudFormation templates which were generated by AWS Amplify's CLI tool. The infrastructure-as-code templates were also checked into version control and deployed in the CI/CD pipeline
• I used TypeScript for type checking and also setup and wrote test samples using Cypress for E2E tests and Testing Library/Jest for integration tests.

Features

• Complete user auth flow:

  • Create account
  • Sign in to account
  • Forgot password reset request to email
  • Forgot password confirmation code submit

• Uses a bundler to transpile React and TypeScript (.tsx files) code to let users preview the React component exported from the IDE

• Formats the code in the code editor and autosaves automatically

• Implements CRUD functionality with authenticated Amazon AppSync GraphQL API calls to AWS Lambda resolvers to spin up an ephemeral function container to handle the request. AWS Lambda makes calls to the DynamoDB NoSQL database and formats the data to send back to the client thru AppSync. Amazon Cognito is used as the auth and user management service. This highly available and redundant infrastructure ensure users can access their data anywhere, anytime. All of the backend AWS services used are serverless which makes for an on-demand, pay-per-request billing model

Available Scripts

Install all dependencies:

npm i

Start the development server on port 3000

npm run dev

Generate a production build:

npm run build