A full-featured Reddit clone built with Next.js, TypeScript, Supabase, Prisma, and shadcn/ui components.
- User Authentication - Sign up, login, and logout functionality using NextAuth
- Communities - Create and browse communities (subreddits)
- Posts - Create text, image, and link posts within communities
- Voting System - Upvote and downvote posts
- Comments - Comment on posts and engage in discussions
- Sorting - Sort posts by popularity or recency
- Responsive Design - Works seamlessly on mobile and desktop
- Frontend: Next.js with TypeScript
- UI Components: shadcn/ui
- Styling: Tailwind CSS
- Database: Supabase (PostgreSQL)
- ORM: Prisma
- Authentication: NextAuth.js
- Node.js 16+ and npm
- Git
- Supabase account for database
-
Clone the repository:
git clone https://github.com/MayankV004/reddit-clone.git cd reddit-clone -
Install dependencies:
npm install
-
Set up environment variables: Create a
.env.localfile in the root directory with the following variables:# Next Auth NEXTAUTH_SECRET=your_nextauth_secret NEXTAUTH_URL=http://localhost:3000 # Next Auth Providers GOOGLE_CLIENT_ID=your_google_client_id GOOGLE_CLIENT_SECRET=your_google_client_secret # Supabase DATABASE_URL=your_supabase_connection_string DIRECT_URL=your_direct_url NEXT_PUBLIC_SUPABASE_URL=get_this from_your_supabase_project NEXT_PUBLIC_SUPABASE_ANON_KEY=get_this from_your_supabase_project SUPABASE_SERVICE_ROLE_KEY=get_this from_your_supabase_project -
Set up Prisma:
npx prisma generate npx prisma db push
-
Run the development server:
npm run dev
-
Open http://localhost:3000 in your browser.
The application uses the following data models:
- User: Authentication and user profile information
- Community: Subreddit-like groups
- Post: User submissions within communities
- Comment: Responses to posts
- Vote: Upvotes/downvotes on posts
- Authentication: Users can sign up, log in, and log out
- Creating Communities: Authenticated users can create new communities
- Creating Posts: Authenticated users can create posts in communities
- Voting: Authenticated users can upvote or downvote posts
- Commenting: Authenticated users can comment on posts
- Browsing: All users can browse communities and posts, sorted by popularity or recency
/api/auth/[...nextauth]*- NextAuth authentication endpoints/api/auth/register*- For registering New user/api/communities- CRUD operations for communities/api/posts- CRUD operations for posts/api/comments- CRUD operations for comments/api/votes- Endpoints for post voting/api/users/profile- For profile edit
The application can be deployed on Vercel with minimal configuration:
- Connect your GitHub repository to Vercel
- Configure the environment variables
- Deploy