This post was taken from my blog, so be sure to check it out for more up-to-date content.
Nowadays, with JavaScript getting better at doing more, it’s becoming increasingly harder (not to say impossible) to master it fully. Better understanding and experience in the language equals more career opportunities open for you. Thus, learning new stuff is really worth your time. One of the best and most versatile ways of learning programming is through doing different projects. Such a method allows you to master different aspects of programming all at once. The less time the project takes and the better the results are, the more experienced you become at doing certain things.
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!
Portfolio website
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.
Chat
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.
News aggregator
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.
Another thing you'll learn is the concept of REST APIs and all the related tools. JavaScript Fetch API is probably the most significant player here. Apart from that, you've got the standard HTTP protocol and libraries like Axios.
Website analytics
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.
Native app
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!
If you're going for desktop, you can mix some of the previously-mentioned ideas with Electron, and you have an app! Electron is a framework based on Node.js and Chromium project, that allows you to transform pretty much any of your JavaScript projects into native applications. It's easy to get started but provides many additional APIs for more advanced use-cases. Sadly, Electron doesn't work for mobile, and so we're left searching for alternatives. There are projects like Apache Cordova, which make your app "native" by simply placing it inside a WebView and giving you access to some additional APIs, but there's not a lot of "nativity" in such an approach.
NativeScript and React Native provide you with some better options. They bind your JS code to the respective platform's native elements, thus improving the performance and giving you this native feel. React Native is, as the name implies, strongly connected with React, while NativeScript supports both Vue and Angular, as well as plain JavaScript or TypeScript.
Open-source library
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.
Game
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.
Ideas
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, or Reddit. You can also check out my YouTube channel and drop a like or sub. Thanks for reading!
Top comments (7)
Highly recommend electron app. Widens the horizon for sure ;)
Overall: I enjoy the list, by far what I've done on this list is:
'Game', 'Open Source', 'Electron App', 'News aggregator with Puppeteer' and 'Portfolio'
About the game idea, I would recommend to do, if possible, with the engine RPG Maker MV (it's paid). You can create plugins and see things in action on a game, and even more, you will learn the fantastic library named PixiJS.
I’ve got a similar experience. I’ve already made a portfolio/blog website, chat app when experimenting with NodeJS framework, only started web analytics, done native app with small C++ and Rust additions (very much recommended to try), OSS to be sure, and somewhat of 2 games. One of my game ideas was MMO RTS, but it grew so big that I simply wasn’t able to pull it off. I know that this can be a problem for many beginning programmers - after all, the game is probably the first thing people want to make when they learn how to code.
Thanks for sharing. Amazing Kickstarter projects.
How about a project that requires authentication. That way you can learn about passport.js and JWT.
Making games takes a lot of time and it's not easy but it's worth the efforts.
Phaser.io is a great GameDev springboard for JavaScript :)