5 Web Dev Platforms, Tools & Frameworks To Learn In 2022 🔥
Tags: nextjs, react, tailwindcss, supabase
Published: 2022-08-08 02:05:12

---
title: 5 Web Dev Platforms, Tools & Frameworks To Learn In 2022 🔥
published: true
date: 2022-08-01 03:44:20 UTC
tags: nextjs, react, tailwindcss, supabase
canonical_url: https://blog.layer6training.com/5-web-dev-platforms-tools-frameworks-to-learn-in-2022
---

![https://images.unsplash.com/photo-1531297484001-80022131f5a1?ixlib=rb-1.2.1&q=80&cs=tinysrgb&fm=jpg&crop=entropy](https://images.unsplash.com/photo-1531297484001-80022131f5a1?ixlib=rb-1.2.1&q=80&cs=tinysrgb&fm=jpg&crop=entropy)

# 1. React/NextJS 

Like it or lump it, Javascript frameworks have continued to take over in all aspects of web development from Web3 to traditional web apps. React and frameworks based on it have exploded in 2022 taking over from some of the other major players in the field.

![https://static.invozone.com/uploads/2021/09/stackoverflow.jpg](https://static.invozone.com/uploads/2021/09/stackoverflow.jpg)

As the tide of React rises, so do the others that are based on its component framework. This includes NextJS, a 2016 open source React-component-based framework that was created by the team at [Vercel](https://vercel.com/). Since its creation in 2016 the team has added a bunch of cutting-edge features geared towards edge hosting platforms like its own. In addition to NextJS's cloud edge focus, many consider the framework as a backend framework due to its many server-side features.

![https://nextjs.org/_next/image?url=%2Fstatic%2Fblog%2Flayouts-rfc%2Fpage.png&w=3840&q=75](https://nextjs.org/_next/image?url=%2Fstatic%2Fblog%2Flayouts-rfc%2Fpage.png&w=3840&q=75)

NextJS is the framework I personally have chosen for all my projects. You can read more about it here: [NextJS](https://nextjs.org)

# 2. VueJS 🙏

![vuejs.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1659324739868/7hSRdC3C2.png)

Vue.js is an open-source JavaScript framework for building user interfaces and single-page applications. It was created by Evan You in 2014, who also created Nuxt.js, a Vue-based framework to build production-ready Universal (isomorphic) web applications with server-side rendering.

Vue is the alternative to React or Angular in the world of Single Page Applications (SPAs). In fact, it's not a typical SPA framework because it doesn't use the MVC pattern and thus does not have controllers or models like other frameworks do.

Vue.js aims to be simple, intuitive, and easy to learn to use for new developers. It's got a lot of great features that make it an excellent alternative to other frameworks such as React or Angular.

# 3. Supabase 🐘

![supaebase](https://repository-images.githubusercontent.com/214587193/00f59f00-90a6-11eb-8764-f49e3f731458)

Supabase is a new player on the block in the world of DBaaS, Database as a Service. They are going up against the likes of Firebase by Google. But Supabase has some unique features that really set it apart from other offerings. Most notably is the use of a logical database type in the form of a managed PostGreSQL DB for all customers. This differs from Firebase which uses a NoSQL base scheme.

Other features include:

- DB Tables
- Authentication (Email/Pass, Magic Link, & Auth Identity Providers)
- Storage (images, files, etc)
- Edge Functions (New )

Check them out and signup for their very generous free tier for your side projects!: [Link](http://supabase.com)

# 4. Tailwind CSS 🔥

![https://tailwindui.com/img/og-default.png](https://tailwindui.com/img/og-default.png)

Tailwind CSS is a utility-based modern UI framework. It uses classes instead of IDs, and the power of the class attribute to add styles to your DOM elements. This means that you dont need to think about element types or where in the document they are just add your classes where you want them. The most basic way to use Tailwind is with its global window presets, which are included by default in all projects generated with Tailwind CLI (command line interface).

![Tailwind-CSS-class-tags.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1659223822892/KLyC1ZHNK.png)

TailwindCSS is a great tool for beginners to learn how to style website elements. It makes it easy to use and has a lot of documentation. Tailwind CSS allows you more flexibility than any other CSS framework out there because it doesn't have any hard rulesjust go with the flow and have fun! 🙌

# 5. HyGraph CMS (Formerly GraphCMS) 🎉

![hygraph-cms.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1659324914514/TXFdqKG4Y.png)

If you've built an app and you want to get it to market faster, then a headless CMS is the solution. Headless CMSs let you focus on your app instead of managing content. They give you the data your app needs in a structured way so that your team can focus on building out features instead of learning how to write HTML or CSS.

GraphCMS is a headless content management system. Instead of using a traditional CMS that includes an admin dashboard, GraphCMS removes the UI and gives you access to the API. This means that you can build any kind of frontend you want on top of your data-driven backend without having to rely on third parties!

GraphCMS works with most popular frameworks and is always keeping up with the latest trends in web development!

# Conclusion 

If you found this post helpful make sure to give it a like and follow me for more! 🙏