{"id":14961184,"url":"https://github.com/sashenjayathilaka/reddit-clone","last_synced_at":"2025-09-10T17:32:01.223Z","repository":{"id":65687912,"uuid":"530243492","full_name":"SashenJayathilaka/Reddit-Clone","owner":"SashenJayathilaka","description":"Reddit Clone with REACTJS (Next.js, Firebase v9, Chakra UI, TypeScript, Recoil, (Image Uploading, Google Authentication, Create Community, Join Community, Leave Community, Upvote and Downvote Posts), Dark Mode \u0026 Light Mode, Data Encryption and Decryption)","archived":false,"fork":false,"pushed_at":"2023-03-31T13:55:21.000Z","size":27793,"stargazers_count":142,"open_issues_count":5,"forks_count":53,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-01-01T20:11:47.943Z","etag":null,"topics":["chakra-ui","chakra-ui-icons","emotion-react","firebase","firebase-auth","firebase-database","firebase-functions","firestore","fontsource","framer-motion","learn","moment","nextjs","react","react-dom","react-firebase-hooks","react-icons","recoil","typescript","vercel-deployment"],"latest_commit_sha":null,"homepage":"https://reddit-sclone.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SashenJayathilaka.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-08-29T13:56:45.000Z","updated_at":"2024-12-18T02:54:53.000Z","dependencies_parsed_at":"2023-02-18T16:32:37.739Z","dependency_job_id":null,"html_url":"https://github.com/SashenJayathilaka/Reddit-Clone","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/SashenJayathilaka%2FReddit-Clone","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SashenJayathilaka%2FReddit-Clone/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SashenJayathilaka%2FReddit-Clone/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SashenJayathilaka%2FReddit-Clone/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SashenJayathilaka","download_url":"https://codeload.github.com/SashenJayathilaka/Reddit-Clone/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":232548596,"owners_count":18540145,"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","chakra-ui-icons","emotion-react","firebase","firebase-auth","firebase-database","firebase-functions","firestore","fontsource","framer-motion","learn","moment","nextjs","react","react-dom","react-firebase-hooks","react-icons","recoil","typescript","vercel-deployment"],"created_at":"2024-09-24T13:24:06.560Z","updated_at":"2025-01-05T04:42:51.139Z","avatar_url":"https://github.com/SashenJayathilaka.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n  \u003cimg src=\"https://user-images.githubusercontent.com/99184393/196572825-73d2a0dc-f96e-45af-884b-77ed7cf20184.png\" alt=\"logo\" width=\"200\" height=\"auto\" /\u003e\n  \n  \u003ch1\u003eReddit Clone with REACT.JS\u003c/h1\u003e\n  \n  \u003cp\u003e\nReddit Clone with REACTJS (Next.js, Firebase v9, Chakra UI, TypeScript, Recoil, (Image Uploading, Google Authentication, Create Community, Join Community, Leave Community, Upvote and Downvote Posts), Dark Mode \u0026 Light Mode, Data Encryption and Decryption)\n  \u003c/p\u003e\n  \n  \n\u003c!-- Badges --\u003e\n\n\u003ca href=\"https://reddit-sclone.vercel.app\" target=\"_blank\"\u003e![](https://img.shields.io/website-up-down-green-red/http/monip.org.svg)\u003c/a\u003e\n![](https://img.shields.io/badge/Maintained-Yes-indigo)\n![](https://img.shields.io/github/forks/SashenJayathilaka/Reddit-Clone.svg)\n![](https://img.shields.io/github/stars/SashenJayathilaka/Reddit-Clone.svg)\n![](https://img.shields.io/github/issues/SashenJayathilaka/Reddit-Clone)\n![](https://img.shields.io/github/last-commit/SashenJayathilaka/Reddit-Clone)\n\n\u003ch4\u003e\n    \u003ca href=\"https://reddit-sclone.vercel.app\"\u003eView Demo\u003c/a\u003e\n  \u003cspan\u003e · \u003c/span\u003e\n    \u003ca href=\"https://github.com/SashenJayathilaka/Reddit-Clone/blob/master/README.md\"\u003eDocumentation\u003c/a\u003e\n  \u003cspan\u003e · \u003c/span\u003e\n    \u003ca href=\"https://github.com/SashenJayathilaka/Reddit-Clone/issues\"\u003eReport Bug\u003c/a\u003e\n  \u003cspan\u003e · \u003c/span\u003e\n    \u003ca href=\"https://github.com/SashenJayathilaka/Reddit-Clone/issues\"\u003eRequest Feature\u003c/a\u003e\n  \u003c/h4\u003e\n\u003c/div\u003e\n\n\u003cbr /\u003e\n\n\u003c!-- Table of Contents --\u003e\n\n## :notebook_with_decorative_cover: Table of Contents\n\n- [About the Project](#star2-about-the-project)\n  - [Screenshots](#camera-screenshots)\n  - [Tech Stack](#space_invader-tech-stack)\n  - [Environment Variables](#key-environment-variables)\n- [Getting Started](#toolbox-getting-started)\n  - [Prerequisites](#bangbang-prerequisites)\n  - [Installation](#gear-installation)\n  - [Run Locally](#running-run-locally)\n  - [Deployment](#triangular_flag_on_post-deployment)\n- [Contact](#handshake-contact)\n\n\u003c!-- About the Project --\u003e\n\n## :star2: About the Project\n\n\u003c!-- Screenshots --\u003e\n\n### :camera: Screenshots\n\n- Create Community, Join Community, Leave Community, Upvote and Downvote Posts\n\n\u003cdiv align=\"center\"\u003e\n\u003ca href=\"https://reddit-sclone.vercel.app\"\u003e\u003cimg width='800rem' src='./demo/ezgif-5-bba0183ff4.gif' alt='image'/\u003e\u003c/a\u003e\n\u003c/div\u003e\n\n\u003cbr /\u003e\n\n- Dark Mode \u0026 Light Mode\n\n\u003cdiv align=\"center\"\u003e\n\u003ca href=\"https://reddit-sclone.vercel.app\"\u003e\u003cimg width='800rem' src='./demo/ezgif-5-d29f199523.gif' alt='image'/\u003e\u003c/a\u003e\n\u003c/div\u003e\n\n\u003cbr /\u003e\n  \n- User Profile Section\n  \n\u003cdiv align=\"center\"\u003e\n\u003ca href=\"https://reddit-sclone.vercel.app\"\u003e\u003cimg width='800rem' src='./demo/ezgif-4-c9902f3c2a.gif' alt='image'/\u003e\u003c/a\u003e\n\u003c/div\u003e\n\n\u003cbr /\u003e\n  \n- Conversation Section (Reddit Clone Live Chat)\n  \n\u003cdiv align=\"center\"\u003e\n\u003ca href=\"https://reddit-sclone.vercel.app\"\u003e\u003cimg width='800rem' src='./demo/ezgif-1-30bf5499cc.gif' alt='image'/\u003e\u003c/a\u003e\n\u003c/div\u003e\n\n## \u003ca href=\"https://reddit-sclone.vercel.app\" target=\"_blank\"\u003eLIVE DEMO 💥\u003c/a\u003e\n\n#### 🔴 Open the camera app on your device and scan the code below (live demo)\n\n\u003ca href=\"https://reddit-sclone.vercel.app\"\u003e\u003cimg src=\"./demo/qr/qr-code.png\" alt=\"qr\" width=\"150\" height=\"150\" /\u003e\u003c/a\u003e\n\u003ca href=\"#instagram\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/99184393/182557606-b36f2540-1260-42bf-b547-ed5832e3615e.png\" alt=\"qr\" width=\"150\" height=\"150\" /\u003e\u003c/a\u003e\n\n![forthebadge](https://forthebadge.com/images/badges/built-with-love.svg)\n![forthebadge](https://forthebadge.com/images/badges/for-you.svg)\n![forthebadge](https://forthebadge.com/images/badges/powered-by-coffee.svg)\n\n### :space_invader: Tech Stack\n\n\u003cdetails\u003e\n  \u003csummary\u003eClient\u003c/summary\u003e\n  \u003cul\u003e\n    \u003cli\u003e\u003ca href=\"https://#/\"\u003eTypescript\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"https://nextjs.org/\"\u003eNext.js\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"https://reactjs.org/\"\u003eReact.js\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"https://chakra-ui.com/\"\u003eChakra UI\u003c/a\u003e\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eDatabase\u003c/summary\u003e\n  \u003cul\u003e\n    \u003cli\u003e\u003ca href=\"https://firebase.google.com\"\u003eFirebase\u003c/a\u003e\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eFunctions\u003c/summary\u003e\n  \u003cul\u003e\n    \u003cli\u003e\u003ca href=\"https://firebase.google.com/docs/functions\"\u003eCloud Functions for Firebase\u003c/a\u003e\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/details\u003e\n\n\u003cbr /\u003e\n\n\u003ctable\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\n\u003ca href=\"#\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/devicons/devicon/master/icons/react/react-original.svg\" alt=\"\" width=\"30\" height=\"30\" /\u003e\u003c/a\u003e\n        \u003c/td\u003e\n                        \u003ctd\u003e\n\u003ca href=\"#\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/99184393/183096870-fdf58e59-d78c-44f4-bd1c-f9033c16d907.png\" alt=\"Google\" width=\"30\" height=\"30\" /\u003e\u003c/a\u003e\n        \u003c/td\u003e\n                        \u003ctd\u003e\n\u003ca href=\"#\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/99184393/180462270-ea4a249c-627c-4479-9431-5c3fd25454c4.png\" alt=\"\" width=\"30\" height=\"30\" /\u003e\u003c/a\u003e\n        \u003c/td\u003e\n                                \u003ctd\u003e\n\u003ca href=\"#\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/99184393/187247836-8df8fb4e-074c-4f3a-a150-555108f4c2c7.png\" alt=\"\" width=\"30\" height=\"30\" /\u003e\u003c/a\u003e\n        \u003c/td\u003e\n                                \u003ctd\u003e\n\u003ca href=\"#\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/99184393/177784603-d69e9d02-721a-4bce-b9b3-949165d2edeb.png\" alt=\"\" width=\"30\" height=\"30\" /\u003e\u003c/a\u003e\n        \u003c/td\u003e\n                                      \u003ctd\u003e\n\u003ca href=\"#\"\u003e\u003cimg src=\"https://user-images.githubusercontent.com/99184393/187247589-11b213ce-0cbb-42f7-bbc2-e68634d23e51.png\" alt=\"\" width=\"40\" height=\"40\" /\u003e\u003c/a\u003e\n        \u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\n## :toolbox: Getting Started\n\n### :bangbang: Prerequisites\n\n- Sign up for a Firebase account \u003ca href='https://firebase.google.com'\u003eHERE\u003c/a\u003e\n- Install Node JS in your computer \u003ca href='https://nodejs.org/en/'\u003eHERE\u003c/a\u003e\n\n\u003c!-- Env Variables --\u003e\n\n### :key: Environment Variables\n\nTo run this project, you will need to add the following environment variables to your .env file\n\n`NEXT_PUBLIC_FIREBASE_API_KEY`\n\n`NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN`\n\n`NEXT_PUBLIC_FIREBASE_PROJECT_ID`\n\n`NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET`\n\n`NEXT_PUBLIC_FIREBASE_MESSAGING_SET`\n\n`NEXT_PUBLIC_FIREBASE_APP_ID`\n\n`NEXT_PUBLIC_BASE_URL`\n\n`NEXT_PUBLIC_CRYPTO_SECRET_PASS`\n\nThis project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).\n\n### :gear: Installation\n\n![](https://img.shields.io/badge/React-20232A?style=for-the-badge\u0026logo=react\u0026logoColor=61DAFB)\n![](https://img.shields.io/badge/next.js-20232A?style=for-the-badge\u0026logo=next.js\u0026logoColor=61DAFB)\n\nInstall my-project with npm\n\n```\nnpx create-next-app@latest --ts my-project\n```\n\n```\ncd my-project\n```\n\nInstall dependencies\n\n### In your Next.js project, install Chakra UI\n\n![](https://img.shields.io/badge/UI-Chakra%20UI-green)\n\n#### Installation\n\nIn your Next.js project, install Chakra UI by running either of the following:\n\n```\nnpm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6\nor\nyarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6\n```\n\nProvider Setup\nAfter installing Chakra UI, you need to set up the `ChakraProvider` at the root of your application.\n\nGo to `pages/_app.js` or `pages/_app.tsx` (create it if it doesn't exist) and wrap the `Component` with the `ChakraProvider`:\n\n```tsx\n// pages/_app.js\nimport { ChakraProvider } from \"@chakra-ui/react\";\n\nfunction MyApp({ Component, pageProps }) {\n  return (\n    \u003cChakraProvider\u003e\n      \u003cComponent {...pageProps} /\u003e\n    \u003c/ChakraProvider\u003e\n  );\n}\n\nexport default MyApp;\n```\n\n\u003ca href=\"https://chakra-ui.com/getting-started/nextjs-guide\" target=\"_blank\"\u003e🔷 Customizing theme \u0026 More\u003c/a\u003e\n\nInstall dependencies\n\n\u003ca href=\"https://github.com/SashenJayathilaka/Reddit-Clone/blob/master/package.json\" target=\"_blank\"\u003e🔶 Dependency Info\u003c/a\u003e\n\n\u003c!-- Run Locally --\u003e\n\n### :running: Run Locally\n\n![](https://img.shields.io/badge/GIT-E44C30?style=for-the-badge\u0026logo=git\u0026logoColor=white)\n\nClone the project\n\n```bash\n  git clone https://github.com/SashenJayathilaka/Reddit-Clone.git\n```\n\nchange directory\n\n```bash\n  cd Reddit-Clone\n```\n\nInstall dependencies\n\n```bash\n  npm install\n```\n\nStart the server\n\n```bash\n  npm run dev\n```\n\n\u003chr /\u003e\n\nThis is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).\n\n\u003chr /\u003e\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\nYou can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.\n\n[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.\n\nThe `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.\n\n### Learn More\n\nTo learn more about Next.js, take a look at the following resources:\n\n- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.\n- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.\n\nYou can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!\n\n\u003c!-- Deployment --\u003e\n\n### :triangular_flag_on_post: Deployment\n\nTo deploy this project run\n\n##### Deploy on Vercel\n\n![](https://img.shields.io/badge/Vercel-000000?style=for-the-badge\u0026logo=vercel\u0026logoColor=white)\n\nThe easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template\u0026filter=next.js\u0026utm_source=create-next-app\u0026utm_campaign=create-next-app-readme) from the creators of Next.js.\n\nCheck out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.\n\n## :handshake: Contact\n\nSashen - [@twitter_handle](https://twitter.com/SashenHasinduJ) - sashenjayathilaka95@gmail.com\n\nProject Link: [https://github.com/SashenJayathilaka/Reddit-Clone.git](https://github.com/SashenJayathilaka/Reddit-Clone.git)\n\n\u003chr /\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsashenjayathilaka%2Freddit-clone","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsashenjayathilaka%2Freddit-clone","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsashenjayathilaka%2Freddit-clone/lists"}