A pixel-perfect, responsive frontend replica of the X (formerly Twitter) web application. This project focuses on mastering Tailwind CSS layouts, Flexbox architecture, and creating an app-like scrolling experience within the browser.
This is a static frontend project designed to replicate the core user interface of X. The primary goal was to solve complex layout challenges, such as:
- Creating a "fixed viewport" height where only specific columns scroll (similar to a native mobile app).
- Handling independent scrollbars for the Feed and Widget sections.
- Implementing a fully responsive design that transitions from a 3-column desktop layout to a streamlined mobile interface.
Note: This is currently a frontend-only build. Buttons, forms, and login features are visual only and do not connect to a backend database yet.
- HTML5: Semantic markup structure.
- Tailwind CSS (v4): Used for all styling, responsiveness, and layout management.
- Google Material Symbols: Used for the icons (Home, Explore, Notifications, etc.).
- Vite: Used as the frontend build tool and development server.
Unlike standard websites that scroll the entire <body>, this project uses a h-screen overflow-hidden architecture.
- Desktop: 3 Columns (Sidebar, Feed, Widgets). The Sidebar is fixed, while the Feed and Widgets scroll independently.
- Mobile: Sidebar shrinks to icons-only. The Widget column disappears. The Feed takes 100% of the remaining space. BUt the main content is fully vieweble by scrolling to the right side.
- Sticky Elements: The Search bar in the right column sticks to the top while widgets scroll underneath it.
- Hidden Scrollbars: Custom CSS utilities used to hide the default browser scrollbars while keeping the scrolling functionality intact.
- Flexbox Mastery: Used
flex-1andmin-w-0logic to prevent long text content from breaking the horizontal layout on mobile devices. - Responsive Images: Profile pictures (
shrink-0) utilize flex properties to maintain their aspect ratio regardless of screen size.
- Dark Mode theme (bg-black).
- Hover effects on sidebar items and post interactions.
- Accurate spacing, borders, and font hierarchy matching the real X platform.
To run this project locally, you need Node.js installed.
-
Clone the repository:
git clone https://github.com/HarmanSingh79/x_UI_clone.git
-
Navigate to the project folder:
cd twitter-clone -
Install dependencies:
npm install
-
Run the development server:
npm run dev
-
Open the local URL (usually
http://localhost:5173) in your browser.
- Horizontal Scrolling Issue: One of the biggest challenges was preventing the page from scrolling horizontally on mobile, that is partially solved. User can make changes and implement accordingly.
-
- Height Management: Learning to propagate
h-fulldown the DOM tree to ensureoverflow-y-autoworks correctly for independent column scrolling.
- Height Management: Learning to propagate
- Adding JavaScript for basic interactivity (liking posts, character count in the input box).
- Implementing a Dark/Light mode toggle.
- Connecting to a backend (Firebase or Supabase) to fetch real posts.
Harman
- GitHub: @HarmanSingh79
This project is for educational purposes only and is not affiliated with X Corp.