What I learned from building a high fidelity Twitter UI clone

To deepen my frontend skills, I decided to build a high-fidelity Twitter clone. I was bored of the very basic CRUD app tutorials on Youtube that barely mimicked Twitter’s UI. Replicating Twitter’s UI was very challenging for a relatively new developer like me and I learned a lot, especially how to dissect UIs in Chrome Dev Tools.

Tech Stack: NextJS, TypeScript, Tailwind, Zustand.

Brief introduction about me: I became a full stack engineer last year and have been enjoying working at Wells Fargo helping to build their new security that enables more sophisticated logins for customers. I love building interfaces and systems and reading about thoughtful design.

Please check out my Twitter clone - I explain my thoughts about the tech stack I used and challenges I had in replicating Twitter’s UI behavior. Here are a few key points I learned:

1. This project took me about 3 weeks. I initially projected a week but soon learned just how complex each component is. One thing that surprised me initially was that almost every element in Twitter is a div and all the divs are flex containers with accessibility added via ARIA labels. Then I quickly learned that the inconsistent CSS properties of semantic tags are extremely frustrating.
   

2. NextJS's default optimizations and server-side rendering gave me great Google Lighthouse scores right out of the box. I tried to make interactive parts of the app as small as possible and sectioned them off as client components at edges of the component tree to improve FCP. When I build a full stack app, I'll implement data fetching with React Server Components and Suspense.

1. I got really good at finding where height and width of an element comes from. In Chrome Dev Tools, I would analyze from the leaf all the way to the parent to check for padding, margins, borders, and hard-coded width and height. Twitter has lot of redundant divs that do apply one or two styles at a time. I assume this is due to the complexity of working in a extremely big team.

I feel extremely confident about my ability to create high-quality production-grade UIs now. Follow me here on LinkedIn or on DEV as I continue along my journey towards building robust web applications! My goals are to build more high-fidelity clone projects with other frameworks, such as Remix, SvelteKit, SolidStart, and WASM.