A modern full-stack web application built with React Router v7 and deployed on Cloudflare Workers, featuring AI-powered chat interfaces and multi-language support.

• AI-Powered Chat Interface: Interactive chat with artifact generation for code, documents, and visualizations
• Multi-language Support: Full internationalization for English, Japanese, and Chinese (Simplified/Traditional)
• Modern Tech Stack: React Router v7 with SSR, TypeScript, and Tailwind CSS v4
• Edge Computing: Deployed on Cloudflare Workers for global low-latency access
• File Management: Direct file uploads to Cloudflare R2 with pre-signed URLs
• Form Handling: Type-safe forms with Zod validation and spam protection
• Component Library: Pre-built UI components using shadcn/ui

• React 19 with React Router v7
• TypeScript for type safety
• Tailwind CSS v4 with shadcn/ui components
• Framer Motion for animations
• MDX for content authoring

• Cloudflare Workers - Edge runtime
• Cloudflare D1 - SQLite database
• Cloudflare R2 - Object storage
• Cloudflare Workflows - Async processing
• Kysely - Type-safe SQL query builder

• AI SDK - Multi-provider LLM integration
• Assistant UI - Chat interface components
• Support for Google Gemini and OpenAI

• Node.js 20+
• pnpm 9+
• Cloudflare account (for deployment)
• API keys for AI providers (optional)

1. Clone the repository

   git clone https://github.com/[your-username]/techtalk.jp.git
   cd techtalk.jp

2. Install dependencies

   pnpm install

3. Set up environment variables

   cp .env.example .env

   Configure your environment variables:

   • GOOGLE_GENERATIVE_AI_API_KEY - For Google Gemini
   • OPENAI_API_KEY - For OpenAI
   • Database and R2 configurations (auto-configured for local development)

4. Run database migrations

   pnpm migrations:apply

5. Start development server

   pnpm dev

   Visit http://localhost:5173

• pnpm dev - Start React Router dev server (port 5173)
• pnpm start - Start Cloudflare Workers dev server (port 8788)
• pnpm build - Build for production
• pnpm deploy - Deploy to Cloudflare
• pnpm typecheck - Run TypeScript type checking
• pnpm lint - Run linter
• pnpm format - Check code formatting
• pnpm validate - Run all checks

techtalk.jp/
├── app/
│   ├── routes/          # File-based routing
│   ├── components/      # React components
│   ├── services/        # Backend services
│   └── i18n/           # Internationalization
├── workers/            # Cloudflare Workers entry
├── migrations/         # Database migrations
└── public/            # Static assets

• / - Homepage (multi-language)
• /chat - AI chat interface
• /assistant - Assistant UI demo
• /demo/* - Feature demonstrations
• /api/* - API endpoints

1. Configure Cloudflare

   pnpm wrangler login

2. Create D1 database

   pnpm wrangler d1 create techtalkjp

3. Create R2 bucket

   pnpm wrangler r2 bucket create techtalk

4. Deploy to Cloudflare

   pnpm deploy

• Environment variables for sensitive data
• Honeypot validation for forms
• Pre-signed URLs for secure file uploads
• Type-safe database queries

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

This project is licensed under the MIT License - see the LICENSE file for details.

• React Router for the amazing framework
• Cloudflare for the edge platform
• shadcn/ui for the component library
• AI SDK for LLM integration