How I built a Github star tracker in one afternoon? 🌟

#webdev #javascript #frontend #github

Hello everyone, today I decided to share with you all how I was able to make a frontend application that tracks our github repository's star count in only one afternoon!

Check the app here: https://amira-bekhta.github.io/Github_star_tracker/

Find the repository and star it to see the magic here!

Check my Github here: https://github.com/Amira-Bekhta

Check the tracking app's Github repository here: https://github.com/Amira-Bekhta/Github_star_tracker

1- The HTML code first:

Before starting with anything, I decided to have all the HTML code I needed, here is the code I had at first:

    <h1>How are the stars going?</h1>
    <progress id="progress" max="1000" value="3"></progress>
    <h3>Stars so far</h3>
    <footer>Made with 🩷 by Amira</footer>

And then I thought to myself, wouldn't it be better to have a good Github icon that leads to the repository and makes the app more visually appealing? To do so, I had to add this to the head of my HTML document:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

And for the HTML body, I simply added this:

<a href="https://github.com/docuglean-ai/docuglean" target="_blank"><i class="fa fa-github" style="font-size:12em"></i></a>

2- Styling:
When I use CSS, the first thing I go for is making sure everything is aligned in the center, this makes me feel like all the items are well-organized (Do you do this too? Tell me in the comments!), this is the code I use in almost every CSS code I do:

body{
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            text-align: center;
            min-height: 100vh;
}

Other than that, I wanted to style the HTML progress bar, this part was a bit tricky, click here to find the app's repo and find out how I did it 👀

3- Github API:

Before I started building the app, I was worried that tracking the star count would be the hardest part, but hey, it's actually super easy, and you can do it too! Here is how I did it:

<script>
        async function updateStars() {
            try {
                const response = await fetch('https://api.github.com/repos/docuglean-ai/docuglean');
                const data = await response.json();
                const stars = data.stargazers_count;
                document.getElementById('progress').value = stars;
                document.querySelector('h3').textContent = `${stars} stars so far!`;
            } catch (error) {
                console.error('Failed to fetch star count:', error);
                document.querySelector('h3').textContent = 'Unable to load stars 😢';
            }
        }
        setInterval(updateStars, 60000); 

        updateStars();
</script>

Thanks for reading! 💕

Check the app here: https://amira-bekhta.github.io/Github_star_tracker/

Find the repository and star it to see the magic here!

Check my Github here: https://github.com/Amira-Bekhta

Check the tracking app's Github repository here: https://github.com/Amira-Bekhta/Github_star_tracker

**Got questions/feedback? Drop them in the comments! 🖊️

Don't forget to support us by starring our Github here: https://github.com/docuglean-ai/docuglean 🌟**

Top comments (4)

Nathan Tarbert • Jul 11

this is extremely impressive for a project built in one afternoon, i get hooked on this kind of quick-building energy
you ever think about what features you’d want to add if you spent another day on it