Z - Clone App of X (Twitter)

Stack

• TypeScript
• React
• Tailwind CSS
• No other UI libraries are used

Features

• textarea expanding as the content grows (NewPostInput.tsx)
• Character counter implementation (CharacterCounter.tsx, CircularProgress.tsx)
• Time display format (utils.ts > getTimeDifference())
• Tag functionality (#aaa and #bbb are only considered as tags in #aaa #bbb c#cc # ddd eee#)
• Color Theme switching (useColorThemeContext.tsx)
• Popover functionality (ColorThemeToggler.tsx, useOutsideClick.tsx)
• Rename functionality
• Mobile-only design
• Server-side code is a demo implementation

What I Learned

• How to organize the code for Context APIs
• How to implement color theme switching functionality
• How to create UI parts without using UI libraries
  • Character counter
  • Popover

Screen Captures

Character counter and expanding textarea

charactor-counter-and-expanding-textare.mov

Color Theme switching

color-theme-switching.mov

Getting Started

This project is a monorepo, so you need to install the dependencies for both the frontend and backend. Run the following commands in the root directory.

Install dependencies

npm ci

Run frontend and backend together

npm run dev

Run frontend and backend separately

npm run frontend

npm run server