5 Projects that will make you Frontend Master in 2020

In webdevelopment industry learning new concepts and languages/frameworks is mandatory to keep up with the rapid changes. Take for example React — open-sourced by Facebook just a shy 4 years ago it already became the number one choice for JavaScript developers around the globe. If you want to shine as an expert JavaScript developer you should at least have some experience in different frameworks and libraries — besides doing your homework with good, old JS.

To help you become Frontend Masters in 2020 I have collected 5 different projects, each with a distinct topic and a different JavaScript framework or library as tech stack that you can build and add to your portfolio.

Build a movie search app using React (with hooks)

Tech Stack & Features

• React with Hooks
• create-react-app
• JSX
• CSS

Using no classes this projects gives you a perfect entry point into functional react and will definitely help you in 2020. You can find the example project here: https://www.freecodecamp.org/news/how-to-build-a-movie-search-app-using-react-hooks-24eb72ddfaf7/

Build a beautiful weather app with Angular 8

Tech Stack & Features

• Angular 8
• Firebase
• Server-Side Rendering
• CSS with Grid Layout and Flexbox
• Mobile friendly & responsive
• Dark Mode
• Beautiful UI

What I really, really like about this comprehensive project is that you do not learn things in isolation but the whole development process from the design to the final deployment.
https://medium.com/@hamedbaatour/build-a-real-world-beautiful-web-app-with-angular-6-a-to-z-ultimate-guide-2018-part-i-e121dd1d55e

Build a SoundCloud-like audio player app with Quasar

Quasar is another Vue framework that can also be used to build mobile applications. In this project you will create an audio player app looking like this:

Tech Stack & Features

• Quasar
• Vue
• Cordova
• Wavesurfer
• UI Components

A small project that shows the power of Quasar for building mobile apps.
https://www.learningsomethingnew.com/how-to-build-a-sound-cloud-like-audio-player-app-with-vue-js-quasar-and-wave-surfer

Build a full blown multi-language blog website Nuxt.js

Nuxt.js is to Vue what Next.js is to react. A great framework to combine the power of server-side rendering and single-page applications. The final app that you could create will look like this:

Tech Stack & Features

• Nuxt.js
• Components and Pages
• Storyblok module
• Mixins
• Vuex for state management
• SCSS for styling
• Nuxt middlewares

This is a really cool project for you and covers many of the great features of Nuxt.js. I personally love working with Nuxt so you should really try this one out as it will also make you a better Vue developer!
https://www.storyblok.com/tp/nuxt-js-multilanguage-website-tutorial

Build an e-commerce shopping cart with Next.js

NextJs is the most popular framework for creating React applications that support server-side rendering out of the box. This project will show you how to build an e-commerce shopping cart looking like this:

Tech Stack & Features

• Next.js
• Components and Pages
• Data Fetching
• Styling
• Deployment
• SSR and SPA

It is always great to have a real world example such as an e-commerce showcase to learn something new. You can find the tutorial here:
https://snipcart.com/blog/next-js-ecommerce-tutorial

Conclusion

In this article I showed you 5projects that you can build, each focussing on different JavaScript framework or library. Now the choice is all yours: Will you try something new by using a framework you haven’t used before? Or do you want to strengthen your skills by doing a project for a technology you already have some knowledge in? Or will you rely on your favorite framework/library and do all the projects in 2020 with it? Feel free to leave a comment and don’t forget to follow me for more upcoming posts!