Introduce
Whether you are a novice programmer or an experienced programmer, learning a language / framework is a must to keep up with rapid changes.
For example, React – Facebook’s open source within 4 years, it has become the top choice for Javascript dev worldwide.
However, Vue and Angular still have users. And then they are Svelte and popular frameworks like Next.js or Nuxt.js. And Gatsby and Gridsome and Quasar …
If you want to become a professional developer, you should have experience with different frameworks and libraries.
To help you become a master font-end in 2020, I have compiled 9 different projects, with different themes and different frameworks or libraries you can build and add to porfolio. Remember, nothing helps you more than you keep going.
Build a movie search app using React (with Hooks)
First you should start building an application that uses React. Here is the image of the app:
You will learn
By building this application, you will improve React skills using the new Hooks API object. The example project uses component components, hooks, and sidebar and of course css
Technology used
- React with hooks
- create-react-app
- JSX
- CSS Without using any classes, this project gives you a proejct that gives you the easiest approach to React and will definitely help you by 2020.
You can find examples here . Follow the instructions or follow your own instructions.
Build a chat application with Vue
Another great project is that you build a chat application using the Javascritp library that I like very much: VueJS.
The application may look like this:
You will learn
Technology used
- Vue
- Vuex
- Vue Router
- Vue CLI
- Pusher
- CSS This is really a great project for you to start with Vue or improve existing capabilities
You can find instructions here
Build a weather app with Angular 8
You will learn
This project will teach you valuable skills in creating an application from scratch – starting from designing to developing and going to the final product deploying step.
Technology used
- Angular 8
- Fire base
- Server-side rendering
- Css with Grip Layout and Flexbox
- Responsive
- Dark mode
- Beautiful UI I really like this comprehensive proejct. You will understand the entire application development process from design to final development. You should do it
Build a To-Do app with Svelte
Svelte is a new library compared to React, Vue and Angular. However, it is still attractive in 2020.
Ok, the todo app is not an existing hot topic, but this will really hone your Svelte skills. It looks like this:
You will learn
In this tutorial, you will learn how to create an application using Svelte 3, from start to finish. It will use components, styling, and event handling.
Technology used
- Svelte 3
- Components
- Css
- ES 6 There are many projects to start learning Svelte project, but this is the best project I found to start
And maybe you will create a more comprehensive Svelte tutorial that will be presented in the next version of the article.
Building an e-commerce shop with Next.js
Next.js is the most used framework to create React applications that support server-side rendering out of the box.
This project shows you how to build an ecommerce site that looks like this:
You will learn
In this project, you will learn how to install Next.js in the development environment, create new pages and components, get data and design interfaces, and deploy applications.
Technology used
- Next.js
- Components and pages
- Data fetching
- Styling
- Deployment
- SSR and SPA It is always a great practical example, to learn something new. You can find instructions here
Build a multilingual blog with Nuxt.js
Nust.js is Vue like Next.js with React: a great framework combining server-side rendering and single-page application
The final application looks like this:
You learn
In this example project, you will learn how to use a website using Nuxt.js from initialization to deploying.
It uses many of the interesting features that Nuxt offers, such as pages and components as well as SCSS
Technology used
- Nuxt.js
- Components and pages
- Storyblok module
- Mixins
- Vuex manages the state
- SCSS
- Nuxt middlewares This is really a very good project and has many great features of Nuxt.js. I love working with Nuxt, so you have to try building this project to help you become a better Vue developer.
Build a Blog with Gatsby
Gatsby is a great static page using React and GraplQL. Here are the results of the project:
You will learn
In this tutorial, you’ll learn how to use Gatsby to build a standout blog.
Technology used
- Gatsby
- React
- GraphQL
- Plugins and themes
- MDX / Markdown
- Bootstrap CSS
- Templates If you really want to start a blog, this example really helps how to use React and GraphQL
I don’t think WordPress is always a bad choice, but with Gatsby you’ll create a high-performing site using React, which is a great combination.
Build a Blog with Gridsome
Gridsome is Vue’s framework, as we already have Nuxt.
But like Gatsby. It also uses GrashQL to retrieve data, but Gridsome uses VueJS.
You will learn
Project will teach you how to build a simple blog with Gridsome, GraphQL and Markdown. It also guides how to deploy applications so Netlify
Technology used
- Gridsome
- Vue
- GraphQL
- Markdown
- Netlify This is certainly not the most comprehensive guide, but it covers the most basic concepts about Gridsome and Markdown and this is a good starting point.
Build a music application like SoundClod with Quasar
Quasar is another Vue framework for building a mobile application
In the project, you will create an audio player like this:
You will learn
- Quasar
- Vue
- Cordova
- WaveSurfer
- UI Component A small but powerful project that shows the power of Quasar to build a mobile application
Conclude
In this article, I see you 9 proejct you can build, they focus on a different framework or Javascript library. Now the choice is yours: You should choose something new with the framework you haven’t used before. Or you can also enhance your skills
Reference article: https://medium.com/better-programming/9-projects-you-can-do-to-become-a-front-end-master-in-2020-97577110cca1