/shreddit

Modern fullstack Reddit clone, built with Next.js & Tailwind and deployed on Vercel.

Primary LanguageTypeScriptMIT LicenseMIT

Shreddit

Modern fullstack Reddit clone, built with Next.js & Tailwind and deployed on Vercel.

Table of Contents

Technologies Used

  • React 18
  • Next.js 13
  • NextAuth.js
  • Prisma
  • Shadcn UI
  • Tailwind CSS
  • TypeScript
  • UploadThing

Features

  • Infinite scrolling for loading posts dynamically
  • A beautiful and highly functional post editor
  • Beautiful UI powered by Shadcn UI
  • Light and Dark modes
  • Authentication using NextAuth & GitHub
  • Custom feed for authenticated users
  • Image uploads (with UploadThing) & link previews
  • Full comment functionality with nested replies
  • ... and much more

Meta-Features

  • Next.js /app dir
  • React Client and Server Components
  • Metadata configuration for improved SEO and web shareability
  • Data fetching and mutation with React Query
  • Graceful loading states and optimistic updates for a great UX
  • Advanced caching with Upstash Redis
  • Schema declarations and validations with Zod
  • Typesafe code and best practices made possible by TypeScript, ESLint and Prettier
  • Automated format, lint and typecheck CI steps with GitHub Actions
  • ... and much more

Quickstart

To run it locally, follow the steps below:

  1. Clone repository and install the dependencies:

    # Clone repository
git clone git@github.com:peterkibuchi/shreddit.git

# Install dependencies
pnpm i

  2. Copy .env.example to .env and update the variables.

    cp .env.example .env

  3. Sync the Prisma schema with your database

    pnpm prisma db push

  4. Start the development server:

    pnpm dev

Project Status

Project is: complete.

Acknowledgements

  • This is a T3 Stack project bootstrapped with create-t3-app.
  • Many thanks to Josh for inspiring this project.

License

This project is open source and available under the MIT License.