9 more projects to hone Front-End skills

Introduction

Regardless of whether you are new to programming or already an experienced developer, the study of new concepts and languages ​​/ frameworks in this industry is imperative to keep up with the trends.



Take React, for example, whose code Facebook only opened four years ago, it has already become the number one choice for JavaScript developers around the world.



Vue and Angular, of course, also have their own legitimate fan base. And there are Svelte and other universal frameworks like Next.js or Nuxt.js. And Gatsby, and Gridsome, and Quasar ... and much more.



If you want to prove yourself as an experienced JavaScript developer, you should have at least some experience working with various frameworks and libraries - in addition to working with good old JS.



To help you become a front-end master in 2020, I have put together nine different projects, each of which has been dedicated to different JavaScript frameworks and libraries as a technical stack that you can create and add to your portfolio. Remember that nothing helps you more than creating things in practice, so go ahead, turn on your mind and make it possible

This article was translated with the support of EDISON Software, a company that makes virtual fitting rooms for multi-brand stores , and also tests software .

React movie search app (with hooks)

The first thing you could start with is to create a movie search application using React. Below is an image of how the final application will look:







What do you learn

By creating this application, you will improve your React skills using the relatively new API Hooks. The sample project uses React components, many hooks, an external API, and, of course, some CSS styles.



Technical stack and features

• React with hooks
• create-react-app
• Jsx
• CSS

Without using any classes, these projects give you the perfect entry point to functional React and will definitely help you in 2020. You can find an example project here . Follow the instructions or do everything to your taste.

Chat Application Using Vue

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







What do you learn

In this guide, you will learn how to make a Vue application from scratch - create components, process states, create routes, connect to third-party services, and even process authentication.



Technical stack and features

• Vue
• Vuex
• Vue router
• Vue CLI
• Pusher
• CSS

This is a really great project to start working with Vue or to improve your existing skills to start developing in 2020. You can find the tutorial here .

A beautiful application for viewing weather with Angular 8

This example will help you create a beautiful application for viewing weather using Angular 8:







What do you learn

This project will teach you valuable skills when creating applications from scratch - from design to development, right up to deployment ready.



Technical stack and features

• Angular 8
• Firebase
• Server side rendering
• CSS with grid and flexbox
• Mobile friendly and adaptability
• Dark mode
• Beautiful interface

What I really like about this all-encompassing project is that you don't study things in isolation. Instead, you study the entire development process, from design to final deployment.

To-Do App Using Svelte

Svelte is like a new kid in a component approach - at least similar to React, Vue, and Angular. And this is one of the hottest new products for 2020.



To-Do apps are not necessarily the hottest topic, but it really helps you hone your Svelte skills. It will look like this:







What do you learn

This tutorial will show you how to create an app using Svelte 3, from start to finish. You will use components, styling and event handlers.



Technical stack and features

• Svelte 3
• Components
• CSS styling
• Syntax ES 6

There are not many good start-up projects for Svelte, so I found this good option to get started .

Ecommerce Application Using Next.js

Next.js 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 create an e-commerce application that looks like this:







What do you learn

In this project, you will learn how to develop using Next.js - create new pages and components, extract data, and also style and deploy the Next application.



Technical stack and features

• Next.js
• Components and Pages
• Data sampling
• Stylization
• Project Deployment
• SSR and SPA

It is always great to have a real-life example, such as an e-commerce application, to learn something new. You can find the tutorial here .

A full multilingual blog with Nuxt.js

Nuxt.js for Vue, same as Next.js for React: a great framework for combining server-side rendering capabilities and single-page applications

The last application you can create will look like this:







What do you learn



In this sample project, you will learn how to create a complete website using Nuxt.js, from initial setup to final deployment.



It uses many interesting features that Nuxt can offer, such as pages and components, as well as styling with SCSS.



Technical stack and features

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

This is a really cool project , which includes many great features of Nuxt.js. I personally love working with Nuxt, so you should try it out, as it will also make you a great Vue developer.

Gatsby Blog

Gatsby is a great static site generator using React and GraphQL. This is the result of the project:







What do you learn



In this guide, you will learn how to use Gatsby to create a blog that you will use to write your own articles using React and GraphQL.



Technical stack and features

• Gatsby
• React
• GraphQL
• Plugins and Themes
• MDX / Markdown
• Bootstrap CSS
• Patterns

If you've ever wanted to start a blog, this is a great example of how to build it using React and GraphQL.



I'm not saying that WordPress is a bad choice, but with Gatsby you can create high-performance sites using React - which is an amazing combination.

Gridsome Blog

Gridsome for Vue ... Well, we already had this with Next / Nuxt.

But the same is true for Gridsome and Gatsby. Both use GraphQL as a data layer, but Gridsome uses VueJS. It is also an awesome static site generator that helps you create great blogs:







What do you learn



This project will teach you how to create a simple blog to get started with Gridsome, GraphQL, and Markdown. It also explains how to deploy the application through Netlify.



Technical stack and features

• Gridsome
• Vue
• GraphQL
• Markdown
• Netlify

This, of course, is not the most comprehensive tutorial, but it covers the basic concepts of Gridsome and Markdown and can be a good starting point .

SoundCloud-like audio player using Quasar

Quasar is another Vue framework that you can use to create mobile apps. In this project, you will create an audio player application, for example:







What do you learn



While other projects focus mainly on web applications, this one will show you how to create a mobile application using Vue and the Quasar framework.

You should already have Cordova running with Android Studio / Xcode configured. If not, the manual has a link to the Quasar website, where they show how to set everything up.



Technical stack and features

• Quasar
• Vue
• Cordova
• Wave surfer
• UI Components

A small project demonstrating Quasar’s capabilities for creating mobile applications.