CommitCampfire

A 3D globe where your circle’s commits spark beams of light across the world.

Features

• 3D Globe Visualization: Interactive globe displaying commit activity.
• Following Activity: Visualizes commits from people you follow over the last 3 days.
• Real-time Updates: See new commits appear as beams of light on the globe.
• Responsive Design: Works across different screen sizes.

Tech Stack

• Frontend: React, Vite
• 3D Graphics: Three.js, React Three Fiber, React Globe GL
• Styling: Vanilla CSS, Framer Motion
• Icons: Lucide React
• Utils: d3-geo, date-fns
• Backend/Auth: Cloudflare Workers

Setup & Installation

Prerequisites

• Node.js (v18 or higher recommended)
• npm or yarn

Installation

1. Clone the repository:

   git clone https://github.com/hearsilent/CommitCampfire.git
   cd CommitCampfire

2. Install dependencies:

   npm install

3. Register a new GitHub App:

   • Go to GitHub Developer Settings > New GitHub App.
   • Set Homepage URL and Callback URL to http://localhost:5173 or your GitHub Pages URL.
   • Uncheck Active under "Webhook".
   • Under Permissions & events, select:
     • Followers: Read-only
   • Click Create GitHub App.
   • Copy the Client ID and Client Secret.

4. create a .env file in the root directory for the frontend:

   VITE_WORKER_URL=your_cloudflare_worker_url_here
   VITE_GITHUB_CLIENT_ID=your_client_id_here

5. create a .dev.vars file for the Worker backend:

   GITHUB_CLIENT_ID=your_client_id_here
   GITHUB_CLIENT_SECRET=your_client_secret_here

Running Locally

Start the development server:

npm run dev

The application will be available at http://localhost:5173.

Building for Production

Build the application for production:

npm run build

Preview the production build:

npm run preview

Deployment

Deploy to GitHub Pages:

npm run deploy

Deploy the Cloudflare Worker:

npx wrangler deploy

Set up production secrets on Cloudflare:

npx wrangler secret put GITHUB_CLIENT_ID
npx wrangler secret put GITHUB_CLIENT_SECRET