https://github.com/armanceau/codewars-activity
https://github.com/armanceau/codewars-activity
activity codewars codewars-activity codewars-api
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/armanceau/codewars-activity
- Owner: armanceau
- Created: 2025-03-29T18:28:08.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-30T07:29:38.000Z (about 1 year ago)
- Last Synced: 2025-04-30T22:54:59.374Z (about 1 year ago)
- Topics: activity, codewars, codewars-activity, codewars-api
- Language: JavaScript
- Homepage: https://codewars-activity.vercel.app
- Size: 92.8 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Codewars Activity SVG Generator
> Generate a contribution-style activity chart for your Codewars profile – similar to GitHub's contribution graph.
**Codewars Activity SVG Generator** is a lightweight Express.js application that creates a visual calendar-like heatmap (in SVG format) representing your daily coding activity on [Codewars](https://www.codewars.com). This project allows you to embed your Codewars stats in any website, GitHub README, or dashboard!
Inspired by GitHub’s contribution chart and developed with simplicity and performance in mind.
---
## 🔥 Features
- 🎯 Fetches kata completion data directly from the official [Codewars API](https://dev.codewars.com/).
- 📆 Generates a calendar-like SVG chart showing the days when katas were completed.
- 🎨 Color-coded squares represent activity intensity (number of katas solved per day).
- 🌍 Multi-language support: English, French, and Spanish.
- 🖼️ Embeddable for websites and markdown files.
---
## 📌 Live Example
Here is a real example of the SVG chart generated for a Codewars user:
Embed it anywhere you want using:
```html
```
Or in Markdown:
```markdown
```
## 💬 Display the Badge
Additionally, you can embed a dynamic badge in your repository or website to showcase your Codewars progress. This badge will update automatically based on your recent activity! By default, the badge will be displayed.
If you'd like to hide the badge, you can append `?streak=false` to the URL. If you don't specify this parameter, the badge will be displayed by default.
*Example of a Codewars activity badge:*
To hide the badge, use this Markdown (badge displayed by default):
```html
```
Or in Markdown:
```markdown
```
## 🚀 Usage
To generate your own Codewars activity chart:
```pgsql
```
## 📥 URL Parameters
| Parameter | Type | Required | Description |
|------------|--------|--------------|-----------|
| `username` | STRING | Yes | Your Codewars username |
| `langue` | STRING | Yes | Language for the labels. Supported: : `fr`, `en`, `es` |
## ✅ Examples
🔹English chart:
`https://codewars-activity.vercel.app/yourUsername/en/activity.svg`
🔹French version:
`https://codewars-activity.vercel.app/yourUsername/fr/activity.svg`
🔹Spanish version:
`https://codewars-activity.vercel.app/yourUsername/es/activity.svg`
## ⚙️ Installation
_To run this project locally:_
1. Clone this repository:
```bash
git clone https://github.com/armanceau/codewars-activity.git
cd codewars-activity
```
2. Install the dependencies:
```bash
npm install
cd src
node server.js
```
3. Your API is now running at `http://localhost:3000`.
## 🛠️ Tech Stack
- [x] Express.js – lightweight Node.js framework
- [x] Axios – for making HTTP requests to Codewars API
- [x] SVG – for generating dynamic, scalable contribution charts
## 💡 Why This Exists
There are many fun ways to visualize developer activity. This tool is designed for Codewars users who want to:
- Track their daily kata completions.
- Showcase their activity in a portfolio or GitHub README.
- Get motivated by visual feedback.
Unlike other services, this project is fully open-source, embeddable, lightweight, and can be hosted anywhere.
## 📈 SEO Keywords (for reference)
```
codewars activity graph, codewars stats svg, codewars contribution calendar, github-style activity chart for codewars, svg chart from codewars data, codewars kata tracker, open-source codewars svg chart
```
Made with ❤️ by [armanceau🐵](https://github.com/armanceau)