Whether you are just learning the front end or already have working experience, the front end technology is constantly updated and changing every year as the intelligent front end becomes more and more apparent in our lives and learning new concepts and languages/frameworks is necessary to keep up with the rapid changes.

React, for example, was open-source by Facebook only four years ago and has become the number one choice for JavaScript developers around the world.
Of course, Vue and Angular also have legitimate followings. Then there are Svelte and generic frameworks such as next.js or nuxt.js. And Gatsby and Gridsome and Quasar… .
If you want to be a good JavaScript developer, you should have at least some experience with different frameworks and libraries.
To help you become a front-end master in 2020, I’ve collected nine different projects, each with a different theme and a different JavaScript framework or library as a technology stack that you can build and add to your learning plan. Remember, nothing helps more than actually building something, so go ahead and sharpen your mind to make it happen.

Use React (with hooks) to build a movie search application

First, you can use React to build a movie search application. The image below shows what the final application will look like:

What will you learn

As you build this application, you will use the relatively new Hooks API to improve your React skills. The sample project makes use of the React component, a number of hooks, an external API, and of course some CSS styles.

Technology stack and features

The React, Hook

The create – react – app

JSX,

CSS,

Without using any classes, this project gives you the perfect introduction to the field, and will certainly help you in 2020.
You can find sample projects here. Follow the tutorial or make your own.

Use Vue to build chat applications

Another great project for you is to build a chat application using my favorite JavaScript library: VueJS.
The application will look like this:

After this tutorial, you’ll learn how to set up a Vue application from scratch – creating components, handling state, creating routes, connecting to third-party services, and even handling authentication.

DE Vue

DE Vue

DE Vue

DE Vue

Pusher,

CSS,

It’s really a great project to start using Vue or improve your existing skills for 2020.
You can find the tutorial here.

Build beautiful weather apps with Angular 8

This example will help you build a beautiful weather application using Google Angular 8:

This project will teach you the valuable skills of creating applications from scratch, from design to development to production-ready deployment.

Presents eight,

Firebase,

Server – side, rendering

· CSS with Grid Layout and Flexbox

· Mobile friendly and responsive

Dark mode,

Beautiful UI,

I really like this integrated program because you don’t learn things in isolation. Instead, you’ll learn the entire development process

— From design to final deployment.

You really should do this.

Build backlog applications using Svelte

Svelte is a bit of a new kid on the block, at least compared to React, Vue and Angular. Still, it’s one of the favorites for 2020.

To-do lists aren’t necessarily the hottest topic, but they can really help you improve your Svelte skills. It looks something like this:

This tutorial will show you how to make an application using Svelte3, from start to finish. It uses components, styles, and event handlers.

3 · Svelte

The Components,

Styling, via CSS

· ES 6 Grammar

There aren’t that many good Svelte starter projects out there, so I thought this was a good place to start.

Use Next. Js to build an e-commerce shopping cart

Next. Js is the most popular framework for creating React applications that support applications out of the box.

This project will show you how to build an e-commerce shopping cart like this:

In this project, you’ll learn how to set up a next.js development environment — create new pages and components, get data, set styles, and deploy the Next application.

Next, js

The Components, and pages

DE Data fetching

Styling,

Deployment,

, SSR and SPA

It’s always nice to have a real example (such as an e-commerce showcase) to learn something new. You can find the tutorial here.

Use nuxt.js to build a full-featured multi-language blog site

Nuxt.js stands for Vue, next.js stands for React: a nice framework that combines server-side rendering with single-page application functionality.

The final application you can create will look like this:

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 has to offer, such as pages and components and SCSS styling.

· Nuxt. Js

The 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 a lot of the great features of Nuxt.js. I personally enjoy working with Nuxt, so you should really try it out, because it will also make you a better Vue developer.

Set up a blog using Gatsby

Gatsby is a great static site generator that uses React and GraphQL in the background. Here are the results of the project:

In this tutorial, you’ll learn how to build great blogs with Gatsby so you can write your own articles while using React and GraphQL.

Gatsby,

The React,

· GraphQL

Plugins, and themes

MDX/Markdown

The Bootstrap CSS,

Templates,

If you want to create a blog, this is a good example of how React and GraphQL can do it.
I’m not saying WordPress is always a bad choice, but with Gatsby, you can create high-performance websites while using React — a remarkable combination.

Set up a blog in Gridsome

Gridsome is Vue’s… Well, we already have it in Next/Nuxt.

But so did Gridsome and Gatsby. Both use GraphQL as the data layer, but Gridsome uses VueJS. It’s also a great static site generator that helps you create great ones
Blog:

This project will teach you how to build a simple blog to get started using Gridsome, GraphQL, and Markdown.
It also shows you how to deploy applications through Netlify.

· Gridsome

DE Vue

· GraphQL

Markdown,

· Netlify

Of course, this isn’t the most comprehensive tutorial, but it does cover the basic concepts of Gridsome and Markdown, and might be a good starting point.

Use the Quasar to build soundCloud-like audio player apps

Quasar is another Vue framework that can also be used to build mobile applications.

In this project, you will create an audio player application that looks like this:

While other projects focus on Web applications, this one will show you how to create mobile applications using Vue through the Quasar framework.
You should already have Cordova configured to run Android Studio/Xcode. If not, the tutorial will have a link to Quasar’s web site where they show you how to set it up.

Quasar,

DE Vue

Cordova,

· WaveSurfer

The UI Components,

A small project that demonstrates the power of Quasar in building mobile applications.
These are the 9 programs to become a senior front end engineer. I’m sure you already know about them. Front-end learning is also particularly important, front-end learning advice we should choose training as well, because now the development of front-end technology is fast, such as self-study may learn some of the old version of knowledge, easy to keep up with the technical needs in the work. Training institutions, are often based on the development of front-end technology, so as to update front-end courses, so that students learn the latest front-end knowledge. For example, Aichuang Classroom is a training institution specializing in front-end education. Zhang Rongming, former Front-end architect of Baidu, led the team to teach the whole course in person. Every year, many students come here to study, and he also teaches countless senior front-end engineers. He works in various enterprises.
Recently, Aichuang Class was fully taught by Teacher Zhang Rongming himself. It is a small class with limited seats.** Want to register can contact me! ** Now many people are confused about choosing a school. In fact, they can go to the field to experience it. After all, it is most important for them to be suitable for themselves.

conclusion

In this article, I’ve shown you nine projects that you can build, each focusing on another JavaScript framework or library.
Now, the choice is entirely up to you: do you try something new with a previously unused framework? Or do you build your skills by working on projects for technologies that you already have some knowledge of? Or will you rely on your favorite frameworks/libraries and finish all projects in 2020?