jeffemmett
/
canvas-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
canvas-website/README.md

3.5 KiB
Raw Blame History

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:

    git clone https://github.com/your-username/jeffemmett.git
cd jeffemmett

  2. Install dependencies:

    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:

    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:

npm run deploy:dev   # Deploy to development
npm run deploy:prod  # Deploy to production

Deploying the Worker

The worker is deployed using Wrangler:

npm run deploy:dev   # Deploy to development
npm run deploy:prod  # Deploy to production

You can also deploy the worker separately:

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