π Just Finished Building a WhatsApp UI Clone (Chats section) β Built with React & Dynamic Mock APIs!
Over the past few weeks, Iβve been working on a detailed frontend clone of WhatsApp Web β built entirely using React, Tailwind, and mocked API services. My goal was to recreate the real chat experience without storing any static UI data. Every message, contact, and interaction is dynamically fetched β making the app easily integratable with backends like Firebase, Supabase, or a custom Node API.
Here are some highlights Iβm proud of:
β
Dynamic routing and rendering of chat messages based on selected contact
β
Simulated βtypingβ indicator & new message injection for live UI testing
β
Reaction support with bounce + stagger animations (LTR or RTL depending on sender)
β
Modular state management using React Contexts (Chats, Contacts, Tabs, Profiles, etc.)
β
Fully responsive layout modeled after WhatsApp Web
β
Future-ready: Planning to implement IntersectionObserver to enable lazy loading older messages when scrolling to the top
π§ Built for scalability β the frontend is backend-agnostic and ready for real-time integrations
Would love your feedback or suggestions! π
You can view the project source code here: https://github.com/SoorajSNBlaze333/whatsapp-react-clone
Live App: https://chat-react-clone.vercel.app
Top comments (6)
manojbarman.in/works/ngchatsapp
This is one I built using Angular 4. Firebase and material UI back in 2018. It also had a chatbot powered by DialogFlow..
To prevent spamming login or sign up is disabled.
This looks great!
Love how you focused on dynamic data and those little UI touches like the typing indicator and reactions. Are you planning to add real-time sync next, or work more on performance features like message virtualization?
My next step would be to add a backend service like Nodejs / Supabase or create a http rest api handler using Rust (im still learning this). And then yes add real time sync.
Great work. The UI looks great
Nice job bro