DEV Community

Cover image for 9 Projects you can do to become a Frontend Master
Simon Holdorf
Simon Holdorf

Posted on • Updated on • Originally published at thesmartcoder.dev

9 Projects you can do to become a Frontend Master

Introduction

Whatever you do, it's always beneficial to have the right tools at your disposal. I love working remotely and am a big advocate of doing remote software development. Therefore, I always strive to have the best equipment available to be as productive as possible. Writing posts like this constantly takes a lot of time. Luckily iVanky helped me out and sponsored this post so that I can concentrate on writing. I recently had the chance to test out one of their hottest products, a dual USB-C Docking Station that allows me to connect both my wide-screen monitors to my MacBook with Dual 4K@60Hz display connectivity. It also supports up to 96W laptop charging, which is awesome. If you are in a situation like me and want to upgrade your equipment, check out this and their other products! And now comes the article:

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!

Build a movie search app using React (with hooks)

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:
Example project React

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: https://www.freecodecamp.org/news/how-to-build-a-movie-search-app-using-react-hooks-24eb72ddfaf7/
Follow along with the tutorial or give it your own flavor!

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:
Example project Vue

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
  • 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: https://www.sitepoint.com/pusher-vue-real-time-chat-app/

Build a beautiful weather app with Angular 8

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

What you will learn

This project will teach you valuable skills such while creating an application 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!
https://medium.com/@hamedbaatour/build-a-real-world-beautiful-web-app-with-angular-6-a-to-z-ultimate-guide-2018-part-i-e121dd1d55e

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:
Example project Svelte

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

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?
https://medium.com/codingthesmartway-com-blog/building-a-svelte-3-todo-app-from-start-to-deployment-1737f72c23a6

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:
Example project Next

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

  • 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:
https://snipcart.com/blog/next-js-ecommerce-tutorial

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:
Example project Nuxt

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!
https://www.storyblok.com/tp/nuxt-js-multilanguage-website-tutorial

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:
Example project Gatsby

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 bad choice but with Gatsby you can create highly performant sites while using React which is an awesome combination!
https://blog.bitsrc.io/how-to-build-a-blog-with-gatsby-and-boostrap-d1270212b3dc

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:
Example project Gridsome

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

  • 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.
https://www.telerik.com/blogs/building-a-blog-with-vue-and-markdown-using-gridsome

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:
Example project Quasar

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
  • UI Components

A small project that shows the power of Quasar for building mobile apps.
https://www.learningsomethingnew.com/how-to-build-a-sound-cloud-like-audio-player-app-with-vue-js-quasar-and-wave-surfer

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 of? Or will you rely on your favorite framework/library and do all the projects with it?

I recently started a new site: The Smart Coder where I create free content for the community, such as more posts about javascript projects.

If you like what I write and want to support me and my work, please follow me on Twitter to learn more about programming, making, writing & careers🥰

Top comments (235)

Collapse
 
victorcazanave profile image
Victor Cazanave

Interesting and inspiring article!

To learn/practice a JS framework I always build the same (video game search) app to focus on the front-end without spending time on the API, build tools... It's also a good way to compare the frameworks. But it may be time to change to another app :)

Collapse
 
simonholdorf profile image
Simon Holdorf

You must be the master of video game searches, no doubt :)

Collapse
 
sharadcodes profile image
Sharad Raj (He/Him)

😂

Thread Thread
 
johongirr profile image
Jaxongir

woow

Collapse
 
hood profile image
Andrea Cappuccio

best approach imho

Collapse
 
pulkitsingh profile image
Pulkit Singh

Which video games api you used? Gamedb?

Collapse
 
victorcazanave profile image
Victor Cazanave • Edited

IGDB (api-docs.igdb.com), but there may be better ones. Since it's only to practice the front-end development, I just picked a random one.

Thread Thread
 
pozda profile image
Ivan Pozderac

To be honest, I didn't found better Games-related API than IGDB, it was swedish project at first, but acquired by Twitch. Data set is quite rich and useful, so anybody looking for the games database, this one is pretty decent.

I found that IGDB is having most of the handheld (GB, DS, PSP...) games data while others are lacking a lot in handheld department!

Collapse
 
appcode profile image
AppCode ⚡

As Victor mentioned learning a JS frame is a easy way to master JavaScript. Before jumping into a JS framework, on appcode.app (web developer reference site), there is an article on some basic JavaScript concepts such as functions and variables you might find helpful for beginners. Also a image of a basic JavaScript function below.

A diagram of a JavaScript function and it's parts

Collapse
 
sobolevn profile image
Nikita Sobolev

I would recommend to use wemake-vue-template to get started with Vue and Nuxt.

It allows you to start easily with the full-featured project. Features:

  • Proven to work on both small and large scale projects
  • Always up-to-date with the help of @dependabot
  • Latest nuxt for server-side rendering
  • Full typescript support, including Vue's SFC, Vuex, and tests
  • Tools to write business logics including: DI, IoC, runtime type validation
  • Linting with eslint + stylelint
  • jest for unit tests and testcafe for end-to-end testing
  • docker optional support for development, testing, and production
  • Gitlab CI with full test and deploy pipeline configured by default
  • Meaningful docs, covering almost every aspect of the project, including jsdoc annotations
  • Full vscode support and list of suggested settings and plugins
  • Easy update process, so your template will always be up-to-date
Collapse
 
aybee5 profile image
Ibrahim Abdullahi Aliyu

Thanks

Collapse
 
caligrits profile image
JustDoIT

Thank you Nikita ;)

Collapse
 
seyfer profile image
Oleg Abrazhaev

testcafe? I find it a weird choice, now Cypress is trending and it is a pleasure to use tool.

Collapse
 
sobolevn profile image
Nikita Sobolev

It is a tool we are using for quite some time. I agree that Cypress is more pleasant these days

Collapse
 
xtechnologytr profile image
XTechnology

....

Thank you, that's a really important guide. 😉💻

Collapse
 
shivamnarkar47 profile image
shivamnarkar47

Thanks

Collapse
 
hazarikaameer profile image
Ameer Hazarika

One of the most useful articles I've read in a while.

I'm also just on the brink of starting with JavaScript Frameworks.

Still a beginner. But I'm hoping I can do one of these.

Thank you for the article brother.

It's amazing.

Collapse
 
devjasper profile image
DevJasper

As a beginner, don't ever start off with frameworks, go for vanilla JavaScript first.

Collapse
 
simonholdorf profile image
Simon Holdorf

I think it really depends where you come from, how you learn best and what you want to achieve. It won't hurt to know the basics but if you have fun learning for example some Vue first and that helps you to become a better developer I would go for it.

Collapse
 
hazarikaameer profile image
Ameer Hazarika

Yes. I have gone through Vanilla JavaScript. That's the reason I'm proceeding to frameworks now.

Collapse
 
simonholdorf profile image
Simon Holdorf

I have no doubt that you can do it. The only way to find out and become better is to start building stuff! I wish you all the best on your journey :)

Collapse
 
mnabeelp profile image
Mohammed Nabeel

This is a very good article to build your skillset in the trending JS frameworks and which you can best work on. It all depends on how much time and effort we have to apply to it and explore the possibilities. Very insightful, thanks.

Collapse
 
hazarikaameer profile image
Ameer Hazarika

Thanks mate.

Collapse
 
edizle585 profile image
Elijah Logan

Ameer, what projects have you been working on to build your skills?

Collapse
 
hazarikaameer profile image
Ameer Hazarika

Right now. I'm working on the Search movie app mentioned in this post.
It's the perfect project to get used to React Hooks.

Collapse
 
itachiuchiha profile image
Itachi Uchiha

Thanks for your sharing. These really will be useful for newbies.

Btw, I did all of them but I haven't got a good CSS knowledge. Yes JS and its frameworks are good but I need advice about CSS :) What are your suggestions?

I need a guide like a start zero to a hero guide.

For example, it should contain, "units of measurement", "PSD to HTML", "mobile design and desktop design" etc.

Let's assume, Think a designer who uses the sketch. He/She gave me a template and expecting me coding this template.

What should I do first?

Collapse
 
simonholdorf profile image
Simon Holdorf

Have you checked out Scott Tolinski's site yet? leveluptutorials.com/tutorials/css...

He is a great teacher and has some free resources available

Collapse
 
itachiuchiha profile image
Itachi Uchiha

Thanks. I'll check. Actually, he is on my list :) I couldn't watch this series.

Thread Thread
 
dhrmelvin profile image
Melvin

Advance Css/Sass course of Jonas Schmedtmann is a very helpful one, explained all in details 😄

Thread Thread
 
kp profile image
KP

Love Scott Tolinski

Thread Thread
 
joydeep-bhowmik profile image
Joydeep Bhowmik

yes sir

Collapse
 
robkedzior profile image
Robert Kedzior

As for GatsbyJS, I really recommend going through their tutorial on creating a Gatsby website, before using any templates. It's amazingly documented and well explained. Helped me a lot before I started using templates.

Collapse
 
robkedzior profile image
Robert Kedzior

Do you think it would be a good idea to have a topic about different CMS selection for GatsbyJS and their usability for different projects? :)

Collapse
 
simonholdorf profile image
Simon Holdorf

You mean like contentful, headless wordpress, etc?

Sounds like a good idea!

Thread Thread
 
robkedzior profile image
Robert Kedzior

Yup, exactly, I think they differ in terms of setup complexity/speed for start and some can be better for small projects (like a simple blog for example).

Collapse
 
cortazar11 profile image
Miguel Martinez

Excellent overview of frameworks and tools to build Apps.
It seems to me that is a bit ambitious trying to master all of them.
I use React (and Redux for state management) and still I am struggling with that.
Might be it is better to get a approach to all of them that be proficient in one.

Collapse
 
simonholdorf profile image
Simon Holdorf

I wanted to make it a bit broader on purpose so that everyone can find something that fits for him/her. If you are already investing in react I would stick with it.

Collapse
 
cortazar11 profile image
Miguel Martinez

Yes. That is what I thought in first place.
Anyway, I have Vue inmediately in the queue with excellent instructor Stephen Grider in Udemy.

Collapse
 
duyidingyongzhi profile image
Duyi-Dingyongzhi

Hello,sir.
I'm a web developer from China.
It's very lucky that I found your essay a few days ago.It helped me a lot to some extent.
So here's a request that if I could get your permission to translate your essay into Chinese to help more Chinese web learner.It will be extremely delighted if I can have your permission.
And no matter what it would be,I'm still grateful for learning from you.Looking forward to your answer.

Best wishes.

Collapse
 
simonholdorf profile image
Simon Holdorf

Sure, go ahead

Collapse
 
duyidingyongzhi profile image
Duyi-Dingyongzhi

Thanks a lot

Collapse
 
raymag profile image
Carlos Magno

This is very exciting, right now I can't do any of these projects. Let's see what I can do in the next weeks.

Collapse
 
simonholdorf profile image
Simon Holdorf

I'm glad it inspired you. The thing is that just have to build stuff if you want to become better. Theory gives you only so much but building apps and doing projects is what takes you forward!
Maybe check out some Vue.js if you are new to this because it is very beginner-friendly in my opinion.

Collapse
 
mysocialhike profile image
My Social Hike

Great article.
I am also using VueJs in my current project. It's really fun to work with VueJs.

Collapse
 
simonholdorf profile image
Simon Holdorf

It absolutely is, I really enjoy working with Vue.js!

Collapse
 
swarupkm profile image
Swarup Kumar Mahapatra

Hi, I have been a backend developer working with java sprint boot and nodejs express techstack for quite a while.
I want to make a transition to frontend development so as to be a fullstack developer.
Should I jump into the above mentioned projects?

Collapse
 
simonholdorf profile image
Simon Holdorf

I think it would be a smart move to go for one major framework like Vue or React sooner or later then. So you could use this to get a good overview and then decided with what to go on. Nuxt(Vue) works well with express so this might be a good starting point!

Collapse
 
swarupkm profile image
Swarup Kumar Mahapatra

Also it would be a big transition from a mindset perspective. As a backend developer, we think about data, persistence, concurrency, scalability. Etc.

I guess frontend development needs a mindset shift and some focus areas to think about

Thread Thread
 
dan503 profile image
Daniel Tonon

Yeah it would be a pretty big shift. Not mentioned in the article is all the things like learning CSS, learning accessibility, and learning to build in an environment where there are many unknown variables that you have no control over (screen-size, device type, browser, input method, etc.)

Collapse
 
hamedbaatour profile image
Hamed Baatour • Edited

wow, I didn't expect to see my Angular tutorial here 😲
I wrote that weather app article back in 2018 and I am glad it's still valid even today.
@simonholdorf thank you for the mention! honestly, you motived me to write another full app tutorial again! happy to hear any app suggestions for my next article (+which framework you want to see)

Collapse
 
quooston profile image
Quooston

This is such a great article for so many people. It's just missing Aurelia, which is honestly such a fantastic framework. Well worth far more publicity. Unfortunately, the Google's and Facebook's steal the show with mainstream momentum... Such is life.

Collapse
 
pianomanfrazier profile image
Ryan Frazier

Elm is also a lovely language/framework.

Collapse
 
simonholdorf profile image
Simon Holdorf

That's true!

Collapse
 
simonholdorf profile image
Simon Holdorf

Yeah there are some real nice frameworks out there, but it would go too far to cover them all in one article :/

Collapse
 
beitadev profile image
Zaheed B.

Nice article. I hope you can recommend some projects for vanilla JavaScript.

Collapse
 
yeraycat profile image
Yeray Catalá

I suggest you to try to build a (very very simple) framework.

Try to implement the basis of a frontend framework: Render components, change detection, spa routing...

I don't think you will get anything suitable/maintainable/performant enough for a production environment, but you will learn a lot about vanilla Javascript and the typical gotchas of the frontend.

Collapse
 
beitadev profile image
Zaheed B.

How do I go about that?

Thread Thread
 
yeraycat profile image
Yeray Catalá

There are a few articles over the internet from people that tried to do it as a learning experience and documented it, however I can't find one good enough right now.

Those 3 topics I think are the core of every frontend framework:

  • Render components
  • Detect changes on the data model and update those components (and viceversa)
  • Navigation without reloading (spa routing)

So you can start by trying to find out how you are going to implement components.

You can do the Angular/Vue way, that is to render the component from an html template and give it some capabilities based on custom html tags, or you can go with the React approach, that is the opposite, to create the components using javascript functions and return the template.

Once you have that, you should start with the actual rendering. The gotcha here is to render components recursively (one component has another on its template, so when you render the parent every child gets rendered eventually).

Once you have that, start with change detection. This is the most tricky point I think, because it has to be done recursively also, but it can be a headache to keep it performant.

You can check the source code and issue trackers of existing frameworks to try to extract some techniques and knowledge about how they solved it.

Collapse
 
simonholdorf profile image
Simon Holdorf

Thanks for your comment, Yeray!

Collapse
 
tuwang profile image
TuWang

Nice high level aggregation. This is awesome for anyone, even experienced dev, to refresh the knowledge and keep up with things.

Oh wait, what am I thinking? Nobody can keep up with front end frameworks iterations.

We’ll all just be chasing like crazy ;)

Collapse
 
simonholdorf profile image
Simon Holdorf

Yeah that's true to some extent. But Nobody needs to fully know everything in and out, If you are capable to handle one of the major frameworks well and also have some good basics in JS you are well prepared for the future I think.

Collapse
 
davidforer profile image
David Forer

Thank you for putting together this list of projects. I do learn better with projects, as I generally screw something up which forces me to look up solutions and learn the code. LOL. Anyway can't wait to get started on a couple of these!

Some comments may only be visible to logged-in visitors. Sign in to view all comments.