DEV Community: Aswanth M.C The latest articles on DEV Community by Aswanth M.C (@aswanth_mc_d870caf3a1c4a). https://dev.to/aswanth_mc_d870caf3a1c4a https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3711872%2Fc4059d51-f910-4f52-af11-17a963021f09.jpg DEV Community: Aswanth M.C https://dev.to/aswanth_mc_d870caf3a1c4a en I Built a GitHub Activity Visualizer Dashboard Using JavaScript (Looking for Feedback!) Aswanth M.C Fri, 10 Apr 2026 04:23:19 +0000 https://dev.to/aswanth_mc_d870caf3a1c4a/i-built-a-github-activity-visualizer-dashboard-using-javascript-looking-for-feedback-2fih https://dev.to/aswanth_mc_d870caf3a1c4a/i-built-a-github-activity-visualizer-dashboard-using-javascript-looking-for-feedback-2fih <h1> šŸš€ I Built a GitHub Activity Visualizer Dashboard (Looking for Feedback!) </h1> <p>Hey developers šŸ‘‹</p> <p>I recently built a <strong>GitHub Activity Visualizer</strong> ā€” a web app that helps you explore and understand your GitHub profile in a more visual and interactive way.</p> <h2> šŸ” What is this project? </h2> <p>This is a dashboard-style web app where you can:</p> <ul> <li>Enter any GitHub username</li> <li>View profile details</li> <li>Explore repositories</li> <li>Analyze languages used</li> <li>See commit activity over time</li> <li>Visualize contributions in a heatmap</li> </ul> <h2> šŸŒ Live Demo </h2> <p>šŸ‘‰ <a href="https://aswanth-mc.github.io/GitHub-activity-visualizer/" rel="noopener noreferrer">View Live Project</a></p> <h2> šŸ“ø Demo Preview </h2> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Faswanth-mc%2FGitHub-activity-visualizer%2Fblob%2Fmain%2Fassests%2Fpreview%2FScreenshot%2520%283%29.png%3Fraw%3Dtrue" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fgithub.com%2Faswanth-mc%2FGitHub-activity-visualizer%2Fblob%2Fmain%2Fassests%2Fpreview%2FScreenshot%2520%283%29.png%3Fraw%3Dtrue" alt="Dashboard Preview" width="733" height="730"></a></p> <h2> āœØ Features </h2> <ul> <li>šŸ‘¤ Clean Profile Card (avatar, bio, followers)</li> <li> <p>šŸ“¦ Repository Section with:</p> <ul> <li>Stars ā­</li> <li>Forks šŸ“</li> <li>Language badges</li> <li>Forked repo indicator</li> </ul> </li> <li><p>šŸ’» Language Usage Visualization</p></li> <li><p>šŸ“ˆ Commits Over Time (chart)</p></li> <li><p>šŸŸ© Contribution Heatmap (GitHub-style)</p></li> </ul> <h2> šŸ› ļø Tech Stack </h2> <ul> <li>HTML, CSS, JavaScript (Vanilla)</li> <li>GitHub REST API</li> <li>Chart.js</li> </ul> <h2> šŸ§  Why I Built This </h2> <p>I wanted to:</p> <ul> <li>Practice working with real APIs</li> <li>Improve my frontend skills</li> <li>Build something useful for developers</li> <li>Create a project that stands out on my GitHub</li> </ul> <h2> āš ļø Challenges I Faced </h2> <ul> <li>Handling API edge cases (like empty repositories)</li> <li>Processing commit data from events</li> <li>Designing a clean and responsive UI</li> <li>Making data visualization meaningful</li> </ul> <h2> šŸ’” What I Learned </h2> <ul> <li>Working with real-world APIs</li> <li>Data transformation &amp; visualization</li> <li>UI structuring using Grid &amp; Flexbox</li> <li>Writing cleaner and modular JavaScript</li> </ul> <h2> šŸ¤ Contribute to the Project </h2> <p>Iā€™d love contributions from other developers!</p> <p>You can help by:</p> <ul> <li>Improving UI/UX</li> <li>Adding new features</li> <li>Fixing bugs</li> <li>Optimizing performance</li> </ul> <h3> šŸ”— GitHub Repository </h3> <p>šŸ‘‰ <a href="https://github.com/your-username/github-activity-visualizer" rel="noopener noreferrer">https://github.com/your-username/github-activity-visualizer</a></p> <h3> šŸ› ļø How to Contribute </h3> <ol> <li>Fork the repo</li> <li>Create a new branch</li> <li>Make your changes</li> <li>Submit a Pull Request</li> </ol> <h2> šŸ’¬ Feedback Wanted </h2> <p>Iā€™d really appreciate your feedback!</p> <ul> <li>What features should I add next?</li> <li>How can I improve the UI?</li> <li>Any performance or code suggestions?</li> </ul> <p>Drop your thoughts in the comments šŸ™Œ</p> <h2> šŸš€ Future Improvements </h2> <ul> <li>šŸ“Š Advanced analytics</li> <li>šŸŒ™ Dark/Light mode toggle</li> <li>šŸ“± Better mobile responsiveness</li> <li>šŸ” Repo filtering &amp; search</li> <li>šŸ“Œ Featured projects section</li> </ul> <h2> ā­ Support </h2> <p>If you like this project:</p> <ul> <li>Give it a ā­ on GitHub</li> <li>Share it with others</li> <li>Follow me for more projects</li> </ul> <p>Thanks for reading! šŸ˜Š</p> webdev javascript opensource github