React Templates & Themes Logo React Templates & Themes
Reddit Clone screenshot

Reddit Clone

Author Avatar Theme by Sashenjayathilaka
Updated: 28 Mar 2025
155 Stars

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 & Light Mode, Data Encryption and Decryption)

Github Live Preview

Categories

Nextjs Firebase Chakra ui

Overview:

The Reddit Clone project is a web application that aims to replicate the functionality of the popular social platform Reddit. It includes features such as creating and joining communities, upvoting and downvoting posts, dark mode and light mode, user profiles, and live chat. The project is built using Next.js and Chakra UI, and it integrates with Firebase for authentication and storage.

Features:

  • Create and join communities
  • Upvote and downvote posts
  • Dark mode and light mode
  • User profile section
  • Live chat functionality
  • Integration with Firebase for authentication and storage

Installation:

To install the Reddit Clone project, follow these steps:

  1. Sign up for a Firebase account here.
  2. Install Node.js on your computer. You can download it here.
  3. Set up environment variables by adding the following values to your project’s .env file:
NEXT_PUBLIC_FIREBASE_API_KEY=YOUR_FIREBASE_API_KEY
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=YOUR_FIREBASE_AUTH_DOMAIN
NEXT_PUBLIC_FIREBASE_PROJECT_ID=YOUR_FIREBASE_PROJECT_ID
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=YOUR_FIREBASE_STORAGE_BUCKET
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=YOUR_FIREBASE_MESSAGING_SENDER_ID
NEXT_PUBLIC_FIREBASE_APP_ID=YOUR_FIREBASE_APP_ID
NEXT_PUBLIC_BASE_URL=YOUR_BASE_URL
NEXT_PUBLIC_CRYPTO_SECRET_PASS=YOUR_CRYPTO_SECRET_PASS
  1. Install project dependencies by running the following command in your project directory:
npm install
  1. Install Chakra UI by running either of the following commands in your Next.js project directory:
npm install @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4
  1. Set up the ChakraProvider by going to either pages/_app.js or pages/_app.tsx and wrapping the Component with the ChakraProvider component.
  2. Run the project locally by executing the following commands:
npm run dev
  1. Open http://localhost:3000 in your browser to see the running application.

Summary:

The Reddit Clone project is a web application that replicates the functionality of Reddit. It allows users to create and join communities, upvote and downvote posts, switch between dark and light modes, and engage in live chat conversations. The project is built using Next.js and Chakra UI, and it integrates with Firebase for authentication and storage. To install the project, follow the provided installation guide.