The goal of this project is to learn about Next JS. My background is a Web Designer with experience in HTML and Tailwind CSS with some basic JavaScript knowledge. I ended up trying to recreate the homepage UI of the Twitter app. It's far from the original and I'm sure there are many flaws. Any suggestions or improvements, please let me know. The main thing is to have fun and learn something new, hopefully you can too.
twitter-demo.mp4.mp4
When you git clone the repository
npm install
npm run devCheckout storybook to view components in isolation
npm run storybookThe right side panel does not follow the same behavior as Twitter. As you scroll, it sticks but you should be able to see the footer links.
People I followed and checked out their repositories and videos to build the clone.
If you checkout the package.json, let me try and explain a few
- class-variance-authority: enables you to create variants for things like buttons. If you are a designer, it is like Figma's component variants.
- classnames: If you style a component such as Radix UI components, you can have a long line of css utility classes when you use Tailwind CSS. You might have hover, animation, responsive, layout and other classes. Now you can group them on separate lines.
Text component youtube video - currently testing