close

DEV Community

Cover image for I Built a GitHub Activity Visualizer Dashboard Using JavaScript (Looking for Feedback!)
Aswanth M.C
Aswanth M.C

Posted on

I Built a GitHub Activity Visualizer Dashboard Using JavaScript (Looking for Feedback!)

#webdev #github #opensource #javascript

πŸš€ I Built a GitHub Activity Visualizer Dashboard (Looking for Feedback!)

Hey developers πŸ‘‹

I recently built a GitHub Activity Visualizer β€” a web app that helps you explore and understand your GitHub profile in a more visual and interactive way.

πŸ” What is this project?

This is a dashboard-style web app where you can:

  • Enter any GitHub username
  • View profile details
  • Explore repositories
  • Analyze languages used
  • See commit activity over time
  • Visualize contributions in a heatmap

🌐 Live Demo

πŸ‘‰ View Live Project

πŸ“Έ Demo Preview

Dashboard Preview

✨ Features

  • πŸ‘€ Clean Profile Card (avatar, bio, followers)

  • πŸ“¦ Repository Section with:

    • Stars ⭐
    • Forks 🍴
    • Language badges
    • Forked repo indicator

  • πŸ’» Language Usage Visualization

  • πŸ“ˆ Commits Over Time (chart)

  • 🟩 Contribution Heatmap (GitHub-style)

πŸ› οΈ Tech Stack

  • HTML, CSS, JavaScript (Vanilla)
  • GitHub REST API
  • Chart.js

🧠 Why I Built This

I wanted to:

  • Practice working with real APIs
  • Improve my frontend skills
  • Build something useful for developers
  • Create a project that stands out on my GitHub

⚠️ Challenges I Faced

  • Handling API edge cases (like empty repositories)
  • Processing commit data from events
  • Designing a clean and responsive UI
  • Making data visualization meaningful

πŸ’‘ What I Learned

  • Working with real-world APIs
  • Data transformation & visualization
  • UI structuring using Grid & Flexbox
  • Writing cleaner and modular JavaScript

🀝 Contribute to the Project

I’d love contributions from other developers!

You can help by:

  • Improving UI/UX
  • Adding new features
  • Fixing bugs
  • Optimizing performance

πŸ”— GitHub Repository

πŸ‘‰ https://github.com/your-username/github-activity-visualizer

πŸ› οΈ How to Contribute

  1. Fork the repo
  2. Create a new branch
  3. Make your changes
  4. Submit a Pull Request

πŸ’¬ Feedback Wanted

I’d really appreciate your feedback!

  • What features should I add next?
  • How can I improve the UI?
  • Any performance or code suggestions?

Drop your thoughts in the comments πŸ™Œ

πŸš€ Future Improvements

  • πŸ“Š Advanced analytics
  • πŸŒ™ Dark/Light mode toggle
  • πŸ“± Better mobile responsiveness
  • πŸ” Repo filtering & search
  • πŸ“Œ Featured projects section

⭐ Support

If you like this project:

  • Give it a ⭐ on GitHub
  • Share it with others
  • Follow me for more projects

Thanks for reading! 😊

Top comments (0)