Project Name

A modern and clean reddit clone with the Next.js App Router, TypeScript & Tailwind. Live demo here.

Table of Contents

• General Info
• Technologies Used
• Features
• Screenshots
• Setup
• Room for Improvement
• Acknowledgements

General Information

This is a full-stack simple version of reddit clone to exercise my ability to create full-stack projects using next.js. And to prepare for my grad school graduation project in the summer of 2024.

Technologies Used

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

Screenshots

Setup

1. Clone this repository first
2. Open it and install all the dependencies
3. Run npm run dev
4. Open in the browser

There are a few places where you need to provide your own information. Check the .env file.

DATABASE_URL=
NEXTAUTH_SECRET=

GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=

UPLOADTHING_SECRET=
UPLOADTHING_APP_ID=

REDIS_URL=
REDIS_SECRET=

For the Google oAuth 2.0 configuration. You need to go the https://console.cloud.google.com/ and get the Google client Id and secret. This video and this is helpful to me.

Room for Improvement

Include areas you believe need improvement / could be improved. Also add TODOs for future development.

To do:

• Allow users to see all the communities they joined.
• Allow users to see all the posts they posted.
• Allow users to delete the posted post.
• Implement dark mode
• Allow users to share the post with link
• Add popular posts sections where you can see the latest most voted posts which are not neccessary from the communities you've joined

Acknowledgements

• This project was based on this tutorial.