GitHub Chart Builder

Generate customizable SVG contribution charts for your portfolio or README.

---

A simple tool to customize your GitHub contribution graph and generate a clean SVG image to embed in your portfolio or profile README.

Features

• Interactive Preview: Type any GitHub username to see their graph instantly.
• Custom Themes: Pick from built-in presets or configure custom Hex colors for active/inactive days.
• Tweak Everything: Adjust months (1-48), box sizes, cell spacing, and border radius.
• Unified & Containerized: Single React + Node application with simple Docker/Compose setup.

Query Options

The backend handles parameters directly via URL queries, including:

• months (1-48)
• boxSize (pixel dimension of grid cells)
• boxSpacing (pixel spacing between grid cells)
• borderRadius (border curves for grid cells)
• inactiveColor (hex code for zero contribution days)
• minActivityColor (hex code for low contribution days)
• maxActivityColor (hex code for high contribution days)
• showLabels (boolean flag to toggle month listings)
• labelColor (hex code for month labels)

---

Screenshots

---

Local Development

To run the application locally, you will need a personal GitHub access token (minimal read:user scope).

1. Clone the repository:

   git clone https://github.com/reazndev/github-chart-builder.git
   cd github-chart-builder

2. Install dependencies:

   npm install

3. Setup environment variables: Copy .env.example to .env and fill in your GITHUB_TOKEN:

   cp .env.example .env

4. Launch in development mode:

   npm run dev

   Runs both Vite and Express concurrently. Open http://localhost:5173 to view the app.

---

Production & Docker Deployment

To build and host using Docker Compose:

1. Copy .env.example to .env and specify your GITHUB_TOKEN (required for querying public contribution graphs). If you want to support private repositories via GitHub OAuth2, also configure GITHUB_CLIENT_ID, GITHUB_CLIENT_SECRET, GITHUB_REDIRECT_URI, and a secure ENCRYPTION_KEY.
2. Spin up the container stack:

   docker compose up -d

   The container exposes port 8030, serving both the API endpoints and the optimized built frontend assets.

---

Contributing

Feel free to open an issue or submit a pull request if you run into bugs or have layout improvements to share!

Contributors

Reazn Author @reazndev

License

This project is MIT licensed — see LICENSE.