Modern Full-Stack Developer Tech Stack 2021

The developer technology landscape changes all the time as new tools and technologies are introduced. After having lots of interviews and reading through countless job descriptions on job boards I think this is a great modern tech stack for JavaScript developers in 2021. My framework of choice is React however you can swap it out for Vue, Angular or Svelte.

There are countless tools out there so I will only be covering a selection which when combined can be used in either personal projects or in a company. Of course many other project management tools exist out there for example like Jira, confluence, Trello and Asana to name a few. This is based on user experience and preference so feel free to make slight adjustments and personal changes to suit your own tastes.

It is much simpler to concentrate on a refined set of tools instead of getting overwhelmed with the plethora of choices out there which makes it hard for aspiring developers to choose a starting point.

Project Management

• Notion - For overall project management, documentation, notes and wikis
• Clubhouse / Monday - Clubhouse or Monday to manage the development process itself. Both can be Incorporated into a CI/CD workflow so builds are done automatically and changes are reflected in the staging and production CI/CD branches
• Slack / Discord - For communication between teams

Design

• Figma - Figma is a modern cross platform design tool with sharing and collaboration built in
• Photoshop / Canva - Photoshop is the industry standard for doing graphic design work and Canva is a great image editing tool

Back-End

• Node.js - A popular modern back-end framework
• PostgreSQL - A popular SQL Database
• MongoDB - A popular NoSQL Database
• HarperDB - A popular hybrid NoSQL/SQL Database

Front-End

• NextJS / Create React App / Redux - NextJS for generating a static website or Create React App for building a standard React website with Redux for state management
• Tailwind - Tailwind for writing the CSS, as its a modern popular framework basically allowing you to avoid writing your own custom CSS from scratch leading to faster development workflows
• CSS/SASS / styled-components - This can be used as a different option to Tailwind, giving you more customization options for the components in React
• Storybook - This is the main build process for creating the components because it allows for modularity. With Storybook components are created in isolation inside of a dynamic library that can be updated and shared across the business
• Jest and Enzyme, React Testing Library and Cypress - TDD using unit tests for the code and components before they are sent to production and Cypress for end to end testing
• Sanity / Strapi - Sanity and Strapi are headless CMS, and are used to publish the content with the use of a GUI (optional tools)
• Vercel / Netlify / AWS - The CI/CD provider combined with GitHub, it makes it easy to review and promote changes as they're developed

Mobile

• React Native / Redux - React Native for creating cross platform mobile apps and Redux for state management
• Flutter/Dart - Flutter and Dart for creating cross platform mobile apps

Comments

[Gleisser]

Useful content Andrew, for me coming from a Java background is really useful seeing the perspective of a Javascript full-stack dev. Thanks!

[Felipe]

That's a very useful content. Thanks for sharing it. Could anybody have book suggestions for these kind of tech.
Cheers!

[Eckehard]

Just to be complete: This is only the topping. You first will need to get a good knowledge of HTML, Javascript, CSS, AJAX, PHP, SQL, possibly some JAVA just to read the manuals...

Then you can start learning to use all those crazy and most helpful tools...

There was a time you needed a drill to make a hole in the wall. Today you start programming a robot to build a machine that hopefully can call somebody that knows how to make a hole in the wall. It seems things have gotten really easier today...

[ninad]

Agree. Problem is you wanted a banana but with the banana you got the Gorilla and the whole Amazon rainforest with it.

[Ritin]

lol.
The "Monkey and Banana"
Classes and multple Inheritance.

[Eckehard]

What´s wrong with the gorilla?

[Ritin]

How does virtual inheritance solve the "diamond" (multiple inheritance) ambiguity?

Apr 17 '10 Comments: Answers: 5

102

class A                     { public: void eat(){ cout<<"A";} }
class B: virtual public A   { public: void eat(){ cout<<"B";} }; 
class C: virtual public A   { public: void eat(){ cout<<"C";} }; 
class D: public         B,C { public: void eat(){ cout<<"D";} }; 

int main(){ 
    A *a = new D(); 
    a->eat(); 
} 

I…

Open Full Question

1. Bloated Code. Why should you have to write code for Class C and Class B? When All you want todo is use Class D

2. You have to worry about the whole Heirarchy (eg, the whole jungle).
   Debuging becomes harder. On instantiation of D was B called or was it C?

The above example is the simplest to illustrate the point. Imagine production scenarios with deep heirarchy.

[Eckehard]

Why do you do it this way, if there is a simpler and better approach? You can use a hammer to drill a hole, but maybe that is the wrong tool for the task.

[Eckehard]

"Well, maybe in react you do not get a banana without a gorilla (does he not even look a bit like Mark Zuckerberg?). But this is not a fault of OO, it is more a result of over-use of a concept, that does not apply very well to the task."

from: What´s wrong with the gorilla?

[Mr_Green]

This is like fire in forest. Strangely most seems fine with it. Developers should bring revolting change as I believe most of our work can be automated or handled automatically.

[Sujoy Dutta]

Really PHP in todays date!! You definitely don't need PHP, Java, or SQL(can go with NoSQL, if you know what I mean). Before mastering full-stack it's better in my view to master front-end and back-end if you really want to be a Full-stack. I have worked with many Full-stack developers none became in 1 day it takes time a lot of time. Moreover "Change is the only constant" I learned this lesson in my life that keeping up with the technology is the only thing you can do because it's changing very fast.

[Oziel Perez]

Wow, the people here stuffing down JS down your throat is staggering. This is what truly separates the juniors from the seniors: those that tout you shouldn't be using X language in today's day and age are really limiting their career progress.

PHP is at a turning point where with the new JIT compiler, it now has an opportunity to break out of its web shell and go into other fields like ML, data science, maybe even game development. I highly recommend trying PHP with all the improvements it recently had.

That being said, don't bash JS either. Yes, like PHP, it has flaws, but those that hate it usually end up having a bad time with debugging because they did not properly write or test their code. Learn to get past those differences and you can write good JS.

Point is, learn any language you want for back end. Stop fighting over petty things like what language or framework to use. Learn your fundamentals, data structures, algorithms, app architecture and so forth. Those are the things that matter. Don't let the trolls bring you down with their petty arguments (looking at you @lukeshiru ). Learn good coding practices and you will be on your way to a successful career

[Matteo Vignoli]

Did you try the latest Laravel on PHP 8.1 and Octane? PHP's bad name is diehard, but I'm assuring you that in the last 3-4 years it did such a jump forward, it's like saying ES6 is still shit because you think at jQuery

[mattiatoselli]

Po**Hub is made with symfony, like Spotify. Just to mention sites with lot of traffic.

[Martin Jablečník]

But this article is about FullStack developer and I doubt that Po**Hub or Spotify develop Fullstack developers.
There are probably separated into Frontend and Backend teams where every team use their own language and framework..
But why FullStack developer should learn 2 programming languages (JavaScript and PHP+Laravel or Symfony) when he can learn only one with one syntax and use it on server backend (JavaScript + Express or NestJS)?

[Matteo Vignoli]

dev.to/damienpirsy/comment/1g3mm

[Christian Kozalla]

PHP keeps evolving both as a language (latest stable release 8.0.8 1st of July - 5 days ago) and PHP frameworks like laravel, symfony.. So you can have PHP in a modern tech stack.

[Martin Jablečník]

Yes and also there can be Python/Django, Ruby/Rails, C#/.NET or Java/Spring technologies.. But this article is more about how you can be FullStack developer in more efficient way I think => Why you should learn 2 programming languages (JavaScript and PHP+Laravel or Symfony) when you can learn only one (JavaScript + Express or NestJS)?

[Matteo Vignoli]

Knowing other programming languages is not being inefficient, is being a better developer : you learn new ways of doing something, new paradigms, new concepts...If you only use Javascript for everything you're seriously crippling your programmer's career and future: I simply don't like the idea of relying solely on a (badly designed though improving a lot) language, it will be much harder for me when I'll be forced to use something different (because it WILL happen, no matter what)

[Martin Jablečník]

Yes learning new languages surely spread your knowledge.

• And then you know that when you want to create Android application, you should know Kotlin/AndroidSDK,
• when you want to create iOS application, should know Swift and iOS SDK. - When you want to create some static pages, you can use Jekyll, Hugo or Zola.
• When you want to create some SPA web application, you can use Typescript/Vue/Vuex/NuxtJS or React/Redux/NextJS and Tailwind,
• when you want to create some cross-platform Mobile application, you can use Dart/Flutter or ReactNative.
• If you want to transform your SPA web application into mobile, you can use Cordova or Ionic,
• if you want to create some backend REST API in very short time, you can use Python and Django or Flask or FastAPI.
• If you want to create some small and powerfull microservices, you can use Golang with Gin or Chi framework.
• If you want to create some Windows desktop application, you can create it with C#/.NET or (server backend runnning in windows).
• If you want to create some desktop application for Linux, you should know Vala/GObject or Qt/QML.
• If you want to create some multiplatform application, you can create it on Java platform in languages like: Java or Kotlin or Scala

If you know all this knowledges (and maybe others) so you also know that is very efficient when you are FullStack developer and you are creating Frontend templates, API connection from backend, REST or GraphQL API backend and Database models. (also depends on your knowledges of SQL and noSQL databases and their advantages/disadvantages). When you are creating this all in one language (TypeScript for example) so you can still be in one ecosystem which is huge and maybe share some data models between backend and frontend if it is possible.

Of course you can use Python or PHP or Ruby or C# or Java or Kotlin or Swift or Go or anything else for backend. But I think that when somebody is on start of their developer career and don't know any other languages and ecosystems and want to be a FullStack developer so it is very useful to stay only in one JavaScript ecosystem for simplicity. Of course in the future he can spread their knowledge but JavaScript/NodeJS is the best solution for start of your FullStack developer career..

[Martin Jablečník]

Nice article but I think that in Back-end you missed MySQL database which is also very popular same as Postgre..
And in front-end section you completely missed Vue and NuxtJS which can be also used by FullStack developers same as React and NextJS..

[Andrew Baisden]

This article was geared more towards React and JavaScript developers because I was talking from my point of view. So anyone with a similar stack could see a possible path and make their own judgments. I also said My framework of choice is React however you can swap it out for Vue, Angular or Svelte

So I did not miss it completely its assumed that a Vue developer for example would know about NuxtJS. PostgreSQL and MySQL are similar as long as you know SQL you can use both.

[Eckehard]

Hello Andrew,

nice writeup, you listed about 30 tools a full stack developer should use today. As I noted above, there are at least 6-8 languages/standards (html, CSS, JS...) you need to know just to be able to read the manuals.

It will not be necessary to know every detail, but we should read at least 20% of the documentation for every tool to get started. So, how long do you think it would take to get started? If I start from zero today, will the tools be still on the market when I´m finished reading?

[Andrew Baisden]

Yes it is highly likely that all of those tools will still be in use. Some are already established so they wont be going anywhere anytime soon.

[Aspiiire]

Great article, I would add Adobe Xd and Illustrator for design, I think that they are more suited instead of photoshop!

[Andrew Baisden]

For vector design yes but not graphic design and image editing.

[Julian H]

But... That does not mean PHP is like jQuery UI. Not even legacy. Have you ever heard of Drupal for example? Cause you're just talking about personal preferences but missing the real picture

[farid]

Sorry but just because you don't like PHP, doesn't mean it's bad. Your answer sounds incredibly cocky and dismissive, and that's not what one expects from a good developer.

[Julian H]

It's still a personal opinion if you say Drupal is horrible,does not mean it's not used or that it's not modern enough for people to use it. You made this a discussion about whether PHP is modern or not, not about what is disgusting about PHP Frameworks or CMSs

[Jason Go]

Most often than not when companies hire full stack developers, even if they don't mention PHP, chances are they will throw a few PHP related tasks or maintenance of legacy apps. Also take note that all the server side rendering that has become famous with React and Vue are all native to PHP since forever. In fact, a lot of development patterns today in nodejs are already present in PHP a long time ago. PHP is still much a straightforward language for the web. It's the only language designed as first-class language for the web as far as backend code is concerned.

[Nikhil Kumar]

Node js is a platform , a runtime environment which brought the power of javascript from browser to the machine.

Why you said it's a framework ?
I'm new to this hence asking you this question.

[Nick Haralampopoulos]

You are correct. Node.js is a runtime environment for Javascript. It can run Javascript outside of the browser and gives access to the OS and its functionality.