The Smart Coder 27/11/20 20:26

Build a movie search app using React

(with hooks)
Whether you are new to programming or already an experienced developer.
In this 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 devs around the
globe.

But also Vue and Angular, of course, have their legitimate follower-base. And
then there is Svelte, and universal frameworks like Next.js or Nuxt.js, and
Gatsby, and Gridsome, and Quasar, and and and.

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, I have collected 9 different projects,

each with a distinct topic and a different JavaScript framework or library as a
tech stack that you can build and add to your portfolio. Remember, nothing
helps you more than actually building stuff so go ahead, sharpen your mind
and make this happen!

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

https://thesmartcoder.dev/9-projects-you-can-do-to-become-a-front-end-master/ Page 1 of 14
The Smart Coder 27/11/20 20:26

What you will learn

Building this application you will improve your React Skills using the relatively
new Hooks API. The example projects make use of React components, many
hooks, an external API, and of course some styling via CSS.

Tech Stack & Features

React with Hooks

create-react-app
JSX
CSS

Using no classes this project gives you a perfect entry point into functional
react and will definitely help you in 2020. You can find the example project
here: Example Project Follow along with the tutorial or give it your own flavor!

https://thesmartcoder.dev/9-projects-you-can-do-to-become-a-front-end-master/ Page 2 of 14
The Smart Coder 27/11/20 20:26

Build a chat app with Vue

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

What you will learn

Following this tutorial, you will learn how to set up a Vue app from scratch,
creating components, handling state, creating routes, connecting to a third
party service, and even handling authentication.

Tech Stack & Features

Vue
Vuex
https://thesmartcoder.dev/9-projects-you-can-do-to-become-a-front-end-master/ Page 3 of 14
The Smart Coder 27/11/20 20:26

Vue Router
Vue CLI
Pusher
CSS

This is really a great project to get started with Vue or to improve your
existing skills to tackle development in 2020. You can find the tutorial right
here: Example Project

Build a beautiful weather app with Angular 8

This example will help you to build a beautiful weather app using Google's
Angular 8:

What you will learn

This project will teach you valuable skills such while creating an application
https://thesmartcoder.dev/9-projects-you-can-do-to-become-a-front-end-master/ Page 4 of 14
The Smart Coder 27/11/20 20:26

from scratch, starting with the design over development all the way to a
production-ready deployment.

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. You should really do this one! Example Project

Build a to-do app with Svelte

Svelte kinda is the new kid on the block compared to React, Vue, and
Angular but nonetheless one of the hotties for 2020. Okay, To-Do apps are
not necessarily the hottest topic out there but this will really help you to
sharpen you Svelte skills and look like this:

https://thesmartcoder.dev/9-projects-you-can-do-to-become-a-front-end-master/ Page 5 of 14
The Smart Coder 27/11/20 20:26

What you will learn

This tutorial will show you how to make an app using Svelte 3 from start to
finish. It makes use of components, styling, and event handlers

Tech Stack & Features

Svelte 3
Components
Styling via CSS
ES 6 syntax

https://thesmartcoder.dev/9-projects-you-can-do-to-become-a-front-end-master/ Page 6 of 14
The Smart Coder 27/11/20 20:26

There aren't that many good Svelte starter projects out there so I find this
one to be kinda good to start with. And who knows, maybe you are the one
creating another, more comprehensive Svelte tutorial that will be presented
in the next year's version of this post? Example Project

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:

What you will learn

In this project, you will learn how to set up a Next.js development

environment, create new pages and components, fetch data, style, and
deploy a next application.

Tech Stack & Features

https://thesmartcoder.dev/9-projects-you-can-do-to-become-a-front-end-master/ Page 7 of 14
The Smart Coder 27/11/20 20:26

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: Example
Project

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:

https://thesmartcoder.dev/9-projects-you-can-do-to-become-a-front-end-master/ Page 8 of 14
The Smart Coder 27/11/20 20:26

What you will learn

This example project will teach you how to build a full-blown website using
Nuxt.js from the initial setup to the final deployment. It makes use of many of
the cool features Nuxt has to offer like pages and components as well as
styling with SCSS.

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! Example Project

Build a Blog with Gatsby

Gatsby is a great static site generator that uses React and GraphQL under
the hood. This is the result of this project:

https://thesmartcoder.dev/9-projects-you-can-do-to-become-a-front-end-master/ Page 9 of 14
The Smart Coder 27/11/20 20:26

What you will learn

In this tutorial, you will learn how to leverage Gatsby to build an outstanding
blog that you could well use for writing your own articles while making use of
React and GraphQL.

Tech Stack & Features

Gatsby
React
GraphQL
Plugins & Themes
MDX / Markdown
Bootstrap CSS
Templates

If you ever wanted to start a blog this is a great example of how to do so

leveraging React and GraphQL. I am not saying that WordPress always is a
https://thesmartcoder.dev/9-projects-you-can-do-to-become-a-front-end-master/ Page 10 of 14
The Smart Coder 27/11/20 20:26

bad choice but with Gatsby you can create highly performant sites while
using React which is an awesome combination! Example Project

Build a Blog with Gridsome

Gridsome is to Vue...Okay, we already had that with Next/Nuxt but the same
is true for Gridsome and Gatsby. Both use GraphQL as a data layer but
Gridsome makes use of VueJS. It also is an awesome static site generator
that will help you create great blogs:

What you will learn

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

Tech Stack & Features

https://thesmartcoder.dev/9-projects-you-can-do-to-become-a-front-end-master/ Page 11 of 14
The Smart Coder 27/11/20 20:26

Gridsome
Vue
GraphQL
Markdown
Netlify

This for sure isn't the most comprehensive tutorial but covers the basic
concepts of Gridsome and Markdown and could be a good starting point.
Example Project

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:

https://thesmartcoder.dev/9-projects-you-can-do-to-become-a-front-end-master/ Page 12 of 14
The Smart Coder 27/11/20 20:26

What you will learn

While the other projects focus mainly on web applications this one will show
you how to create a mobile app using Vue via the Quasar framework. You
should already have a working Cordova setup with android studio / xcode
configured. If not there is a link in the tutorial to the quasar website where
they show you how to set this up.

Tech Stack & Features

Quasar
Vue
Cordova
Wavesurfer

https://thesmartcoder.dev/9-projects-you-can-do-to-become-a-front-end-master/ Page 13 of 14
The Smart Coder 27/11/20 20:26

UI Components

A small project that shows the power of Quasar for building mobile apps.
Example Project

Conclusion
In this article I showed you 9 projects that you can build, each focusing on
another 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 with it?

https://thesmartcoder.dev/9-projects-you-can-do-to-become-a-front-end-master/ Page 14 of 14