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:
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.
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.
- 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.
Top comments (6)
Indeed tha layout is very close but what happened to the colors ? 🙌
Sorry, what do you mean about the colors? Most of the colors were picked directly from inspecting Twitter's elements in Chrome Dev Tools. If there's color discrepancies or inconsistencies, please let me know!
is it only me seeing it like this? its like somethings broken on my end
Oh wow, thanks for pointing that out. Nobody else has had this problem yet. Would you be able to tell me what OS and browser you're using?
Sure! I am using macOS Monterey 12.5 and Version 115.0.5790.170 (Official Build) (arm64) of Google Chrome. By the way i've checked it on my mobile phone and the colors is broken and from there.
Really neat design and explanation