7 best JavaScript projects to master your skills
Tags: javascript, productivity
Published: 2019-11-26 17:45:55

**This post was taken from [my blog](https://areknawo.com), 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](https://www.staticgen.com/)), ([headless](https://headlesscms.org/))  _CMS_, and  [JAMStack](https://jamstack.org/)  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](https://webrtc.org/)), you'll need to use  [Node.js](https://nodejs.org/en/). 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](https://expressjs.com/), serves as a wrapper around not-so-friendly Node.js APIs. Also, there's no way of working with Node.js without experiencing  [NPM](https://www.npmjs.com/)  - 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](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API). It's a protocol used for real-time communication - something very much required in many applications. You'll also get to know  [Socket.IO](https://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](http://echojs.com/)  and especially  [Hacker News](https://news.ycombinator.com/)  (HN). The latter comes with  [a public API](https://github.com/HackerNews/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](https://hnpwa.com/)  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](https://developers.google.com/web/progressive-web-apps)  (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](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)  is probably the most significant player here. Apart from that, you've got the standard  _HTTP_  protocol and libraries like  [Axios](https://github.com/axios/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](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies)  or  [Web Storage](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API).

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](https://electronjs.org/), 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](https://electronjs.org/docs/api)  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](https://cordova.apache.org/), 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](https://www.nativescript.org/)  and  [React Native](https://facebook.github.io/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](https://git-scm.com/). 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](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API)  or  [Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API)  is a must. Libraries like  [PixiJS](https://www.pixijs.com/)  or  [Three.js](https://threejs.org/)  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](https://webassembly.org/), 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](https://twitter.com/areknawo),  [Facebook](https://www.facebook.com/areknawoblog/), or  [Reddit](https://www.reddit.com/r/Areknawo). You can also check out my  [YouTube channel](https://www.youtube.com/channel/UCUw6bg379ONlG1E_oxhwi-A/)  and drop a like or sub. Thanks for reading!