Quicktype Web App

This is the web application for Quicktype, built with React, TypeScript, Vite, and Bun.

Prerequisites

• Bun 1.0.0 or higher
• Node.js 18.12.0 or higher (for compatibility)

Development

To start the development server:

bun run dev

The application will be available at http://localhost:5173

Building

To build the application for production:

bun run build

The built files will be in the dist directory.

Scripts

• bun run dev - Start development server
• bun run build - Build for production
• bun run preview - Preview production build
• bun run lint - Run ESLint
• bun run lint:fix - Run ESLint with auto-fix
• bun run format - Format code with Prettier

Project Structure

webapp/
├── src/
│   ├── components/     # React components
│   │   ├── editor/     # Editor-related components
│   │   ├── panels/     # Panel components
│   │   └── shared/     # Shared components
│   ├── services/       # Business logic and API services
│   ├── hooks/          # Custom React hooks
│   ├── utils/          # Utility functions
│   ├── types/          # TypeScript type definitions
│   ├── store/          # State management
│   └── styles/         # Global styles
├── public/             # Static assets
└── dist/               # Build output

Technologies

• React 18 - UI framework
• TypeScript - Type safety
• Vite - Build tool and dev server
• Bun - JavaScript runtime and package manager
• Tailwind CSS - Utility-first CSS framework
• Monaco Editor - Code editor
• quicktype-core - Core type generation library
• React Split Pane - Resizable split views
• Zustand - State management (ready to use)

Features

• JSON to TypeScript type generation
• Live code editing with Monaco Editor
• Split pane interface
• Dark theme
• Responsive layout

Integration with Quicktype Core

The webapp is integrated with the existing quicktype-core package in the monorepo. The integration is handled through the QuicktypeService in src/services/quicktype.service.ts.