The latest articles on DEV Community by Ridoy (@xnocode). https://dev.to/xnocode https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4003873%2F49ee8779-7b13-42ae-841f-1442884ae54d.jpg https://dev.to/xnocode en Ridoy Fri, 26 Jun 2026 14:37:37 +0000 https://dev.to/xnocode/cses-github-profile-badge-card-generator-37dk https://dev.to/xnocode/cses-github-profile-badge-card-generator-37dk <h3> Showcase your <strong>CSES (Computer Science Education Society)</strong> competitive programming stats directly on your GitHub Profile README! This Next.js service dynamically scrapes only your public profile data to generate customizable, production-ready SVG badges and cards. </h3> <h2> 🚀 How to Use in your GitHub Profile </h2> <p>You don't need to configure or code anything to use this. Simply follow these steps:</p> <h3> Step 1: Copy the Markdown Code </h3> <p>Choose either a complete statistics card or a compact badge:</p> <h4> Option A: CSES Profile Card (Recommended) </h4> <p>Displays your total submissions, first submission date, and programming languages breakdown:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight markdown"><code><span class="p">[</span><span class="nv">![CSES Profile Card</span><span class="p">](</span><span class="sx">https://cses-badge.vercel.app/api/card?user=YOUR_CSES_ID&amp;theme=github&amp;style=modern</span><span class="p">)</span>](https://cses.fi/user/YOUR_CSES_ID) </code></pre> </div> <h4> Option B: CSES Submissions Badge </h4> <p>Displays a simple badge with your total submissions:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight markdown"><code><span class="p">[</span><span class="nv">![CSES Submissions Badge</span><span class="p">](</span><span class="sx">https://cses-badge.vercel.app/api/badge?user=YOUR_CSES_ID&amp;theme=github&amp;style=modern</span><span class="p">)</span>](https://cses.fi/user/YOUR_CSES_ID) </code></pre> </div> <h3> Step 2: Get Your CSES User ID </h3> <ol> <li>Log in to <a href="https://cses.fi" rel="noopener noreferrer">cses.fi</a>.</li> <li>Click on your username in the top right to go to your profile.</li> <li>Look at the URL in your browser. It will look like <code>https://cses.fi/user/12345/</code>.</li> <li>Your <strong>CSES User ID</strong> is the number (e.g., <code>12345</code>).</li> </ol> <h3> Step 3: Paste and Customize </h3> <p>Replace <code>YOUR_CSES_ID</code> in the markdown code with your actual CSES User ID, and paste it into your GitHub profile README file (<code>README.md</code>).</p> <p>Live Website: <br> <a href="https://cses-badge.vercel.app/" rel="noopener noreferrer">https://cses-badge.vercel.app/</a><br> GitHub:<br> <a href="https://github.com/xnocode/CSES-Badge" rel="noopener noreferrer">https://github.com/xnocode/CSES-Badge</a></p> cses cpp competativeprogramming