Technologies That I'll Be Learning in 2021 as a MERN Stack Developer (with resources)
Tags: webdev, typescript, react, node
Published: 2021-01-05 08:31:47

Hi Dev Community!

2020 has been a year of learning for me and I'm positive that this has been the case for tons of other self taught developers out there. From React to Redux, 2020 has shaped me into becoming a full stack developer, something that I'm passionate about.

Going forward, I have decided to learn the following technologies in 2021. While this is not a 'top 10' list for things that you SHOULD learn, this is just my take on it. Having said that, please feel free to share your opinions or suggest new technologies. I've also left some **links to free resources** for learning all the technologies I talk about. Alright, enough talk. Let's dive into the main stuff.

----

## TypeScript
![TypeScript Banner](https://dev-to-uploads.s3.amazonaws.com/i/y38cozt2ehmd04k6v1ia.png)

One thing that I was grateful for in 2020 was that I was able to build big projects, to a level that it was becoming kind of tedious to keep up with the bugs and potential issues that were popping up. Enter TypeScript! I've heard lots of people praising TypeScript for exactly solving this problem. Since it's also used in lots of production level projects, I see no reason to avoid TypeScript.

**Resources to get started:**
[TypeScript Tutorial by Academind on YouTube](https://www.youtube.com/watch?v=BwuLxPH8IDs)
[TypeScript Playlist by The Net Ninja on YouTube](https://www.youtube.com/watch?v=2pZmKW9-I_k&list=PL4cUxeGkcC9gUgr39Q_yD6v-bSyMwKPUI)

----

## React-Query
![React Query Banner](https://dev-to-uploads.s3.amazonaws.com/i/usw6exics24fu4lothyr.png)

I'm excited for this one. So what exactly is react-query, you ask? It is a NPM package which you can use to asynchronously fetch data from an API. That's the simplest explanation that I could come up with. But hey, doesn't Redux with Axios do the same? Yes, but react-query comes with features such as auto-caching, garbage collection, infinite scroll and much more! Definitely something which you can use to improve your developer experience as well as performance. By the way, if you use Redux, you might want to checkout [Redux Toolkit](https://redux-toolkit.js.org/).

**Resources to get started:**
[React Query Playlist by The Net Ninja on YouTube](https://www.youtube.com/watch?v=x1rQ61otgtU&list=PL4cUxeGkcC9jpi7Ptjl5b50p9gLjOFani)
[Redux Toolkit by Justim Kim on YouTube](https://www.youtube.com/watch?v=9lCmbth63k0)

----

## Tailwind CSS
![Tailwind CSS Banner](https://dev-to-uploads.s3.amazonaws.com/i/p1lca5prytimv01lk6hy.png)

I've used Bootstrap, Materialialize CSS and Bulma in the past. But somehow, Tailwind CSS still manages to excite me. I've heard great things about it and have also seen some stunning websites built using it. I'm aware of how it is a bit different from other CSS frameworks out there but that's where the fun lies. For the React side of things, I also want to explore [Material UI](http://material-ui.com/) a bit more.

**Resources to get started:**
[Tailwind CSS Crash Course by Brad Traversy on YouTube](https://www.youtube.com/watch?v=UBOj6rqRUME)
[Tailwind CSS 2.0 Crash Course by codedamn on YouTube](https://www.youtube.com/watch?v=vAaZoYhQQRg)
[Tailwind CSS Playlist by The Net Ninja on YouTube](https://www.youtube.com/watch?v=bxmDnn7lrnk&list=PL4cUxeGkcC9gpXORlEHjc5bgnIi5HEGhw)

----

## NextJS
![NextJS Banner](https://dev-to-uploads.s3.amazonaws.com/i/pvpibz726khxt7y7227q.png)

Next is great! I tried it for a brief period of time around the end of 2020 and I see no reason why I shouldn't take it up and use it in my own projects. If you're a React developer, the learning curve is pretty smooth. The benefits it brings, such as server side rendering and automatic image optimization make it well worth learning. Highly recommend it for all the React devs out there.

**Resources to get started:**
[Next.js Fundamentals by Mehul Mohan on codedamn](https://codedamn.com/learn/nextjs-fundamentals)
[Next.js Playlist by Bruno Antunes on YouTube](https://www.youtube.com/watch?v=7J4iL1HDshQ&list=PLYSZyzpwBEWSQsrukurP09ksi49H9Yj40)

----

## GraphQL
![GraphQL Banner](https://dev-to-uploads.s3.amazonaws.com/i/xavgwcqgls5oak2twssx.png)

GraphQL is a query language for fetching data from APIs. What makes it great is that it is capable of exactly what is requested for and getting multiple resources in a single request, thus saving us multiple requests to the API server and improving the performance. I've only been using REST APIs till now and excited to see how GraphQL can improve my future projects. 

**Resources to get started:**
[Learn GraphQL by Web Dev Simplified on YouTube](https://www.youtube.com/watch?v=ZQL7tL2S0oQ)
[GraphQL Playlist by The Net Ninja on YouTube](https://www.youtube.com/watch?v=Y0lDGjwRYKw&list=PL4cUxeGkcC9iK6Qhn-QLcXCXPQUov1U7f)

----

##PostgreSQL
![PostgreSQL Banner](https://dev-to-uploads.s3.amazonaws.com/i/5dzs4l7i7agq973q2p88.png)

PostgreSQL or basically SQL databases are something that I've been wanting to give a try for quite some time now. I have used MongoDB my database needs in all my previous projects. I appreciate the freedom of NoSQL databases but SQL databases are widely used as well and can be a better option in some  cases. Getting good at SQL and SQL databases is going to be one of my priorities this year.

**Resources to get started:**
[PostgreSQL Tutorial by FreeCodeCamp on YouTube](https://www.youtube.com/watch?v=qw--VYLpxG4)

----

## Jest
![Jest Banner](https://dev-to-uploads.s3.amazonaws.com/i/8jo1fik6r5h6mi14u34v.png)

Jest is a JavaScript testing framework which can be used to test your Node, React, Angular, Vue, TypeScript and other JavaScript code. I'm no fan of testing currently but it is such as essential skills which can differentiate two programmers especially when it comes to large projects. I have not delved deep into knowing more about Jest but from my limited research, it aims to do what I want.

**Resouces to get started:**
[Jest Crash Course by Brad Traversy on YouTube](https://www.youtube.com/watch?v=7r4xVDI2vho)
[Jest Introduction by Web Dev Simplified on YouTube](https://www.youtube.com/watch?v=FgnxcUQ5vho)

----

## Advanced JavaScript
![JS Banner](https://dev-to-uploads.s3.amazonaws.com/i/4rpy2f4wa0bnsudcukq5.png)

Wait, what? JavaScript? Well, yes but no. Advanced JavaScript concepts such as V8 Engine, closures, hoisting, event loop, threads, binding and much more. The MERN stack is fully JavaScript and so it makes sense to get a good grasp over JavaScript, right? People do tend to miss out on the above mentioned topics when they're first learning JS and rightly so. However, it's good to go back to plain JavaScript once in a while to learn these topics.

**Resources to get started:**
[Advanced JavaScript Concepts by Andrei Neagoie on Udemy (Paid)](https://www.udemy.com/course/advanced-javascript-concepts/)

----

## React Native
![RN Banner](https://dev-to-uploads.s3.amazonaws.com/i/n64o5wu72ee56pd7fhd4.png)

Websites are great, no doubt! But the ease of use that applications provide make it a valuable skill to learn. I personally felt that I could get more users on my projects if only I had a mobile application on top of the website. React Native seems to be a good choice since I already know React and can hugely benefit me through code reuse. There's also Flutter, which uses Dart if you like that more.

**Resources to get started:**
[React Native Crash Course by Brad Traversy on YouTube](https://www.youtube.com/watch?v=Hf4MJH0jDb4)
[React Native Tutorial by Academind on YouTube](https://www.youtube.com/watch?v=qSRrxpdMpVc)
[React Native Playlist by The Net Ninja on YouTube](https://www.youtube.com/watch?v=ur6I5m2nTvk&list=PL4cUxeGkcC9ixPU-QkScoRBVxtPPzVjrQ)

----
## Some Honourable Mentions
* Serverless technologies such as AWS
* Framer Motion
* GSAP
* HTML Canvas
* UI/UX
* Docker and Kubernetes

----

So that was list of technologies to learn this year. I'd love to see yours too! Drop a comment if you feel like sharing yours. Thanks for reading!