Tech stack for a production level react web app 2023
4 min readJan 3, 2023
One should always use a tried and tested tech/packages/libraries to initialize a project.
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 —
- 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
I will not go into dockers, Lambda functions, Google Cloud and other stuff as even I am not that experienced in it.
Do give this a clap if you find this helpful. And please share comment incase I am sharing wrong info, missed something out or anything else…….
Regards
Ahren Pradhan
THE LAZY DEVELOPER
