Introduction
Whether you are new to programming or already an experienced developer, in this industry, learning new concepts and languages/frameworks is a must to keep up with trends.
Take, for example, React, which was only open sourced by Facebook four years ago and has already become the number one choice for JavaScript developers around the world.
Vue and Angular, of course, also have their legitimate fan base. And then there are Svelte and other general purpose 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 must have at least some experience with various frameworks and libraries - in addition to doing good old JS work.
To help you become a front-end master in 2020, I've put together nine different projects, each focusing on different JavaScript frameworks and libraries as a tech stack that you can build and add to your portfolio. Remember that nothing helps you more than putting things into practice, so go ahead, turn on your mind and make it possible.
The article was translated with the support of EDISON Software, which and .
Movie search app with React (with hooks)
The first thing you could start with is building a movie search app with React. Below is an image of what the final app will look like:
What will you learn
By building this application, you will improve your React skills using the relatively new Hooks API. The sample project uses React components, lots of hooks, an external API, and of course some CSS styling.
Tech stack and features
- React with hooks
- create-react-app
- JSX
- CSS
Without using any classes, these projects give you the perfect entry point into functional React and will definitely help you in 2020. you can find . Follow the instructions or make it your own.
Chat app with Vue
Another great project for you is to build a chat app using my favorite JavaScript library: VueJS. The application will look something like this:
What will you learn
In this tutorial, you'll learn how to make a Vue app from scratch - create components, handle states, create routes, connect to third-party services, and even handle authentication.
Tech stack and features
- View
- vuex
- vue router
- CLI view
- Pusher
- CSS
This is a really great project to get started with Vue or improve your existing skills to get into development in 2020. you can find .
Beautiful weather app with Angular 8
This example will help you build a beautiful weather app using Angular 8:
What will you learn
This project will teach you valuable skills in building applications from scratch - from design to development, all the way to a ready-to-deploy application.
Tech 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 really like about this comprehensive project is that you don't study things in isolation. Instead, you learn the entire development process from design to final deployment.
To-Do app with Svelte
Svelte is like the new kid in the component approach - at least similar to React, Vue and Angular. And this is one of the hottest new products for 2020.
To-Do apps aren't necessarily the hottest topic, but they will really help you hone your Svelte skills. It will look like this:
What will you learn
This tutorial will show you how to create an application using Svelte 3, from start to finish. You will use components, styling and event handlers
Tech stack and features
- Slender 3
- Components
- Styling with CSS
- Syntax ES6
There aren't many good Svelte starter projects, so I found .
Ecommerce App with Next.js
Next.js is the most popular framework for building React apps 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 will you learn
In this project, you'll learn how to develop with Next.jsβcreate new pages and components, retrieve data, and style and deploy a Next application.
Tech stack and features
- next.js
- Components and Pages
- Data sampling
- Stylization
- Project Deployment
- SSR and SPA
It's always great to have a real-life example like an e-commerce app to learn something new. You can .
Full multilingual blog with Nuxt.js
Nuxt.js is for Vue, like Next.js is for React: a great framework for combining server-side rendering and single-page applications
The last application you can create will look like this:
What will you learn
In this sample project, you'll learn how to build a complete website using Nuxt.js, from initial setup to final deployment.
It takes advantage of many of the cool features that Nuxt has to offer, such as pages and components, and 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 of the great 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 a great static site generator using React and GraphQL. This is the result of the project:
What will you learn
In this tutorial, you will learn how to use Gatsby to create a blog that you will use to write your own articles using React and GraphQL.
Tech stack and features
- Gatsby
- React
- GraphQL
- Plugins and Themes
- MDX/Markdown
- Bootstrap CSS
- Patterns
If you ever wanted to start a blog, how to make it using React and GraphQL.
I'm not saying WordPress is a bad choice, but with Gatsby you can build high performance websites using React - which is an amazing combination.
Blog with Gridsome
Gridsome for Vue⦠Okay, we already had that with Next/Nuxt.
But the same is true for Gridsome and Gatsby. Both use GraphQL as their data layer, but Gridsome uses VueJS. It's also an awesome static site generator to help you create great blogs:
What will 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 an application through Netlify.
Tech stack and features
- Gridsome
- View
- GraphQL
- Markdown
- netlify
This is certainly not the most complete tutorial, but it covers the basic concepts of Gridsome and .
Audio player similar to SoundCloud using Quasar
Quasar is another Vue framework that can be used to build mobile apps. In this project, you will create an audio player application such as:
What will you learn
While other projects focus mostly on web apps, this one will show you how to build a mobile app using Vue and the Quasar framework.
You should already have a working Cordova with Android Studio/Xcode set up. If not, the manual has a link to the Quasar website where they show you how to set everything up.
Tech stack and features
- Quasar
- View
- Cordova
- wavesurfer
- UI Components
, demonstrating Quasar's capabilities for building mobile applications.
Source: habr.com