| name | modern-web-app |
| description | Tools for building modern React webapps with TypeScript, Tailwind CSS and shadcn/ui. Best suited for applications with complex UI components and state management. |
modern-web-app
Stack: React + TypeScript + Vite + Tailwind CSS + shadcn/ui
Workflow
scripts/init-webapp.sh <website-title> [output-dir] - Initialize project
- Edit source code in
src/
- Build the React app
- Deploy the build output in
dist/
Quick Start
1. Initialize
bash scripts/init-webapp.sh "My Website"
bash scripts/init-webapp.sh "My Website" ./my-project
cd ./app
AI Agent Notes:
- Default project path is
./app (relative to current working directory)
- Second argument allows custom output directory
- Non-interactive execution with auto-confirm
This creates a fully configured project with:
- React + TypeScript (via Vite)
- Tailwind CSS 3.4.19 with shadcn/ui theming system
- Path aliases (
@/) configured
- 40+ shadcn/ui components pre-installed
- All Radix UI dependencies included
- Production build optimization with Vite
- Node 20+ compatibility (auto-detects and pins Vite version)
2. Develop
Edit generated files in src/:
- Page sections:
src/sections/
- Custom React hooks:
src/hooks/
- TypeScript definitions:
src/types/
3. Build
cd ./app && npm run build 2>&1
Output (dist/):
index.html - Entry point
assets/index-[hash].js - Bundled JS
assets/index-[hash].css - Bundled CSS
- Optimized images, fonts, other assets
Optimizations: Tree-shaking, code splitting, asset compression, minification, cache-busting hashes.
4. Deploy
Deploy the build output in <project-dir>/dist/
Debugging
- Fix source files
npm run build
- Test
dist/
- Redeploy
Reference