NextJs-Reddit-Clone

A reddit clone made with NextJs 13, Firebase, Chakra UI, Recoil

• NextJs (13.x)
• React (18.x)
• Firebase (9.x)
• Chakra UI (2.x)
• Recoil (0.7.x)
• Typescript (4.x)
• Production build script

Live Demo

See a live demo on Vercel

Installation

Setup Firebase

1. Navigate to https://console.firebase.google.com/u/0/
   Click Add Project
   

2. Click the Enter your project name field.
   Type reddit-clone
   Click Continue
   Click Select an account
   Select your account
   Click Create project
   Click Continue
   

3. Click web
   

4. Click the App nickname field.
   Type your-app-name
   Click Register app
   Copy and store the firebaseConfig values
   Click Continue to console
   

5. Click Authentication
   Click Get started
   

6. Click Email/Password
   Click Save
   Click Add new provider
   Click Google
   Click Save
   

7. Expand Build menu
   Click Storage
   Click Get started
   

8. Click Next
   Click Done
   

9. Click Rules tab
   Copy paste the following in edit rules

   rules_version = '2';
    service cloud.firestore {
      match /databases/{database}/documents {
        match /users/{userId}/{restOfPath=**} {
          allow read, write: if request.auth != null && userId == request.auth.uid;
        }
        match /posts/{postId} {
            allow read;
          allow write: if request.resource.data.creatorId == request.auth.uid;
          allow delete: if request.auth.uid == resource.data.creatorId;
          allow update;
        }
        match /comments/{commentId} {
            allow read;
          allow write: if request.resource.data.creatorId == request.auth.uid;
          allow delete: if request.auth.uid == resource.data.creatorId;
          allow update;
        }
        match /communities/{communityId} {
            allow read;
          allow write: if request.auth != null;
        }
      }
    }
   

   Click Publish
   

Setup Project

1. Clone/download repo
2. Create a file called .env in the root directory of your project, type the following in cmd/powershell

   cp env.example .env
   

3. Inside the .env file, add the firebase keys from the firebaseConfig copied during step 4 of firebase setup
4. yarn install (or npm install for npm) to install the dependencies

Usage

Development

yarn dev

• Build app continuously (HMR enabled)

Production

yarn build yarn start

• Build app once (HMR disabled) to /.next/

---

All commands

Command	Description
yarn dev	Build app continuously (HMR enabled)
yarn build	Build app once (HMR disabled) to /.next/
yarn start	Run production build

See also

• Design ideas were taken from Reddit
• Some Implementation Ideas for this project are taken from Shadee Merhi
• Project was bootstrapped with create-next-app