https://github.com/underprotectiondev/reddit-clone
https://github.com/underprotectiondev/reddit-clone
Last synced: 10 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/underprotectiondev/reddit-clone
- Owner: UnderprotectionDev
- Created: 2025-06-28T10:09:20.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-06-28T10:43:58.000Z (11 months ago)
- Last Synced: 2025-06-28T11:36:28.084Z (11 months ago)
- Language: CSS
- Size: 60.5 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Reddit Clone 🚀
A full-featured Reddit clone built with Next.js 15 and Sanity CMS. Experience the power of modern web development with real-time updates, community management, and intelligent content organization.
[](https://nextjs.org/)
[](https://reactjs.org/)
[](https://www.typescriptlang.org/)
[](https://sanity.io/)
[](https://clerk.com/)
[](https://tailwindcss.com/)
[](https://ui.shadcn.com/)
[](https://vercel.com/)
## ✨ Features
| Feature | Description |
| ----------------------- | ----------------------------------------------------------------- |
| 🏘️ Community Management | Create, manage, and moderate communities with custom branding. |
| 📝 Rich Post Creation | Create posts with text, images, and rich formatting capabilities. |
| 💬 Nested Comments | Multi-level comment system with threaded discussions. |
| 🗳️ Voting System | Upvote/downvote posts and comments with real-time score updates. |
| 🔐 User Authentication | Secure authentication and user management powered by Clerk. |
| 🔍 Advanced Search | Search communities with intelligent filtering and suggestions. |
| 📊 Content Moderation | Report inappropriate content and admin management tools. |
| 🎨 Modern UI | Beautiful, responsive design with dark/light mode support. |
| ⚡️ Real-time Updates | Live content updates and synchronization with Sanity CMS. |
| 📱 Mobile Responsive | Perfect experience across all devices and screen sizes. |
| 🔧 Type Safety | Full TypeScript support with auto-generated types. |
| 🛠️ Admin Panel | Comprehensive admin dashboard for content management. |
## 🌟 Tech Highlights
- **Next.js 15** with App Router, React 19, and Turbopack for lightning-fast development
- **Sanity CMS** for scalable content management and real-time data synchronization
- **Clerk Auth** for secure, production-ready authentication
- **TypeScript** for complete type safety and better developer experience
- **Shadcn/ui** components for consistent, accessible, and beautiful UI
- **Tailwind CSS** for rapid styling and responsive design
- **Server Actions** for seamless server-side operations
- **Real-time Features** with live updates and optimistic UI patterns
## 🚀 Quick Start
```bash
# Clone the repository
git clone https://github.com/yourusername/reddit-clone.git
cd reddit-clone
# Install dependencies
npm install
# Set up environment variables
cp .env.example .env.local
# Run the development server
npm run dev
```
Visit [http://localhost:3000](http://localhost:3000) to see the application in action.
## 🛠️ Tech Stack
Click to expand tech stack details
### Core Framework & Libraries
- **[Next.js 15](https://nextjs.org/)** - React framework with App Router and Turbopack
- **[React 19](https://reactjs.org/)** - Latest React with concurrent features
- **[TypeScript](https://www.typescriptlang.org/)** - Type-safe JavaScript development
- **[React TimeAgo](https://github.com/nmn/react-timeago)** - Human-readable time formatting
### Backend & CMS
- **[Sanity CMS](https://sanity.io/)** - Headless CMS with real-time capabilities
- **[Sanity Vision](https://www.sanity.io/docs/the-vision-plugin)** - GROQ query tool
- **[Next Sanity](https://github.com/sanity-io/next-sanity)** - Sanity integration for Next.js
### Authentication
- **[Clerk](https://clerk.com/)** - Complete authentication solution
### UI & Styling
- **[Tailwind CSS](https://tailwindcss.com/)** - Utility-first CSS framework
- **[Shadcn/ui](https://ui.shadcn.com/)** - Re-usable components built with Radix UI
### Development Tools
- **[ESLint](https://eslint.org/)** - Code linting and formatting
## 📸 Screenshots
### 🏠 Home Page
### 🏘️ Community Page
### 🏗️ Create Community
### ✍️ Create Post
### 🔍 Search Results
## 🔐 Environment Variables
Create a `.env.local` file in the root of your project:
```env
# Sanity CMS
NEXT_PUBLIC_SANITY_PROJECT_ID=your_sanity_project_id
NEXT_PUBLIC_SANITY_DATASET=production
SANITY_API_ADMIN_TOKEN=your_sanity_admin_token
# Clerk Authentication
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
CLERK_SECRET_KEY=your_clerk_secret_key
# Application
NEXT_PUBLIC_BASE_URL=http://localhost:3000
```
| Variable | Description | Required |
| ----------------------------------- | ------------------------------------------ | -------- |
| `NEXT_PUBLIC_SANITY_PROJECT_ID` | Sanity project identifier | ✅ |
| `NEXT_PUBLIC_SANITY_DATASET` | Sanity dataset name (usually 'production') | ✅ |
| `SANITY_API_ADMIN_TOKEN` | Sanity API token with read/write access | ✅ |
| `NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY` | Clerk publishable key | ✅ |
| `CLERK_SECRET_KEY` | Clerk secret key | ✅ |
| `NEXT_PUBLIC_BASE_URL` | Your application URL (for development) | ✅ |
## 🗂️ Project Structure
```
reddit-clone/
├── app/ # Next.js App Router
│ ├── (admin)/ # Admin panel routes
│ ├── (app)/ # Main application routes
│ └── globals.css # Global styles
├── components/ # Reusable React components
│ ├── ui/ # Shadcn/ui components
│ ├── post/ # Post-related components
│ ├── comment/ # Comment system components
│ └── header/ # Navigation components
├── sanity/ # Sanity CMS configuration
│ ├── schemaTypes/ # Content schemas
│ ├── lib/ # Sanity utilities
│ └── structure.tsx # Studio structure
├── action/ # Server actions
├── lib/ # Utility functions
└── public/ # Static assets
```