{"id":14984157,"url":"https://github.com/royquilor/twitter-ui-practise","last_synced_at":"2025-04-09T20:12:24.536Z","repository":{"id":65418476,"uuid":"588562091","full_name":"royquilor/twitter-ui-practise","owner":"royquilor","description":"Twitter UI is a beast to style. Practise with Next JS, Tailwind CSS, Radix UI and Storybook.","archived":false,"fork":false,"pushed_at":"2023-01-24T11:29:58.000Z","size":811,"stargazers_count":260,"open_issues_count":0,"forks_count":53,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-09T20:12:19.017Z","etag":null,"topics":["nextjs","prettier","radix-ui","storybook","tailwindcss","typescript","vercel"],"latest_commit_sha":null,"homepage":"https://twitter-ui-practise.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/royquilor.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2023-01-13T12:29:53.000Z","updated_at":"2025-04-03T05:23:58.000Z","dependencies_parsed_at":"2023-02-12T16:45:59.515Z","dependency_job_id":null,"html_url":"https://github.com/royquilor/twitter-ui-practise","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/royquilor%2Ftwitter-ui-practise","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/royquilor%2Ftwitter-ui-practise/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/royquilor%2Ftwitter-ui-practise/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/royquilor%2Ftwitter-ui-practise/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/royquilor","download_url":"https://codeload.github.com/royquilor/twitter-ui-practise/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248103872,"owners_count":21048245,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["nextjs","prettier","radix-ui","storybook","tailwindcss","typescript","vercel"],"created_at":"2024-09-24T14:08:34.049Z","updated_at":"2025-04-09T20:12:24.508Z","avatar_url":"https://github.com/royquilor.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Twitter UI practice clone\n\nThe 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.\n\nhttps://user-images.githubusercontent.com/2366186/213792809-21e54048-91da-4ed0-881e-23544c036891.mp4\n\n## Getting Started\n\nWhen you git clone the repository\n```bash\nnpm install\nnpm run dev\n```\n\nCheckout storybook to view components in isolation\n```bash\nnpm run storybook\n```\n\n## Issues\nThe 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.\n\n## Stack\n- [Next.js](https://nextjs.org/)\n- [Tailwind CSS](https://tailwindcss.com/)\n- [Radix](https://www.radix-ui.com/)\n- [Storybook](https://storybook.js.org/)\n- [Vercel](https://vercel.com/)\n\n## Resources\n\nPeople I followed and checked out their repositories and videos to build the clone.\n\n- [Tru Narla](https://github.com/tnarla)\n- [Colby Fayock](https://github.com/colbyfayock)\n- [Steven Tey](https://github.com/steven-tey)\n- [Lee Rob](https://github.com/leerob)\n- [Florentin](https://github.com/ecklf)\n\n## What is that?\nIf you checkout the package.json, let me try and explain a few\n- class-variance-authority: enables you to create variants for things like buttons. If you are a designer, it is like Figma's component variants.\n- 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.\n\n## Text component\n\n[Text component youtube video](https://www.youtube.com/watch?v=b1NEj8HG1yU) - currently testing\n\n## Storybook\n\n[Storybook addon next](https://storybook.js.org/addons/storybook-addon-next)\n\n### Misc\n- [Reusable button component](https://omkarkulkarni.vercel.app/snippets/reusable-button-component)\n- [Absolute imports](https://omkarkulkarni.vercel.app/snippets/absolute-imports)\n\n## Author\n\n[Roy Quilor](https://github.com/royquilor)\n\n## Connect\n\n- [🐦 Follow me on Twitter](https://twitter.com/RoyQuilor)\n- [📺 Subscribe on YouTube](https://www.youtube.com/c/readydesignerone)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Froyquilor%2Ftwitter-ui-practise","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Froyquilor%2Ftwitter-ui-practise","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Froyquilor%2Ftwitter-ui-practise/lists"}