README.md

Breadit

A fullstack reddit clone built with Next.js

Table of Contents

1. About The Project
   • Built With
2. Features
3. Authentication
4. Error Handling
5. Acknowledgments

About The Project

Breadit is a Fullstack reddit clone, which has most of its functionalities; such as creating subreddits, sharing posts, leaving comments below etc.

(back to top)

Built with

• 
• 
• 
• 
• 

(back to top)

Features

A Breadit user can:

• Create communities
• Create posts
• Leave comments for posts
• Vote for posts and comments
• Search for communities
• Change their username

Authentication

A user can Sign in with their google account. In order to increase user experience, sign in component shows up as a modal until user refreshes the screen.

Since Next.js provides server-side and client-side rendering, it is performant to use different logics both of them to authenticate the user.

Server-side component:

import { getAuthSession } from "@/lib/auth"
const session = await getAuthSession()

If getAuthSession returns an object, then it means the user is authenticated.

Client-side component:

import { useSession } from "next-auth/react"
const { data: session } = useSession()

useSession is a hook provided by next-auth to get current session. Next-auth also works very well with prisma and creates Account, Session and User modals which you can extend with more fields.

(back to top)

Error handling

Action without login

Some actions require to be authenticated such as voting, commenting, creating subreddits and posting. In these situations, a custom toast notification with login button shown to user. This enhances user experience (UX).

Error example:

Code example:

const { loginToast } = useCustomToast()

if (err instanceof AxiosError) {
	if (err.response?.status === 401) {
		return loginToast()
	}
}

(back to top)

Acknowledgments

• Josh tried coding
• Authentication with Auth.js