The Technology Behind “Moyuk”: Create, Run and Share Tools with TypeScript on Your Browser

• TypeScript

  1,304 97,944 9.9 TypeScript

  TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  

The extraction of type information is done using the TypeScript Compiler API. It was quite challenging due to the lack of documentation and articles.

• bulletproof-react

  250 22,702 5.3 TypeScript

  🛡️ ⚛️ A simple, scalable, and powerful architecture for building production ready React applications.

One of the distinctive aspects of the project is the adoption of the features directory, inspired by Bulletproof React. I personally prefer organizing components with high functional cohesion close together, which is why I chose this structure. I try not to write too much logic inside the pages directory of Next.js and instead just combine and use components exported from features.

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• zustand

  248 42,526 8.8 TypeScript

  🐻 Bear necessities for state management in React

  

Initially, I used zustand as a lightweight state management library, but eventually replaced it with React's Context, which was deemed sufficient. This decision was based on a policy of minimizing global state, which has not caused much pain.

• zod

  287 30,174 9.1 TypeScript

  TypeScript-first schema validation with static type inference

Forms are built with the popular React Hook Form + Zod.

• Prisma

  442 37,151 9.9 TypeScript

  Next-generation ORM for Node.js & TypeScript | PostgreSQL, MySQL, MariaDB, SQL Server, SQLite, MongoDB and CockroachDB

  

The database is Supabase, with Prisma as the ORM, and tRPC for frontend-backend data exchange. tRPC endpoints are built on top of Next.js API Routes and deployed as Vercel Serverless Functions. Supabase is used as a managed PostgreSQL service.

• moyuk

  2 13 0.7

  Moyuk turns TypeScript functions into web apps in a few seconds.

  

Create an Issue in Moyuk's GitHub repository

• flow-pipeline

  171 163 1.7 Go

  A set of tools and examples to run a flow-pipeline (sFlow, NetFlow)

  

Cloudflare (Workers, Pages)

• InfluxDB

  www.influxdata.com sponsored

  Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

  

• vercel

  479 12,144 9.8 TypeScript

  Develop. Preview. Ship.

  

Vercel

• turbo

  57 24,900 9.9 Rust

  Incremental bundler and build system optimized for JavaScript and TypeScript, written in Rust – including Turbopack and Turborepo.

  

Turborepo (Monorepo)

• ts-ast-viewer

  5 1,104 6.5 TypeScript

  TypeScript AST viewer.

TypeScript AST Viewer - This viewer was useful in guessing the internal concepts and behavior of the Compiler API.

• supabase

  767 65,869 10.0 TypeScript

  The open source Firebase alternative.

  

The database is Supabase, with Prisma as the ORM, and tRPC for frontend-backend data exchange. tRPC endpoints are built on top of Next.js API Routes and deployed as Vercel Serverless Functions. Supabase is used as a managed PostgreSQL service.

• react-hook-form

  210 39,505 8.9 TypeScript

  📋 React Hooks for form state management and validation (Web + React Native)

  

Forms are built with the popular React Hook Form + Zod.

• React

  1,691 221,535 9.8 JavaScript

  The library for web and native user interfaces.

  

React

• Next.js

  2,040 120,313 10.0 JavaScript

  The React Framework

  

Next.js (Application framework)

• material-ui-docs

  121 311 10.0 TypeScript

  ⚠️ Please don't submit PRs here as they will be closed. To edit the docs or source code, please use the main repository:

  

I'm using MUI as the component library. The richness of MUI components greatly helped in quickly building the UI.

• esm.sh

  58 2,808 9.8 Go

  A fast, smart, & global CDN for modern(es2015+) web development.

  

Moyuk uses a CDN called esm.sh to download npm packages. esm.sh builds and distributes npm packages in ES Module format, so you can use npm packages in web-standard JS runtimes like browsers.

• esbuild

  322 37,249 9.5 Go

  An extremely fast bundler for the web

Internally, esbuild is used. Esbuild has a plugin system, and I created custom plugins to resolve import statements like npm: and https://.

• Docusaurus

  282 52,824 9.5 TypeScript

  Easy to maintain open source documentation websites.

  

Docusaurus (Documentation)

• codesandbox-client

  366 12,882 9.5 JavaScript

  An online IDE for rapid web development

  

First, create the iframe dynamically. Add the sandbox attribute to the iframe and serve the content loaded into the iframe from a separate domain (different origin) from moyukapp.com. This prevents any access from inside the iframe to the outside. Note that CodeSandbox also uses an iframe, but Moyuk's settings are much stricter.

• WorkOS

  workos.com sponsored

  The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.

  

Suggest a related project