Introduction to the

Whether you’re new to programming or you’re already an experienced developer, learning new concepts and languages/frameworks is a must in this industry in order to keep up with rapid change. For example, it took just four years for Facebook’s React framework to become the number one choice for Javascript developers around the world. Of course, Vue and Angular also have significant followings. There’s Svelte, there’s general-purpose frameworks like next.js and Nuxt.js, there’s Gatsby, Gastsby, Quasar, and more. If you want to be a professional Javascript developer, you should have at least some experience with different frameworks and libraries — in addition to having a good JS foundation.

To help you become a front-end developer, I’ve collected nine different projects, each with a different theme and using different Javascript frameworks and libraries, as a technology stack that you can build and add to your portfolio. Remember, nothing helps more than developing your own projects, so go ahead, hone your mind and make them a reality!

Develop a movie retrieval application using React (using hooks)

You can start by building a movie search application using React. The image below is what the final application looks like.

What will you learn

Building this app will improve your skills using the latest React Hooks API. The sample project uses the React component, some hooks functions, an external API, and of course some styles written via CSS.

Technology stack & features

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

This project does not use classes. It gives you a starting point for using the react function perfectly, which will also be useful in 2020. Here you can find this simple project:

www.freecodecamp.org/news/how-to…

Follow the tutorial or develop your own style app!

Develop a chat application using Vue

Another great project is to develop a chat application using my favorite Javascript framework, VueJS. The app will look like this:

What will you learn

Following the tutorial, you will learn how to build a Vue application from scratch, create components, handle state, create routes, connect to third-party services, and even handle authentication.

Technology stack & features

  • Vue
  • Vuex
  • Vue Router
  • Vue CLI
  • Pusher
  • CSS

This is a really great project to get you started with Vue, or to improve your existing technology for 2020. You can find tutorials here:

www.sitepoint.com/pusher-vue-…

Develop a beautiful weather app with Angular 8

This example will help you build a nice weather app using Angular 8 from Google:

What will you learn

This project will teach you valuable skills, such as creating an application from scratch, from design to development, all the way to being ready for online deployment.

Technology stack & features

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

What I really, really like about this integrated project is that you don’t learn things in isolation, but the whole development process from design to final deployment. You really should do this project!

medium.com/@hamedbaato…

Develop a to-do list project using Sevlte

Svelte is a new kid on the block compared to React, Vue and Angular, but it’s still one of the hottest things to watch in 2020. The to-do list isn’t necessarily the hottest topic, but it can hone your Svelte skills, and projects look something like this:

What will you learn

This tutorial will show you how to build an application from start to finish using Svelte 3. It uses components, styles, and event handling.

Technology stack & features

  • Svelte 3
  • component
  • CSS styles
  • ES 6 grammar

There aren’t many good Svelte starter projects, so I think this is a decent starter. Who knows, maybe you’ll create a more comprehensive Svelte tutorial for next year’s edition?

medium.com/@hamedbaato…

Develop an e-commerce shopping cart with next.js

Nextjs is the most popular framework for creating React applications. It supports server-side rendering right out of the box. This project will show you how to develop an e-commerce shopping cart like the following:

What will you learn

In this project, you will learn how to configure the Next. Js development environment, create new pages and components, get data, styles, and deploy a Next application.

Technology stack & features

  • Next.js
  • Components and pages
  • Data acquisition
  • style
  • The deployment of
  • SSR and SPA (Server-side rendering and Single page applications)

It’s always good to learn something new through a practical example, such as an e-commerce presentation. You can find tutorials here: It’s always nice to learn something new with a practical example such as an e-commerce demonstration. You can find tutorials here:

medium.com/@hamedbaato…

Use nuxt.js to develop a complete multi-language blog site

Nuxt.js is to Vue what next.js is to React. This is a great framework to combine the benefits of server-side rendering with single-page applications. Your final app will look something like this:

What will you learn

This sample project will teach you how to build a complete website using Nuxt.js, from initial setup to final deployment. It takes advantage of many of the cool features Nuxt provides, such as pages and components, as well as SCSS styling.

Technology stack & features

  • Nuxt.js
  • Components and pages
  • Storyblok module
  • Mixins
  • Vuex status management
  • SCSS
  • Nuxt middleware

This will be a really cool project for you, as it covers many of the important features of Nuxt.js. I personally love working with Nuxt and you should really try this out as it will make you a better Vue developer!

medium.com/@hamedbaato…

Use Gatsby to develop a blog

Gatsby is a great static website generator. At its base, it uses React and GraphQL. The final project will look something like this:

What will you learn

In this tutorial, you will learn how to build a great blog using Gatsby. You can write your own articles using React and GraphQL well.

Technology stack & features

  • Gatsby
  • React
  • GraphQL
  • Plugins & Themes
  • MDX / Markdown
  • Bootstrap
  • The template

If you’ve ever wanted to develop a blog, this is a great example of how to do it with React and GraphQL. I’m not saying WordPress is a bad choice, but with Gatsby, you can also use React to develop a high performance website. It’s a good two birds with one stone!

medium.com/@hamedbaato…

Develop a blog using Gridsome

Gridsome for Vue…… Well, we’ve got Next/Nuxt, but so has Gridsome and Gatsby. Both use GraphQL as the data layer, but Gridsome utilizes VueJS. It’s also a great static website generator that can help you create great blogs:

What will you learn

From this project you will learn how to start developing a simple blog using Gridsome, GraphQL, and Markdown. It also covers how to deploy applications through Netlify.

Technology stack & features

  • Gridsome
  • Vue
  • GraphQL
  • Markdown
  • Netlify

This is by no means the most complete tutorial, but it covers the basic concepts of Gridsome and Markdown and makes for a good introduction.

medium.com/@hamedbaato…

Develop an audio player similar to SoundCloud with Quasar

Quasar is another Vue framework that can be used to develop mobile applications. In this project, the music player you create will look like this:

What will you learn

While other projects focus on Web applications, this one will show you how to create a mobile application using Vue through the Quasar framework. You should already have a Cordova setup ready for development and an Android Studio/Xcode configuration. If you haven’t already, there’s a link to Quasar in the tutorial where they show you how to set it up.

Technology stack & features

  • Quasar
  • Vue
  • Cordova
  • Wavesurfer
  • UI Components

This is a small project that demonstrates Quasar’s power in building mobile applications.

medium.com/@hamedbaato…

conclusion

In this article, I show you nine projects that you can develop, each using a different Javasript framework or library. Now it’s up to you to decide: Would you try to develop a project using a framework you’ve never used before? Or would you like to work on a project to enhance your existing skills? Or do you rely on your best frameworks or libraries for all your projects?

I recently launched a new website, The Smart Coder, where I create free content for The community, like better javascript projects

The original link

9 Projects you can do to become a Frontend Master