Modern Full-Stack Developer Tech Stack 2021
Tags: javascript, webdev, beginners, react
Published: 2021-07-05 10:08:34

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](https://www.notion.so/) - For overall project management, documentation, notes and wikis
-   [Clubhouse](https://clubhouse.io/) / [Monday](https://monday.com/) - 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](https://slack.com/) / [Discord](https://discord.com/) - For communication between teams

## Design

-   [Figma](https://www.figma.com/) - Figma is a modern cross platform design tool with sharing and collaboration built in
-   [Photoshop](https://www.photoshop.com/) / [Canva](https://www.canva.com/) - Photoshop is the industry standard for doing graphic design work and Canva is a great image editing tool

## Back-End

-   [Node.js](https://nodejs.org/en/) - A popular modern back-end framework
-   [PostgreSQL](https://www.postgresql.org/) - A popular SQL Database
-   [MongoDB](https://www.mongodb.com) - A popular NoSQL Database
-   [HarperDB](https://harperdb.io/) - A popular hybrid NoSQL/SQL Database

## Front-End

-   [NextJS](https://nextjs.org/) / [Create React App](https://create-react-app.dev/) / [Redux](https://redux.js.org/) - NextJS for generating a static website or Create React App for building a standard React website with Redux for state management 
-   [Tailwind](https://tailwindcss.com/) - 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](https://sass-lang.com/) / [styled-components](https://styled-components.com/) - This can be used as a different option to Tailwind, giving you more customization options for the components in React
-   [Storybook](https://storybook.js.org/) - 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](https://jestjs.io/) and [Enzyme](https://enzymejs.github.io/enzyme/), [React Testing Library](https://testing-library.com/) and [Cypress](https://www.cypress.io/) - TDD using unit tests for the code and components before they are sent to production and Cypress for end to end testing
-   [Sanity](https://www.sanity.io/) / [Strapi](https://strapi.io/) - Sanity and Strapi are headless CMS, and are used to publish the content with the use of a GUI (optional tools)
-   [Vercel](https://vercel.com/) / [Netlify](https://www.netlify.com/) / [AWS](https://aws.amazon.com/) - The CI/CD provider combined with GitHub, it makes it easy to review and promote changes as they're developed

## Mobile

-   [React Native](https://reactnative.dev) / [Redux](https://redux.js.org/) - React Native for creating cross platform mobile apps and Redux for state management
-   [Flutter/Dart](https://flutter.dev/) - Flutter and Dart for creating cross platform mobile apps