Skip to content

A reddit clone made with NextJs 13, Firebase, Chakra UI, Recoil. Create or join new subreddits, add votes and comments.

License

Notifications You must be signed in to change notification settings

Tasin5541/NextJs-Reddit-Clone

Repository files navigation

NextJs-Reddit-Clone

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

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
    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

About

A reddit clone made with NextJs 13, Firebase, Chakra UI, Recoil. Create or join new subreddits, add votes and comments.

Topics

Resources

License

Stars

Watchers

Forks

Languages