A modern, full-stack social media platform built with Next.js 14
- 🔐 Secure Authentication - Powered by Clerk with social login support
- 📝 Create & Share Posts - Express yourself with text and images
- 💬 Real-time Interactions - Like, comment, and engage with posts
- 👥 Follow System - Connect with other users and build your network
- 🔔 Smart Notifications - Stay updated on likes, comments, and follows
- 🎨 Dark Mode - Beautiful UI with light/dark theme switching
- 📱 Fully Responsive - Seamless experience across all devices
- ⚡ Optimized Performance - Server-side rendering and image optimization
- 🖼️ Image Uploads - Upload and share photos with UploadThing integration
- 👤 User Profiles - Customizable profiles with bio, location, and website
- Next.js 14 - React framework with App Router
- TypeScript - Type-safe development
- Tailwind CSS - Utility-first styling
- shadcn/ui - Beautiful, accessible components
- Lucide Icons - Modern icon library
- Prisma ORM - Type-safe database client
- PostgreSQL - Robust relational database
- Neon - Serverless Postgres hosting
- Clerk - Complete authentication solution
- UploadThing - File upload service
- Radix UI - Unstyled, accessible component primitives
- React Hot Toast - Beautiful notifications
- Next Themes - Dark mode implementation
- Node.js 18+ and npm
- PostgreSQL database (or Neon account)
- Clerk account for authentication
- UploadThing account for file uploads
- Clone the repository
git clone https://github.com/Erennn7/socially.git
cd socially- Install dependencies
npm install- Set up environment variables
Create a .env file in the root directory:
# Clerk Authentication
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
CLERK_SECRET_KEY=your_clerk_secret_key
# Database
DATABASE_URL=your_postgresql_connection_string
# UploadThing
UPLOADTHING_TOKEN=your_uploadthing_token- Set up the database
npx prisma generate
npx prisma db push- Run the development server
npm run devOpen http://localhost:3000 to see the app! 🎉
socially/
├── prisma/
│ └── schema.prisma # Database schema
├── src/
│ ├── actions/ # Server actions
│ │ ├── post.action.ts
│ │ ├── user.action.ts
│ │ ├── profile.action.ts
│ │ └── notification.action.ts
│ ├── app/ # Next.js App Router
│ │ ├── api/ # API routes
│ │ ├── notifications/ # Notifications page
│ │ ├── profile/ # User profiles
│ │ └── page.tsx # Home page
│ ├── components/ # React components
│ │ ├── ui/ # shadcn/ui components
│ │ ├── CreatePost.tsx
│ │ ├── PostCard.tsx
│ │ ├── Navbar.tsx
│ │ └── ...
│ ├── lib/ # Utilities
│ │ ├── prisma.ts # Prisma client
│ │ ├── utils.ts # Helper functions
│ │ └── uploadthing.ts # Upload config
│ └── middleware.ts # Clerk middleware
└── package.json
- Create text and image posts
- Edit and delete your own posts
- Like and unlike posts
- View post engagement metrics
- Customizable profile information
- View user's posts and activity
- Follow/unfollow users
- See follower and following counts
- Get notified when someone:
- Likes your post
- Comments on your post
- Follows you
- Mark notifications as read
- Clean, modern design
- Smooth animations and transitions
- Responsive mobile-first layout
- Dark mode support
- Loading states and skeletons
The app uses a relational database with the following main models:
- User - User accounts and profiles
- Post - User-generated posts
- Comment - Comments on posts
- Like - Post likes
- Follows - User follow relationships
- Notification - User notifications
npm run dev # Start development server
npm run build # Build for production
npm start # Start production server
npm run lint # Run ESLint
npx prisma studio # Open Prisma Studio (database GUI)- Push your code to GitHub
- Import your repository to Vercel
- Add your environment variables in the Vercel dashboard
- Deploy! ✨
The app will automatically build and deploy on every push to the main branch.
| Variable | Description | Required |
|---|---|---|
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY |
Clerk publishable key | ✅ |
CLERK_SECRET_KEY |
Clerk secret key | ✅ |
DATABASE_URL |
PostgreSQL connection string | ✅ |
UPLOADTHING_TOKEN |
UploadThing API token | ✅ |
Contributions are welcome! Feel free to:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is open source and available under the MIT License.
Eren
- GitHub: @Erennn7
Built with ❤️ using Next.js
If you found this project helpful, please consider giving it a ⭐!