Breadit - A Modern Fullstack Reddit Clone

Built with the Next.js App Router, TypeScript & Tailwind

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

  git clone -b starter-code https://github.com/joschan21/breadit.git

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

DATABASE_URL=
NEXTAUTH_SECRET=

GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=

UPLOADTHING_SECRET=
UPLOADTHING_APP_ID=

REDIS_URL=
REDIS_SECRET=

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

Upstash Redis for making this possible
Code with Antonio for thumbnail design inspiration
Shadcn's Taxonomy respository for showcasing the post editor