0
breadit

breadit

A Reddit clone built using Next.js 13, Prisma, TailwindCSS, and Redis. Deployed on Vercel.


About

Breadit is a modern fullstack Reddit clone, built with the newest NextJS 13 App Router, Tailwind CSS, and TypeScript.

Features

  • Infinite scrolling for dynamically loading posts
  • Authentication using NextAuth & Google
  • Custom feed for authenticated users
  • Advanced caching using Upstash Redis
  • Optimistic updates for a great user experience
  • Modern data fetching using React-Query
  • A beautiful and highly functional post editor
  • Image uploads & link previews
  • Full comment functionality with nested replies
  • ... and much more

Getting started

To get started with this project, clone the repository:

git clone https://github.com/KenTandrian/breadit.git

and copy .env.example file into a separate .env file:

cp .env.example .env

then fill in the required environment variables.

If you'd like, you can paste this snippet for quick component creation (optional):

// vscode settings -> user snippets -> typescriptreact.json
"Typescript React Function Component": {
    "prefix": "fc",
    "body": [
        "import { FC } from 'react'",
        "",
        "interface ${TM_FILENAME_BASE}Props {",
        "  $1",
        "}",
        "",
        "const $TM_FILENAME_BASE: FC<${TM_FILENAME_BASE}Props> = ({$2}) => {",
        "  return <div>$TM_FILENAME_BASE</div>",
        "}",
        "",
        "export default $TM_FILENAME_BASE"
    ],
    "description": "Typescript React Function Component"
},

and that's all you need to get started!

Acknowledgements

Try the Application

Visit the URL: https://breadit.kentandrian.vercel.app/