Introduction

I am working on side project now and i need to finish the frontend fast although we are only 2 devs and deadline is 3 months

So we need to setup a plan that manage those little resources and time efficiently to match the deadline

And i like to share my thoughts in this blog so we can discuss the process

Henry Ford Way: Unlocking Business Efficiency

The first thing came to my mind was his revolutionary approach which transformed the manufacturing industry and left a lasting legacy.

His approach can be told in 2 points

1. Breakdown complex tasks into simple, repeatable steps
2. Make the workers specialized in specific tasks, which allowing individuals to become experts in their assigned tasks,

By this 2 simple things , Ford managed to increase the time per unit from 12.5 hour to just 1.5 hour which 8x faster

Let’s discuss how we apply this in our development process

Breakdown Frontend

Frontend is a really long process, you need to take care of too many things

1. Browser Compaitability
2. Accessibility
3. Performance & loading time
4. Responsive for many screens
5. Direction for multi language
6. Testing those things

Doing this without a plan is a nightmare

Tools

• Tailwind this will handle browser Compaitability for us, also it provide easy way for responsive
• Vite.js boost the project setup also it will build a minify and clean unused css
• Alpine.js give a huge js power with a very small library

Steps

• Design UI: you need a finished design at the beginning this will give you an eagle eye for the system (use Figma or whatever)
• Component:
  • break down the design into components
  • classify them into (easy, mid, hard) before start working on them
  • the estimate for 50-60 unit is a month
  • this step just create the functionality without caring about responsive or direction ( just UI with logic )
• RTL Component:
  • in this step you will master the process and fastly you will recognize which properties need to flip
  • the estimate for 50-60 unit is a week
• Responsive Component
  • the same you will master the process and it will end fastly
  • the estimate for 50-60 unit is 1-2 weeks

Time for now is 6 weeks and we have the full components with logic and they are responsive on its own and support 2 languages

• Layout:
  • create pages layout and use the components
• Layout Direction
  • just make sure pages layout is flip too
• Layout Responsive
  • make sure its responsive on all devices

All 3 may take 2 weeks which add in total 8 weeks Now we have the fully functional UI with dummy data

• Backend Integration
  • backend should know about every endpoint needed for every page
  • only you need to read and replace dummy data with real ones from endpoint
  • estimate is 2 weeks
• Testing
  • this will be end to end testing and make sure everything is working nicely together
  • no estimate, because issues and debugging are unpredictable. But for now you already have a finished frontend