The frontend tools we work with, and the job each one does
The frontend is what people see and click. Six tools cover it in our work, and most projects need only some of them.
Reviewed by: Rahul Jaiswar, founder
Where we use it
Next.js, React and TypeScript: Microsive ATS, and client websites and web apps. Tailwind CSS: websites and web apps. Motion: website animation. Three.js with React Three Fiber: interactive 3D in website prototypes.
Which of these tools will your project need?
Usually four of the six. Next.js, React, TypeScript and Tailwind CSS cover most websites and web apps between them. Motion is worth adding when something on the screen needs to move in response to the user, and Three.js only when there is a reason to show something in 3D. A project that needs neither is not missing anything.
One line per tool
- Next.js: the framework. Routing, server rendering and data loading.
- React: the interface, built from components.
- TypeScript: types on the code, so mistakes surface while it is written.
- Tailwind CSS: styling from a shared set of colours and spacing.
- Motion, formerly Framer Motion: animation that responds to the user.
- Three.js: 3D scenes in the browser.
From server to screen
In a typical build, Next.js renders each page and sends it to the browser. The page is made of React components, TypeScript checks the data passed between them, and Tailwind classes style each one. Animation and 3D should load after the content, so the content arrives first.
Which projects need which
A company website usually needs the first four and a little animation. An internal tool behind a login can skip animation and 3D, because people using it daily want speed. A product showcase may add Three.js.
Beyond the screens
Saved records, background jobs and integrations belong to the backend. To commission a build, start from websites or web apps. All tools are listed on the tech stack page.