{"id":21245748,"url":"https://github.com/simpleneeraj/twitter-app","last_synced_at":"2026-05-11T06:51:26.823Z","repository":{"id":211455610,"uuid":"611613405","full_name":"simpleneeraj/twitter-app","owner":"simpleneeraj","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-04-15T15:19:38.000Z","size":1944,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-21T20:23:08.699Z","etag":null,"topics":["firebase","firestore","nextjs","radix-ui"],"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/simpleneeraj.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-03-09T07:23:10.000Z","updated_at":"2024-10-21T18:14:43.000Z","dependencies_parsed_at":"2023-12-08T17:24:08.335Z","dependency_job_id":"ce568c18-7d7e-45ad-a8ac-a667f0e34926","html_url":"https://github.com/simpleneeraj/twitter-app","commit_stats":null,"previous_names":["ionicneoma/twitter-app","simpleneeraj/twitter-app"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simpleneeraj%2Ftwitter-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simpleneeraj%2Ftwitter-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simpleneeraj%2Ftwitter-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simpleneeraj%2Ftwitter-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/simpleneeraj","download_url":"https://codeload.github.com/simpleneeraj/twitter-app/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243685527,"owners_count":20330980,"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":["firebase","firestore","nextjs","radix-ui"],"created_at":"2024-11-21T01:59:24.511Z","updated_at":"2026-05-11T06:51:26.797Z","avatar_url":"https://github.com/simpleneeraj.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cbr /\u003e\n\n![](/.github/assets/presentation.png)\n\n\u003cp align=\"center\"\u003e\n  Twitter clone built in Next.js + TypeScript + Tailwind CSS using Cloud Firestore and Storage\n\u003c/p\u003e\n\n## Preview 🎬\n\nhttps://user-images.githubusercontent.com/55032197/201472767-9db0177a-79b5-4913-8666-1744102b0ad7.mp4\n\n## Features ✨\n\n- Authentication with Firebase Authentication\n- Strongly typed React components with TypeScript\n- Users can add tweets, like, retweet, and reply\n- Users can delete tweets, add a tweet to bookmarks, and pin their tweet\n- Users can add images and GIFs to tweet\n- Users can follow and unfollow other users\n- Users can see their and other followers and the following list\n- Users can see all users and the trending list\n- Realtime update likes, retweets, and user profile\n- Realtime trending data from Twitter API\n- User can edit their profile\n- Responsive design for mobile, tablet, and desktop\n- Users can customize the site color scheme and color background\n- All images uploads are stored on Firebase Cloud Storage\n\n## Tech 🛠\n\n- [Next.js](https://nextjs.org)\n- [TypeScript](https://www.typescriptlang.org)\n- [Tailwind CSS](https://tailwindcss.com)\n- [Firebase](https://firebase.google.com)\n- [SWR](https://swr.vercel.app)\n- [Headless UI](https://headlessui.com)\n- [React Hot Toast](https://react-hot-toast.com)\n- [Framer Motion](https://framer.com)\n\n## Development 💻\n\nHere are the steps to run the project locally.\n\n1. Clone the repository\n\n   ```bash\n   git clone https://github.com/ccrsxx/twitter-clone.git\n   ```\n\n1. Install dependencies\n\n   ```bash\n   npm i\n   ```\n\n1. Create a Firebase project and select the web app\n\n1. Add your Firebase config to `.env.development`. Note that `NEXT_PUBLIC_MEASUREMENT_ID` is optional\n\n1. Make sure you have enabled the following Firebase services:\n\n   - Authentication. Enable the Google sign-in method.\n   - Cloud Firestore. Create a database and set its location to your nearest region.\n   - Cloud Storage. Create a storage bucket.\n\n1. Install Firebase CLI globally\n\n   ```bash\n   npm i -g firebase-tools\n   ```\n\n1. Log in to Firebase\n\n   ```bash\n   firebase login\n   ```\n\n1. Get your project ID\n\n   ```bash\n   firebase projects:list\n   ```\n\n1. Select your project ID\n\n   ```bash\n   firebase use your-project-id\n   ```\n\n1. Deploy Firestore rules, Firestore indexes, and Cloud Storage rules\n\n   ```bash\n   firebase deploy --except functions\n   ```\n\n1. Run the project\n\n   ```bash\n   npm run dev\n   ```\n\n\u003e **_Note_**: When you deploy Firestore indexes rules, it might take a few minutes to complete. So before the indexes are enabled, you will get an error when you fetch the data from Firestore.\u003cbr\u003e\u003cbr\u003eYou can check the status of your Firestore indexes with the link below, replace `your-project-id` with your project ID: https://console.firebase.google.com/u/0/project/your-project-id/firestore/indexes\n\nOptional:\n\n- If you want to get trending data from Twitter API, you need to create a Twitter developer account and get your API keys. Then add your API keys to `.env.development`. I hope Elon Musk doesn't make this API paid 😅.\n- If you want to make the user stats synced with the deleted tweets, you need to enable the Cloud Functions for Firebase. Then deploy the Cloud Functions.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimpleneeraj%2Ftwitter-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsimpleneeraj%2Ftwitter-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimpleneeraj%2Ftwitter-app/lists"}