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

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