154 lines
3.5 KiB
Markdown
154 lines
3.5 KiB
Markdown
# Jeff Emmett's Website
|
|
|
|
This is a collaborative canvas-based website built with React, TLDraw, and Cloudflare Workers.
|
|
|
|
## Features
|
|
|
|
- Interactive canvas with custom shapes and tools
|
|
- Real-time collaboration
|
|
- Markdown editing
|
|
- Video chat integration with Daily.co
|
|
- AI-powered text generation
|
|
- Responsive design
|
|
|
|
## Getting Started
|
|
|
|
### Prerequisites
|
|
|
|
- Node.js 18.0.0 or higher
|
|
- npm (comes with Node.js)
|
|
- A Cloudflare account (for deploying the worker)
|
|
- Daily.co API key (for video chat functionality)
|
|
- OpenAI or Anthropic API key (for AI features)
|
|
|
|
### Installation
|
|
|
|
1. Clone the repository:
|
|
```bash
|
|
git clone https://github.com/your-username/jeffemmett.git
|
|
cd jeffemmett
|
|
```
|
|
|
|
2. Install dependencies:
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
3. Create environment files:
|
|
|
|
Create a `.env.development` file in the root directory:
|
|
```
|
|
VITE_TLDRAW_WORKER_URL=http://localhost:5172
|
|
VITE_DAILY_API_KEY=your_daily_api_key
|
|
```
|
|
|
|
For production, create a `.env.production` file:
|
|
```
|
|
VITE_TLDRAW_WORKER_URL=https://api.yourdomain.com
|
|
VITE_DAILY_API_KEY=your_daily_api_key
|
|
```
|
|
|
|
4. Start the development server:
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
This will start both the client (on port 5173) and the worker (on port 5172).
|
|
|
|
5. Open your browser and navigate to:
|
|
```
|
|
http://localhost:5173
|
|
```
|
|
|
|
## Development
|
|
|
|
The project uses a dual-server architecture:
|
|
|
|
- **Client**: A Vite-powered React application (port 5173)
|
|
- **Worker**: A Cloudflare Worker for handling real-time collaboration and asset storage (port 5172)
|
|
|
|
### Project Structure
|
|
|
|
- `/src` - Frontend React application
|
|
- `/routes` - React Router routes
|
|
- `/shapes` - Custom TLDraw shape definitions
|
|
- `/tools` - Custom TLDraw tool definitions
|
|
- `/ui` - UI components
|
|
- `/lib` - Utility libraries
|
|
- `/worker` - Cloudflare Worker code
|
|
- `/public` - Static assets
|
|
|
|
### Adding API Keys
|
|
|
|
To use AI features, you'll need to add your API keys:
|
|
|
|
1. Open the application in your browser
|
|
2. Click on the settings icon in the toolbar
|
|
3. Enter your OpenAI API key
|
|
4. Click "Close" to save
|
|
|
|
## Deployment
|
|
|
|
### Deploying the Client
|
|
|
|
The client is deployed using Vercel:
|
|
|
|
```bash
|
|
npm run deploy:dev # Deploy to development
|
|
npm run deploy:prod # Deploy to production
|
|
```
|
|
|
|
### Deploying the Worker
|
|
|
|
The worker is deployed using Wrangler:
|
|
|
|
```bash
|
|
npm run deploy:dev # Deploy to development
|
|
npm run deploy:prod # Deploy to production
|
|
```
|
|
|
|
You can also deploy the worker separately:
|
|
|
|
```bash
|
|
cd worker
|
|
npx wrangler deploy --env production
|
|
```
|
|
|
|
## Configuration
|
|
|
|
### Wrangler Configuration
|
|
|
|
The `wrangler.toml` file contains configuration for the Cloudflare Worker. You'll need to set up:
|
|
|
|
- R2 buckets for asset storage
|
|
- Durable Objects for real-time collaboration
|
|
- Environment variables for API keys
|
|
|
|
### Vercel Configuration
|
|
|
|
The `vercel.json` file contains configuration for the Vercel deployment, including:
|
|
|
|
- Build commands
|
|
- Output directory
|
|
- Routing rules
|
|
- Cache headers
|
|
|
|
## Contributing
|
|
|
|
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
|
|
|
|
## License
|
|
|
|
This project is licensed under the ISC License - see the LICENSE file for details.
|
|
|
|
## Acknowledgments
|
|
|
|
- [TLDraw](https://tldraw.com) for the collaborative canvas
|
|
- [Daily.co](https://daily.co) for video chat functionality
|
|
- [Cloudflare Workers](https://workers.cloudflare.com) for serverless backend
|
|
- [Fal.ai](https://fal.ai) for the AI-powered image generation
|