Andrew Baisden

Posted on Jul 5, 2021

Modern Full-Stack Developer Tech Stack 2021

#javascript #webdev #beginners #react

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

Top comments (106)

Eckehard • Jul 5 '21

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...

Oziel Perez • Jul 8 '21 • Edited

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

ninad • Jul 6 '21

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

Eckehard • Jul 30 '21

"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?

Ritin • Jul 9 '21

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

Eckehard • Jul 30 '21

What´s wrong with the gorilla?

Ritin • Aug 1 '21 • Edited

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…

Bloated Code. Why should you have to write code for Class C and Class B? When All you want todo is use Class D
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 • Aug 4 '21

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.

Sujoy Dutta • Jul 8 '21 • Edited

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.

Mr_Green • Jul 7 '21

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.

Matteo Vignoli • Jul 6 '21

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

Christian Kozalla • Jul 6 '21

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 • Jul 7 '21 • Edited

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 • Jul 7 '21 • Edited

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 • Jul 7 '21 • Edited

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..

admapop • Jul 8 '21

Oh wow the number of PHP maxis here is staggering.

I don't know why PHP developers are so... protective. We have a few in our company as well. But the reality is, we are migrating everything we can from PHP to Go and that's that.

If you're building a modern application, PHP has no business in it.

Oziel Perez • Jul 8 '21

I never said I was a senior dev, just that there's differences between new and seasoned devs. I'm sorry that you can't understand why anyone wants to use PHP in 2021. The fact that you're here trying to argue that one shouldn't bother learning a tool that has proven to be resourceful for many applications says a lot about your lack of willingness to cooperate with other devs on their choices. One thing you should focus on is open-mindedness as newer tools in the future will replace JS and phase out that tech stack, even if that means switching back to older technology. Also, think about learning to communicate well so that you can succeed in working with teams. Spouting comments to get people to agree with you won't get you anywhere

Oziel Perez • Jul 9 '21

True this post is about JS Full Stack but the argument is valid that you should promote other programming languages and not just stick to JS. That's the main problem. JS is a crippling language. It doesn't do much to teach you about OOP or good programming techniques. You can get better mileage with PHP or Java or even Go. In other words, don't tell others that you should just "settle" for one thing; there's many other tools and languages to explore that can be useful for certain use cases. Node.js for example is single threaded, doing async operations using the event loop, whereas you can get better async performance with something like Go routines or even Kotlin coroutines. PHP is now more powerful than JS and should definitely be promoted above JS for certain use cases, where as other things like maybe WebSockets is where JS shines above PHP. Again the point is, definitely promote PHP or any other language without hating on JS as all have their pros and cons.

And as for Cobol, well, you'd be surprised to see what you can still do with Cobol nowadays. Sure it's not useful for modern web dev but you can still get some pretty secure programs done with Cobol

Farhad Ali • Jul 8 '21

why would Laravel be creating components and mucking up the whole codebase with its barebones unopinionated approach like react when it is not even going to produce SPA. imagine having to download 1000+ npm libs made by Tom, Dick, and Harry just because there is no 1 simple way to get things done. well Laravel has that, and we don't need to hydrate shit. at the end of the day, Laravel is beautiful because it makes coding features 1000x easier than react and its node ecosystem.

Jason Go • Jul 8 '21

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.

Sereton • Jul 8 '21

Laravel is 10X more polished and productive that any node-based stack. I would abstain to comment if I am going to display my ignorance so blatantly.

Farhad Ali • Jul 8 '21

I agree. working with laravel makes it so much easier to build out stuff . React is cancer compared to the beautify and simplicity of laravel

Martin Jablečník • Jul 7 '21 • Edited

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 • Jul 7 '21

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.

Julian H • Jul 8 '21

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

mattiatoselli • Jul 6 '21

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

Martin Jablečník • Jul 7 '21 • Edited

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 • Jul 7 '21

dev.to/damienpirsy/comment/1g3mm

Oziel Perez • Jul 9 '21

Ok then don't call PHP outdated. Plain and simple. And, help promote other tools. You can't get buy with JS your whole career

Gleisser • Jul 5 '21

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

Oziel Perez • Jul 9 '21

Actually, were getting there with WebAssembly. Pretty soon you can run any language on the front end. And, isn't SSR just traditional way of rendering websites? As in, Multi Page Applications? That's basically what PHP is all about, of course, without running as an SPA after initial page load. Anyways, how's it harder to do closures on PHP? It too has functions and a way to pass in variables from a higher scope, which, depending on your view point, is better because it prevents variable name conflicts from multiple scopes and explicitly states where you are getting such data. I mean, it's not that different. Makes it easier to reason about your code.

Ritin • Jul 9 '21

Comparing Javascript with PhP is like comparing Oranges and Apples.
With Typescript Javascript gets the powers of Traditional Languages.
So now, Javascript can do everything a Traditional Language can do. But the reverse is not true.
Also, Real-Time Data-Driven Apps can only be written in Javascript.
Nice Topic for Discussion though.

Eckehard • Jul 28 '21

Maybe JS is not perfect at all. And maybe it does not make it too easy. But you can write well designed OO style code in Javascript.

It's like drinking: alkohol does not solve your problems, but neither does milk!

View full discussion (120 comments)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

DEV Community

Modern Full-Stack Developer Tech Stack 2021

Project Management

Design

Back-End

Front-End

Mobile

Top comments (106)

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

Read next

What is the Difference between "sequel" and "SQL"?

Magic Link Authentication in 5 minutes with Next.js + Next-Auth + Full-Stack-Kit

Lessons from open-source: How obsessed are you with following Single Responsibility Principle?

Web Performance Optimization Techniques