aewing
c33ee3dfe7
- Create modular project structure with src/backend, src/frontend, public - Hono server with routing, static file serving, and API endpoints - TailwindCSS styling pipeline with Tailwind CLI - Vanilla JS frontend (extensible for frameworks) - Complete TypeScript configuration and type checking - Auth module as self-contained submodule - Ready for development: bun run dev (port 3000) - All dependencies installed and tested Also: - Lock main branch with read-only settings in VS Code - Create .github/copilot-instructions.md with Monica persona - Initialize session logging system Status: Project ready for feature development
NewApproach
A full-stack TypeScript application with Hono backend, TailwindCSS styling, and Bun runtime.
Stack
- Runtime: Bun (fast JavaScript runtime and package manager)
- Backend: Hono (lightweight web framework)
- Language: TypeScript (both frontend and backend)
- Styling: TailwindCSS + PostCSS
- Package Manager: Bun
Project Structure
NewApproach/
├── src/
│ ├── backend/
│ │ ├── server.ts # Hono server entry point
│ │ └── api.ts # API utilities
│ ├── frontend/
│ │ └── (UI components, if needed)
│ └── auth/
│ ├── auth.ts # Universal auth module
│ └── auth-test.html # Auth testing
├── public/
│ ├── index.html # Main HTML entry point
│ ├── app.js # Frontend logic
│ └── output.css # Compiled TailwindCSS
├── styles/
│ └── input.css # TailwindCSS directives
├── package.json
├── tsconfig.json
├── tailwind.config.js
├── postcss.config.js
└── README.md
Installation
bun install
Development
# Start development server with hot reload
bun run dev
Server runs on http://localhost:3000
Build
# Build CSS and TypeScript
bun run build
Available Scripts
bun run dev- Start development server with watch modebun run build- Build styles and backend codebun run build:styles- Compile TailwindCSS to output.cssbun run start- Run production buildbun run typecheck- Check TypeScript types without building
Architecture Notes
- Backend: Hono with simple routing and static file serving
- Frontend: Vanilla JavaScript with TailwindCSS (no framework required, extensible)
- Styling: TailwindCSS utilities only; custom CSS documented when added
- Auth: Modular auth system in
/src/auth(decoupled from app logic)
Environment
Configure with environment variables (.env file):
PORT=3000
Notes
- The auth module is self-contained and can be used independently
- TypeScript compilation and type checking ensure type safety
- TailwindCSS purges unused styles in production builds
- Bun handles all package management and script execution