{"id":28660281,"url":"https://github.com/tasin5541/nextjs-reddit-clone","last_synced_at":"2025-06-13T10:11:50.000Z","repository":{"id":296973408,"uuid":"625271447","full_name":"Tasin5541/NextJs-Reddit-Clone","owner":"Tasin5541","description":"A reddit clone made with NextJs 13, Firebase, Chakra UI, Recoil. Create or join new subreddits, add votes and comments.","archived":false,"fork":false,"pushed_at":"2025-06-03T04:48:43.000Z","size":18510,"stargazers_count":19,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-03T18:10:59.709Z","etag":null,"topics":["chakra-ui","firabase","nextjs","react","reactjs","recoil","reddit"],"latest_commit_sha":null,"homepage":"https://next-js-reddit-clone-tasin5541.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/Tasin5541.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,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-04-08T15:42:00.000Z","updated_at":"2025-06-03T04:48:44.000Z","dependencies_parsed_at":"2025-06-03T18:11:18.441Z","dependency_job_id":"b0f7cede-4d4d-41e4-80ae-ef3e386f4a23","html_url":"https://github.com/Tasin5541/NextJs-Reddit-Clone","commit_stats":null,"previous_names":["tasin5541/nextjs-reddit-clone"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Tasin5541/NextJs-Reddit-Clone","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tasin5541%2FNextJs-Reddit-Clone","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tasin5541%2FNextJs-Reddit-Clone/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tasin5541%2FNextJs-Reddit-Clone/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tasin5541%2FNextJs-Reddit-Clone/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Tasin5541","download_url":"https://codeload.github.com/Tasin5541/NextJs-Reddit-Clone/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tasin5541%2FNextJs-Reddit-Clone/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259624772,"owners_count":22886337,"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":["chakra-ui","firabase","nextjs","react","reactjs","recoil","reddit"],"created_at":"2025-06-13T10:11:06.301Z","updated_at":"2025-06-13T10:11:49.978Z","avatar_url":"https://github.com/Tasin5541.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# NextJs-Reddit-Clone\n\n\u003ca href=\"https://hitscounter.dev/\"\u003e\u003cimg src=\"https://hitscounter.dev/api/hit?url=https%3A%2F%2Fgithub.com%2FTasin5541%2FNextJs-Reddit-Clone\u0026label=visitors\u0026icon=github\u0026color=%23198754\"/\u003e\u003c/a\u003e\n\nA reddit clone made with NextJs 13, Firebase, Chakra UI, Recoil\n\n\u003cp align=\"center\"\u003e \n    \u003cimg src=\"public/images/guides/nextjs-reddit-clone.gif\" align=\"center\"\u003e\u003c/img\u003e\n\u003c/p\u003e\n\n- **[NextJs](https://nextjs.org/)** (13.x)\n- **[React](https://facebook.github.io/react/)** (18.x)\n- **[Firebase](https://firebase.google.com/)** (9.x)\n- **[Chakra UI](https://chakra-ui.com/)** (2.x)\n- **[Recoil](https://recoiljs.org/)** (0.7.x)\n- **[Typescript](https://www.typescriptlang.org/)** (4.x)\n- Production build script\n\n## Live Demo\n\nSee a [live demo](https://next-js-reddit-clone-tasin5541.vercel.app/) on Vercel\n\n## Installation\n\n### Setup Firebase\n\n1. Navigate to `https://console.firebase.google.com/u/0/`\u003cbr\u003e\n   Click `Add Project`\u003cbr\u003e\n   \u003cimg src=\"public/images/guides/fstep1.jpeg\" style=\"width: 800px;\"\u003e\n\n2. Click the `Enter your project name` field.\u003cbr\u003e\n   Type `reddit-clone`\u003cbr\u003e\n   Click `Continue`\u003cbr\u003e\n   Click `Select an account`\u003cbr\u003e\n   Select your account\u003cbr\u003e\n   Click `Create project`\u003cbr\u003e\n   Click `Continue`\u003cbr\u003e\n   \u003cimg src=\"public/images/guides/fstep2.webp\" style=\"width: 800px;\"\u003e\n\n3. Click `web`\u003cbr\u003e\n   \u003cimg src=\"public/images/guides/fstep3.jpeg\" style=\"width: 800px;\"\u003e\n\n4. Click the `App nickname` field.\u003cbr\u003e\n   Type `your-app-name`\u003cbr\u003e\n   Click `Register app`\u003cbr\u003e\n   Copy and store the `firebaseConfig` values\u003cbr\u003e\n   Click `Continue to console`\u003cbr\u003e\n   \u003cimg src=\"public/images/guides/fstep4.webp\" style=\"width: 800px;\"\u003e\n\n5. Click `Authentication`\u003cbr\u003e\n   Click `Get started`\u003cbr\u003e\n   \u003cimg src=\"public/images/guides/fstep5.webp\" style=\"width: 800px;\"\u003e\n\n6. Click `Email/Password`\u003cbr\u003e\n   Click `Save`\u003cbr\u003e\n   Click `Add new provider`\u003cbr\u003e\n   Click `Google`\u003cbr\u003e\n   Click `Save`\u003cbr\u003e\n   \u003cimg src=\"public/images/guides/fstep6.webp\" alt=\"Click Email/Password.\n   Click \u0026quot;Save\u0026quot;\n   Click \u0026quot;Add new provider\u0026quot;\n   Click Google.\n   Click \u0026quot;Save\u0026quot;\" style=\"width: 800px;\"\u003e\n\n7. Expand `Build` menu\u003cbr\u003e\n   Click `Storage`\u003cbr\u003e\n   Click `Get started` \u003cbr\u003e\n   \u003cimg src=\"public/images/guides/fstep7.webp\" style=\"width: 800px;\"\u003e\n\n8. Click `Next`\u003cbr\u003e\n   Click `Done`\u003cbr\u003e\n   \u003cimg src=\"public/images/guides/fstep8.webp\" style=\"width: 800px;\"\u003e\n\n9. Click `Rules` tab\u003cbr\u003e\n   Copy paste the following in `edit rules`\n\n   ```\n   rules_version = '2';\n    service cloud.firestore {\n      match /databases/{database}/documents {\n        match /users/{userId}/{restOfPath=**} {\n          allow read, write: if request.auth != null \u0026\u0026 userId == request.auth.uid;\n        }\n        match /posts/{postId} {\n            allow read;\n          allow write: if request.resource.data.creatorId == request.auth.uid;\n          allow delete: if request.auth.uid == resource.data.creatorId;\n          allow update;\n        }\n        match /comments/{commentId} {\n            allow read;\n          allow write: if request.resource.data.creatorId == request.auth.uid;\n          allow delete: if request.auth.uid == resource.data.creatorId;\n          allow update;\n        }\n        match /communities/{communityId} {\n            allow read;\n          allow write: if request.auth != null;\n        }\n      }\n    }\n   ```\n\n   Click `Publish`\u003cbr\u003e\n   \u003cimg src=\"public/images/guides/fstep9.webp\" style=\"width: 800px;\"\u003e\n\n### Setup Project\n\n1. Clone/download repo\n2. Create a file called .env in the root directory of your project, type the following in cmd/powershell\n   ```\n   cp env.example .env\n   ```\n3. Inside the `.env` file, add the firebase keys from the `firebaseConfig` copied during `step 4` of firebase setup\n4. `yarn install` (or `npm install` for npm) to install the dependencies\n\n## Usage\n\n**Development**\n\n`yarn dev`\n\n- Build app continuously (HMR enabled)\n\n**Production**\n\n`yarn build`\n`yarn start`\n\n- Build app once (HMR disabled) to `/.next/`\n\n---\n\n**All commands**\n\n| Command      | Description                                |\n| ------------ | ------------------------------------------ |\n| `yarn dev`   | Build app continuously (HMR enabled)       |\n| `yarn build` | Build app once (HMR disabled) to `/.next/` |\n| `yarn start` | Run production build                       |\n\n## See also\n\n- Design ideas were taken from [Reddit](https://reddit.com)\n- Some Implementation Ideas for this project are taken from [Shadee Merhi](https://youtu.be/zhx9FUSuAsM)\n- Project was bootstrapped with [create-next-app](https://nextjs.org/docs/api-reference/create-next-app)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftasin5541%2Fnextjs-reddit-clone","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftasin5541%2Fnextjs-reddit-clone","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftasin5541%2Fnextjs-reddit-clone/lists"}