Learn Web Development with a Real Project

Learning through tutorials alone is not enough, some hands-on practice is required in order to properly understand the concepts.

I created a project to serve as a playground for everyone who wants to learn Web Development and play around with some concepts, such as React, NextJS, GraphQL, TailwindCSS, Typescript, React Query, Vitest and more!

You can find it here: https://github.com/Balastrong/github-stats

Here’s a quick overview of the project:

Why this project?

As of today it’s still pretty basic because that’s exactly the point, building it together! I already mentioned some of the technologies involved but I’m planning to add more, everything will be kept up to date in the README file.

I’ve written a lot of tutorials and I think they can be helpful, but the final step is always to put the concepts into practice and I think this project can be a good starting point.

You can use it to learn or improve your technical skills, but it is also a great chance to start contributing to Open Source in a controlled environment. It can help getting familiar with the process of contributing to a project between issues, pull requests, code reviews and so on.

Like I say many times in the video, the goal isn’t the success of the final product but rather the process of building it together.

I’m also not necessarily an expert in all the technologies I’d like to see in the project, so I’m also going to learn a lot from it and I really can’t wait to see your contributions!

How to contribute

If you want to participate, you can find the instructions in the README and in the CONTRIBUTING files, including some instructions on how to set up the environment variables (most notably, the tokens for the GitHub login as we’ll see later).

The project is open to any kind of contribution, from fixing typos to adding new features, so don’t be shy and feel free to contribute!

You can do basically everything at this point, for example:

• Open an issue to report a bug or suggest a new feature
• Answer or provide feedback on issues (there are some open questions)
• Comment on an issue to get it assigned so you can start working on it
• Open a pull request to fix a bug or add a new feature (make sure to link the assignedissue)
• Do some code review on a pull request

What is the project about?

Ah right, I didn’t mention it yet! I felt what said here above was actually more important than the project itself, but I guess it’s time to talk about it.

There’s a hosted version here: https://public-github-stats.vercel.app/

The overall idea is that it might be useful to have some relevant data, extracted and grouped from the official GitHub APIs, to use it in your CV or portfolio. Putting the GitHub link is already fine (mandatory, I would say), but also adding some meaningful metrics can be a nice touch.

From the Homepage you’ll be able to login with your GitHub Account so that your data can be pulled directly from the GitHub GraphQL endpoint.

As of today there’s a page listing the repositories where you opened some pull requests with the state and a total counter, grouped by year. You can nicely display in the browser or export as JSON or text (implemented a couple of days ago). There’s also a profile page with some basic data and actually a lot of space to put some more!

In the future we can indeed add some other combined data, animations, charts and so on… or think even bigger and adding job postings or other related (or unrelated) featues! If you have any idea, feel free to open an issue and discuss it.

Speaking of communication, to make things move faster we can also use Discord.

Do you think it’s a good idea? Do you have any suggestions? Let me know in the comments and see you in the project!