So, in this post, we’ll discuss some of the most exciting ideas for projects that you can do to improve your skills. They’ll range from easy to hard and from small to big. We’ll take a look at what you might learn through doing them and what kind of results you should expect. Let’s get into it!
Not only useful but also fun to do; a portfolio website is one of the easiest projects you can pull off. It’s a great way, even for experienced programmers, to try out new frameworks and libraries. Also, in the end, you’ll have something that might turn out to be useful one day. Together with the JS ecosystem, you might also learn some other web development terminology and concepts along the way. Static website (generator), (headless) CMS, and JAMStack are probably the most notable ones. As a bonus, you’ll also improve your HTML and CSS skills.
Now we're bumping the difficulty up a bit. Making a chat app requires both front-end and back-end experience. Unless you want to harness peer-to-peer (P2P) connectivity, which requires even more knowledge (like WebRTC), you'll need to use Node.js. Which, on the other hand, introduces you to a whole new world.
Node.js, naturally, comes with an ecosystem, libraries, and frameworks of its own. The most popular framework, called Express, serves as a wrapper around not-so-friendly Node.js APIs. Also, there's no way of working with Node.js without experiencing NPM - the largest package repository containing millions of open-source JS libraries and tools available!
So, to sum it all up, you'll improve not only your front-end and Node.js skills, but also (very likely) get to know WebSocket. It's a protocol used for real-time communication - something very much required in many applications. You'll also get to know Socket.IO - a very prominent library strongly connected with all the real-time stuff.
When you're done making your chat app, you can proceed to make a news aggregator - a site meant to accumulate news. Great examples of such a website are Echo JS and especially Hacker News (HN). The latter comes with a public API, which you can use to implement your own version of HN reader. It's a bit easier than creating a news aggregator from the ground up and has gained so much popularity that it can be considered a replacement for an old-school TODO app!
Whether you'll create your own new aggregator or an HN reader, things you'll learn are pretty much the same. The main focus here is the app itself - it should be a responsive Progressive Web App (PWA). If you don't know, PWA is simply a website that, after meeting several requirements, can be "installed" and used on mobile and desktop just like a native app. It's becoming increasingly popular and, thus, very much worth learning.
We all know Google has pretty much a monopoly when it comes to web analytics. But how about dropping Google Analytics and making your own analytics tool? It's certainly a much more demanding and time-consuming project than any of the ones listed above, but it's an exciting one to be sure!
Website analytics tools have two parts - the user side and the server side, together with an optional dashboard. While doing the first part, you'll most likely have to get to know some Web APIs to gather some data. Depending on what you want to know (input heatmap, location, spent time, etc.), you'll have to utilize a different API. There are some libraries that could do this for you, but they aren't too common. Also, you'll probably want to utilize cookies or Web Storage.
On the server-side, you'll have to put your Node.js knowledge to good use. Connection with the user (either real-time or not), data processing, and database management are probably the most notable things that you'll be dealing with. You can also pull off a nice-looking dashboard to better analyze your data.
All in all, if you finish the project, you'll end up with a complete web analytics package that should check all of your boxes.
Now we're getting into the more generic territory. With JS getting so popular, it should be no surprise that you can make a full-blown native app with it. And, that's exactly what you should consider doing!
Alright, so what making an open-source library can teach you? Know that I don't focus on what your library (or framework) might do or how it might do it, but rather on the simple fact that it would be open-source. Participating in this huge (especially for JS) community consisted of countless programmers, isn't meant to teach you how to code (you should already know that). It's not even about the ideology of giving something for free. It's the unprecedented experience that you gain in doing so.
From the programming perspective, you have to pretty-much master Git. You also need to know how to write high-quality code and tests. But, it's all outside the programming area that's most important. Marketing and social engagement when promoting your project. Discussion and time-management when handling issues and pull-request. All these things aren't visible, but very important. A good programmer shouldn't only know how to code, but go beyond that. That's what open-source can teach you.
To top it all off, we've got probably the most versatile and complex project idea that one might have. I'm talking about creating a game. Here, everything depends on your imagination... and coding skills.
I'd say that for JS game, WebGL or Canvas API is a must. Libraries like PixiJS or Three.js might be especially helpful in bigger projects. Server-side programming might also be required, at least for network-bound games. Finally, when JS isn't enough, you'll need to turn to WebAssembly, which is a whole another topic.
So, as I said, a game, depending on its complexity, is probably the best you can do. If you can handle creating an MMO RTS all on your own, then you're a true coding master. ;) Still, keep in mind that it won't be a quick process.
So, that was my list of the best JS project ideas. Let me know in the comments if you have any other ideas to recommend. Also, are you willing to make any of the listed projects? If you like that post, consider sharing it and following me on Twitter, Facebook, Reddit, or through my weekly newsletter. You can also check out my YouTube channel and drop a like or sub. Thanks for reading!