Tech stack for a production level react web app 2023

Photo by Moritz Knöringer on Unsplash

This is a react / node based article so if otherwise, this article may not be the one, but feel free to help yourself here if you catch something interesting….

What I use —

Photo by Barn Images on Unsplash
  • React Js
    It’s the norm for me. I start with Vite-React templates. We also have NextJs (helps with SEO), Remix and many many more. Another one is React-App-Rewired with CRA
    And I don’t prefer using CRA (create-react-app) as it is.
  • Javascript
    Typescript is overkill and thats what I will stick too. If one knows the react way and appreciate JEST and ESLINT, nothing will ever cause a problem.
  • Tailwind CSS or other similar alternatives
    Don’t end up writing all the css.
  • Jest
    Writing tests is a good practice for long term project
  • Cypress (not necessary)
    It a good tool to automate testing the UX.
  • Linting — ESLINT
    Always use eslint. Prettier or editorconfig files should always be there to keep linting consistency
  • Husky
    Automating the testing and linting before every commit is good enough
  • State Management — ContextAPI
    ContextAPIs are good enough for global statement management, and redux is overkill until and unless you have a genuine reason to justify it. And if you can then you are experienced enough to not read this blog.
  • Sass or Less
    preprocessors are good but one may need it if the project is big as bootstrap css may not be enough
  • Axios
    After using many libraries, this is the only library I will use for API calls if I had to start a project
  • Lodash
    It has a lot of usable functionalities which will help keep your actual source code short and precise by abstracting most of the logic which one has implement in all possible projects as helper functions
  • React Query
    Its an awesome library and if one is using it with context APIs, I can’t see a use for libraries like redux, it’s alernatives, until justified.
  • UI Library (not necessary)
    Libraries like MUI, AntD, etc… are awesome but I dont think we need them unless required. If I know I may end up creating a custom UI library in the future, thenI will definitely add it to my package.json from day one.
    “I use Antd (with Less as preprocessor)”
  • ChartJs + React-ChartJs-2
    Generating graphs
  • React-beautiful-dnd
    Drag and drop
  • Formik and React-forms (it’s good)
    For implementing forms. Some UI Libaries also have their own form components which may or may not use the same from behind.
  • Apollo for GraphQL
    I have never used anything other than this for Graphql and its good.
  • ThreeJs
    For 3d rendering. Server side rendering can cause issues with this but can be avoided using dynamic imports and client side rendering.
  • Netlify, Vercel or Hureko
    for deployment
  • AWS and digital ocean
    for virtual server. Azure is a tough nut to crack.
    If you have an old unused system like a PC, laptop or even a rasberrypie board lying somewhere in the house + a stable unlimited internet connection, there are great article on how to use your own system as virtual server.
  • Github Actions
    This is a good entry into CI/CD as a beginner if you want to use your own virtual server.
  • Firebase
    Its a good tool in itself and will definitely abstract a lot of backend code for you.
  • Mongo Atlas
    free online mongoDb clusters
  • Prisma
    Another great tool as an all in one solution for ORM. Sequelize is another recommendation if prisma is not the right one for you.
  • Nginx
    It’s a service you may have to understand a bit when learning with virtual servers
  • PM2
    for process management, try it once and you will get the gist of it
Photo by Elvis Amaya on Unsplash

--

--

Web and App Developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store