How I Completed a Month-Long React Project in a Week
Recently I took up the development of a new project for a bank. The client wanted the application to be responsive on all platforms like mobile, desktop, and tablets. I received the Figma and validations for the input fields
- There were about 10 screens in total
- A login screen with subtle animations
- A select currency screen with a feature to apply promo codes, multiple validations, edit modals, etc.
- Enter details screen, which has 10 fields and validations for every field.
- Preconfirmation screen and TNC modals.
- Around 10+ API calls, avoided some API calls by having the dropdown values for city and state in the constants file.
- Grid card authentication and OTP authentication screens
- Finally a success screen
Well, all in all, the story had 24 Days of development effort required including designing UI screens, Functionality implementation, API integration, Unit Testing, etc
I will reveal the tools that I used to get the stuff done faster than you might already know
First of all, Let go of all your stigma about CSS. Hear me out it will save you tons of time.
I chose Tailwind to get started on development, as I had already used SASS and module.css , even styled-components in production-level projects. They were user-friendly and made code modular, but at the expense of more time needed to write more boilerplate code to achieve simple styling, sometimes simple flex and flex-col needed a new class to be created which is time-consuming when you are really just concerned with just making it look right
- Tailwind CSS was the perfect solution that I thought of giving a real shot, The project I was working on was already using Bootstrap, so I had to integrate Tailwind in such a way that doesn’t disturb or override the Bootstrap configuration.
A perfect way I found out was using the runtime JIT compiler provided over the cdn by tailwind, this was until I found one more good library called twind.style , this library primarily focuses on creating the most fastest and tiny JIT compiler for tailwind. and this one doesn’t need the build-step integration. Read more about it http://twind.style
I also highly recommend you to go through this writeup on the tailwind responsive design guide here — https://tailwindcss.com/docs/responsive-design
Keep a tailwind cheatsheet handy at all times.
2. React Hot Toast, This is a really cool lib that out of the box supports success and failure toasts along with custom toasts and has tailwind support too, really handy to show quick toasts for API success/failure notifications. Read more about it https://react-hot-toast.com/
3 . Zustand for global state management. Zustand is a breeze to work with and I couldn’t thank the developers of this library enough, it lets you quickly set up a globally accessible hook that provides you access to all the states and setters defined in your Zustand store. Go through the guide here — https://zustand-demo.pmnd.rs/
4. Figma to code plugin — by Builder.io, I have to say this is one of the insanely powerful AI tools I have come across that provides a much cleaner react code in tailwind or raw CSS. Unfortunately, I didn’t use this tool as it was unavailable at the time of development. https://www.builder.io/blog/figma-to-code-visual-copilot
5. Next UI — A component library that takes all your burden away, It has really well-crafted UI components that can be customized with tailwind also and has some really cool animations baked into them. When you are running short of time. I have tried Shadcn and RadixUI components as well, they are good at times. But I really don't like the nested component parts/structure that radix / shadcn brings in. Next UI was perfect for my case. Check it out — https://nextui.org/
6. Codeium vscode extension — to put it simply, it's GitHub copilot, but free! Never thought something this powerful was possible until the Chat GPT era. Really does what it claims, Immediately boosts 66% of your productivity.
Clap if you liked the post, and More power to you my friend! Code great things now! Off you go. 🐦
