https://github.com/tasin5541/nextjs-reddit-clone
A reddit clone made with NextJs 13, Firebase, Chakra UI, Recoil. Create or join new subreddits, add votes and comments.
https://github.com/tasin5541/nextjs-reddit-clone
chakra-ui firabase nextjs react reactjs recoil reddit
Last synced: 4 months ago
JSON representation
A reddit clone made with NextJs 13, Firebase, Chakra UI, Recoil. Create or join new subreddits, add votes and comments.
- Host: GitHub
- URL: https://github.com/tasin5541/nextjs-reddit-clone
- Owner: Tasin5541
- License: mit
- Created: 2023-04-08T15:42:00.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-06-03T04:48:43.000Z (4 months ago)
- Last Synced: 2025-06-03T18:10:59.709Z (4 months ago)
- Topics: chakra-ui, firabase, nextjs, react, reactjs, recoil, reddit
- Language: TypeScript
- Homepage: https://next-js-reddit-clone-tasin5541.vercel.app/
- Size: 17.7 MB
- Stars: 19
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# NextJs-Reddit-Clone
A reddit clone made with NextJs 13, Firebase, Chakra UI, Recoil
- **[NextJs](https://nextjs.org/)** (13.x)
- **[React](https://facebook.github.io/react/)** (18.x)
- **[Firebase](https://firebase.google.com/)** (9.x)
- **[Chakra UI](https://chakra-ui.com/)** (2.x)
- **[Recoil](https://recoiljs.org/)** (0.7.x)
- **[Typescript](https://www.typescriptlang.org/)** (4.x)
- Production build script
## Live Demo
See a [live demo](https://next-js-reddit-clone-tasin5541.vercel.app/) 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](https://reddit.com)
- Some Implementation Ideas for this project are taken from [Shadee Merhi](https://youtu.be/zhx9FUSuAsM)
- Project was bootstrapped with [create-next-app](https://nextjs.org/docs/api-reference/create-next-app)