So You Learned MERN. Now What?

You finally finished an entire MERN tutorial on YouTube. For the next few weeks, you work on a dream project of your own. Now you are done, and you’re wondering: Is that it?

And for some of you, it is. But for those who seek a more holistic understanding of web development, there is still a long journey ahead of you. So to get you started off on the right foot, here is a compilation of must-know technologies to expand your knowledge of the web:

PostgreSQL

While NoSQL databases like MongoDB have their benefits and use cases, SQL databases are a must know. The SQL query language is extremely powerful, allowing you to make much more complex and efficient queries. And unlike NoSQL databases, SQL databases enforce the structure of the data passed into the database, ensuring the validity of the data.

Why you should learn: To understand SQL and relational databases, it is very useful.

Next.js

create-react-app can go a long way, but eventually you will want the capabilities provided by a framework such as Next.js. The key feature that sets Next.js apart is server-side rendering (SSR). This is when HTML pages are created on the server side, rather than on the client side. The benefit of this approach is better performance and SEO. Another advantage Next.js provides is static-site generation (SSG). If a page does not require external data, it can be prerendered at build time which boosts load time significantly. Next.js also has automatic code splitting which means only the JavaScript and CSS that is needed for a certain page will be loaded, yet another performance boost.

Why you should learn: To understand and use server-side rendering.

TypeScript

If you are daunted by the idea of learning a new “language”, don’t be. TypeScript is technically just a superset of JavaScript, and most of the work is already done for you. With TypeScript, you can take advantage of libraries with type definitions, allowing you to reap all the benefits of autocompletion and static types with little effort on your part.

Why you should learn: For autocompletion, static typing, and catching errors.

React Query

React Query provides a better way for fetching data from your API. It provides a lot of useful functionality such as a loading variable, pagination support, and perhaps best of all, caching. By automatically caching your data, React Query gets rid of the need to store such data in global state such as Redux, and makes your API calls more efficient. What’s more, React Query also works with GraphQL APIs, the next topic in line.

Why you should learn: For caching and removing the need for Redux.

GraphQL

The idea behind GraphQL is simple: only return the data you want, nothing more and nothing less. A GraphQL API has only one endpoint, and all you need to do is tell it what action to perform and the data to return afterwards. GraphQL is meant to be an alternative to traditional REST APIs, but is most productive when used in medium to large size projects due to its flexibility.

Why you should learn: For more flexible APIs which work better the larger your project grows.

GraphQL Code Generator
For those who love TypeScript, GraphQL Code Generator is a must-have for automatically generating type definitions from your GraphQL schema. Now, you no longer need to create redundant type definitions on the frontend, as it is all done for you in one command.

Go

Want to learn a new language? Enter Go, or Elixir, or anything else that peaks your interest. Personally, I settled on Go because of its strong static typing, large community, speed, and overall enjoyment. While this is an unnecessary step for most web developers, there comes a time when you become tired of writing JavaScript all the time, and will become entranced by other languages. Luckily, there are many languages that work well in the backend to satisfy your desires.

Why you should learn: For fun and/or to avoid using JavaScript.

Architecture

Good architecture goes a long way in building a long term project, and there is a simple way to make your project more scalable.
Many projects start off with the files being organized by their type:

/components
    UserProfile.tsx
    Article.tsx
    Comment.tsx
    CommentFeed.tsx
/hooks
    useUser.ts
    useComment.ts
    useArticle.ts
/types
    userTypes.ts
    articleTypes.ts
    commentTypes.ts
/utils
    formatTime.ts
    humanize.ts

However, this means that the folders will grow in size as the project grows, making it harder to organize and find the file you are looking for.
A better approach is to add an extra layer to separate code by their feature:

/users
    /components
        UserProfile.tsx
    /hooks
        useUser.ts
    /types
        userTypes.ts
/articles
    /components
        Article.tsx
    /hooks
        useArticle.ts
    /types
        articleTypes.ts
/comments
    /components
        Comment.tsx
        CommentFeed.tsx
    /hooks
        useComment.ts
    /types
        commentTypes.ts
/utils
    formatTime.ts
    humanize.ts

While this enlarges the file tree, it makes it easier to organize and locate files due to the separation. Anything that is used across multiple features such as utils can be placed in the root directory.

Why you should learn: For better scalability and organization.

Others

Tailwind CSS
CSS is the bane of many full stack developers’ existence. Over time, many CSS frameworks have emerged to alleviate that pain, and for me, the cure was Tailwind CSS. It provides a high level of control while still maintaining its simplicity and development speed. And best part of all, I no longer need to spend time thinking of class names. If Tailwind CSS is still too similar to CSS for you, there are many other CSS frameworks out there for you to try.

Docker
Docker has become quite popular over the years, and while I admit that I am not the most proficient in it, I would be remiss if I did not acknowledge the many benefits it provides. The main purpose of Docker is to containerize your code, meaning it runs in the same environment no matter where it is deployed. This eliminates the possibility that code runs on your computer but not on someone else’s due to differences in computer set up. With Docker, if it runs on your computer, it will run on anyone’s computer.

Cypress
Testing is vital for any production level product. It ensures the robustness of your code and speeds up development in the long run. Cypress is great because it tests applications as if it were a real user, ensuring that your product behaves exactly how you want in the real world.