WIP: WhatsApp Web Frontend

Objectives

This project acts as a refresh for re-learning frontend web development with best practices and modern tooling. With the fast-paced front-end development area, the tools that we used last year might be replaced with better tools in the next years.

I plan to build a WhatsApp Web Frontend focusing on the app architecture, UI, state management, and testing. Most of the work here is the real world scenario when you are building a frontend web app.

Tech stacks

• Vite for the build tool
• Vitest for testing framework
• React for the frontend UI library
• Jotai for react state management
• TailwindCSS for the CSS framework
• Shadcn UI for Base UI
• Mock Service Worker for the mock API server
• Storybook for component library

Development

Requirements

• nodejs >= v20

Install dependencies

npm install

Run the app

npm run dev

Run the storybook

npm run storybook