Introduction
Whether you are a beginner in programming or an experienced developer, learning new concepts and languages/frameworks is essential to keep up with trends in the industry.
Take React, for instance—the code for which Facebook opened just four years ago—it's already the number one choice for JavaScript developers worldwide.
Vue and Angular certainly have their fair share of fans as well. There are also Svelte and other versatile frameworks like Next.js or Nuxt.js. Gatsby, Gridsome, Quasar… and much more.
If you want to establish yourself as an experienced JavaScript developer, you should have at least some experience with various frameworks and libraries—beyond just working with good old JS.
To help you become a front-end master in 2020, I’ve gathered nine different projects, each dedicated to various JavaScript frameworks and libraries as tech stacks that you can create and add to your portfolio. Remember, nothing helps you more than creating things in practice, so go ahead, engage your mind, and make it happen.
This article is translated with support from EDISON Software, which , as well as .
Movie Search App Using React (With Hooks)
The first thing you might want to start with is creating a movie search app using React. Below is an image of what the final app will look like:
What You Will Learn
By creating this app, you will enhance your React skills using the relatively new Hooks API. The project includes React components, numerous hooks, an external API, and of course, some CSS styles.
Tech Stack and Features
- React with Hooks
- create-react-app
- JSX
- CSS
Without using any classes, these projects provide you with the perfect entry point into functional React and will definitely help you in 2020. You can find . Follow the instructions or make it to your taste.
Chat App Using Vue
Another great project for you is to create a chat application using my favorite JavaScript library: VueJS. The app will look something like this:
What You Will Learn
In this guide, you'll learn how to build a Vue application from scratch — creating components, managing states, setting up routes, connecting to third-party services, and even handling authentication.
Tech Stack and Features
- Vue
- Vuex
- Vue Router
- Vue CLI
- Pusher
- CSS
This is a really great project to start working with Vue or to enhance your existing skills for development in 2020. You can find .
A beautiful weather viewing application with Angular 8
This example will help you create a beautiful weather viewing application using Angular 8:
What You Will Learn
This project will teach you valuable skills in building applications from scratch — from design to development, up to a deployable application.
Tech Stack and Features
- Angular 8
- Firebase
- Server-side rendering
- CSS with Grid and Flexbox
- Mobile-friendly and responsive
- Dark mode
- Beautiful interface
What I really appreciate about this comprehensive project is that you don't learn things in isolation. Instead, you study the entire development process — from design to final deployment.
To-Do application with Svelte
Svelte is like the new kid on the block in the component approach — at least similar to React, Vue, and Angular. And it’s one of the hottest newcomers for 2020.
To-Do applications may not be the hottest topic, but they will really help you hone your Svelte skills. It will look like this:
What You Will Learn
In this tutorial, you will learn how to create an application using Svelte 3, from start to finish. You will use components, styling, and event handlers.
Tech Stack and Features
- Svelte 3
- Components
- Styling with CSS
- ES 6 syntax
There are not many good starter projects for Svelte, so I found .
Приложение для электронной коммерции с помощью Next.js
Next.js is the most popular framework for building 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 You Will Learn
In this project, you will learn how to develop with Next.js — creating new pages and components, fetching data, as well as styling and deploying your Next application.
Tech Stack and Features
- Next.js
- Components and pages
- Data Sampling
- Styling
- Deploying the project
- SSR and SPA
It's always great to have a real example, such as an e-commerce application, to learn something new. You can .
Полноценный мультиязычный блог с Nuxt.js
Nuxt.js for Vue is like Next.js for React: a great framework that combines server-side rendering and single-page applications.
The final application you'll create will look like this:
What You Will Learn
In this project example, you'll learn how to build a complete website using Nuxt.js — from initial setup to final deployment.
It utilizes many interesting features that Nuxt has to offer, such as pages and components, as well as styling with SCSS.
Tech Stack and Features
- Nuxt.js
- Components and pages
- Storyblock module
- Mixins
- Vuex for state management
- SCSS for styling
- Nuxt middlewares
, which includes many wonderful features of Nuxt.js. I personally love working with Nuxt, so you should give it a try, as it will also make you a great Vue developer.
Blog with Gatsby
Gatsby is an excellent static site generator that uses React and GraphQL. Here’s the result of the project:
What You Will Learn
In this guide, you will learn how to use Gatsby to create a blog that you'll use for writing your own articles with React and GraphQL.
Tech Stack and Features
- Gatsby
- React
- GraphQL
- Plugins and themes
- MDX/Markdown
- Bootstrap CSS
- Templates
If you've ever wanted to start a blog, of how to create one using React and GraphQL.
I’m not saying that WordPress is a bad choice, but with Gatsby, you can build high-performance sites using React — which is an amazing combination.
Blog with Gridsome
Gridsome for Vue… Well, we’ve already had this with Next/Nuxt.
But the same is true for Gridsome and Gatsby. Both use GraphQL as a data layer, but Gridsome utilizes VueJS. It's also a fantastic static site generator that will help you create great blogs:
What You Will 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.
Tech Stack and Features
- Gridsome
- Vue
- GraphQL
- Markdown
- Netlify
This is certainly not the most comprehensive tutorial, but it covers the main concepts of Gridsome and .
An audio player similar to SoundCloud using Quasar.
Quasar is another Vue framework that can be used to create mobile applications. In this project, you will create an audio player app, for example:
What You Will Learn
While other projects focus primarily on web applications, this one will show you how to create a mobile application using Vue and the Quasar framework.
You should already have a working Cordova setup with Android Studio/Xcode configured. If not, there is a link in the guide to the Quasar website where they show how to set everything up.
Tech Stack and Features
- Quasar
- Vue
- Cordova
- WaveSurfer
- UI Components
, demonstrating the capabilities of Quasar for creating mobile applications.
Source: habr.com
