This repository provides a monorepo setup for web frontend development (React 18, Next.js 14, Chrome extension)
pnpm build # Build the projects for production
pnpm dev # Start the development server
pnpm lint # Lint the JavaScript/TypeScript files (not apply changes)
pnpm lint:fix # Lint the JavaScript/TypeScript files (apply changes)
pnpm test # Run the unit test
pnpm test:watch # Run the unit test in watch mode
pnpm test:ui # Run the unit test with UI
pnpm test:e2e # Run the end-to-end tests
pnpm test:e2e:ui # Run the end-to-end tests with UI
pnpm format # Format the JavaScript/TypeScript files using Biome and other files using Prettier.
pnpm generate # Generate a component from templates with plop
pnpm clean # Remove build artifacts and other generated files
| tool | description |
|---|---|
| turbo | Monorepo build system that speeds up and optimizes the development process |
| pnpm | Fast, disk space efficient package manager |
| biome | Linter & formatter for JavaScript, TypeScript, and JSON files |
| prettier | Formatter for various file types (Markdown, CSS, etc.) |
| husky | Tool for managing Git hooks easily |
| lint-staged | Runs linters on Git staged files, improving code quality before commits |
| plop | Micro-generator framework that helps create consistent project components |
| vitest | Testing framework for unit test |
| playwright | Testing framework for e2e test |
apps contains web applications.
Each application in apps/ only depends on packages within packages/, not on other applications.
| repo | description |
|---|---|
| next | Next.js 14 (App Router) application with Tailwind CSS |
| react | React 18 application using Vite for bundling and Tailwind CSS |
| react-chrome | Chrome Extension built with React 18, using CRX, Vite and Tailwind CSS |
| storybook | Storybook server |
packages contains reusable UI components and configuration files.
| repo | description |
|---|---|
| ui | Shared UI components library used across applications |
| config-tailwind | Tailwind CSS configuration shared across applications |
| config-typescript | TypeScript configuration shared across applications |