9 Hands‑On Projects to Master Modern Front‑End Frameworks in 2020

If you want to become a professional JavaScript developer, mastering additional frameworks and libraries is essential. This article presents nine project ideas, each using a different front‑end framework or library, to help you build a portfolio and become a 2020 front‑end master.

1. Build a Movie Search App with React

You will learn React Hooks, component composition, consuming an external API, and styling with CSS.

React with Hooks

Create‑React‑App

JSX

CSS

Tutorial: https://www.freecodecamp.org/news/how-to-build-a-movie-search-app-using-react-hooks-24eb72ddfaf7/

2. Build a Chat Application with Vue

You will learn Vue component creation, state management with Vuex, routing with Vue Router, real‑time communication via Pusher, and CSS styling.

Vue

Vuex

Vue Router

Vue CLI

Pusher

CSS

Tutorial: https://www.sitepoint.com/pusher-vue-real-time-chat-app/

3. Build a Weather Forecast App with Angular 8

The project teaches you end‑to‑end Angular development, including design, component creation, Firebase integration, server‑side rendering, responsive UI with Grid/Flexbox, and dark‑mode support.

Angular 8

Firebase

Server‑side rendering

CSS, Grid Layout, Flexbox

Responsive design, dark mode

Beautiful UI

Tutorial: https://medium.com/@hamedbaatour/build-a-real-world-beautiful-web-app-with-angular-6-a-to-z-ultimate-guide-2018-part-i-e121dd1d55e

4. Build a Todo App with Svelte

You will learn Svelte 3 component model, styling with CSS, and modern ES6 syntax.

Svelte 3

Components

CSS styling

ES 6 syntax

Tutorial: https://medium.com/codingthesmartway-com-blog/building-a-svelte-3-todo-app-from-start-to-deployment-1737f72c23a6

5. Build an E‑Commerce Cart with Next.js

You will learn Next.js setup, page and component creation, data fetching, styling, deployment, and the difference between SSR and SPA.

Next.js

Components and pages

Data fetching

Styling

Deployment

SSR and SPA

Tutorial: https://snipcart.com/blog/next-js-ecommerce-tutorial

6. Build a Multilingual Blog with Nuxt.js

The project covers Nuxt.js page and component architecture, Storyblok CMS integration, Vuex state management, SCSS styling, and middleware usage.

Nuxt.js

Components and pages

Storyblok module

Mixed components

Vuex state management

SCSS styling

Nuxt middleware

Tutorial: https://www.storyblok.com/tp/nuxt-js-multilanguage-website-tutorial

7. Build a Blog with Gatsby

You will learn how Gatsby combines React and GraphQL to generate static sites, using plugins, themes, MDX/Markdown, and Bootstrap CSS.

Gatsby

React

GraphQL

Plugins and themes

MDX / Markdown

Bootstrap CSS

Templates

Tutorial: https://blog.bitsrc.io/how-to-build-a-blog-with-gatsby-and-boostrap-d1270212b3dc

8. Build a Blog with Gridsome

This project shows how to use Gridsome (Vue‑based static site generator), GraphQL, Markdown, and Netlify for deployment.

Gridsome

Vue

GraphQL

Markdown

Netlify

Tutorial: https://www.telerik.com/blogs/building-a-blog-with-vue-and-markdown-using-gridsome

9. Build a SoundCloud‑Like Audio Player with Quasar

You will learn Quasar, Vue, Cordova setup, Android/iOS tooling, and WaveSurfer for audio visualization.

Quasar

Vue

Cordova

WaveSurfer

UI components

Tutorial: https://www.learningsomethingnew.com/how-to-build-a-sound-cloud-like-audio-player-app-with-vue-js-quasar-and-wave-surfer

Choose the projects that interest you and start building to expand your front‑end expertise.