Snapchat Clone

Real-time messaging app built with Next.js, TypeScript, MongoDB, and Tailwind CSS. Features secure authentication, efficient schema design, and Cloudinary integration for optimized image storage.

#mongodb #next-auth #nextjs #nodejs #oauth #tailwindcss #typescript #chat-application

Demo Download

Preview 🎬

Snapchat clone built in Next.js + TypeScript + Tailwind CSS + Shadcn using MongoDB for storage.

Features ✨

User Authentication: Secure user registration and login system.
Real-Time Messaging: Send and receive text and image messages in real-time.
Emoji Support: Express yourself with emoji messages.
User Profile: View and update user profiles.
Efficient Schema Design: Optimized database schema for improved performance and scalability.
Cloudinary Integration: Images are stored and served efficiently using Cloudinary for a seamless user experience.
Database Integration: MongoDB integration for storing user data, chat history, and messages.

Tech 🛠

Development 💻

Here are the steps to run the project locally.

Clone the repository

git clone https://github.com/Sai-Kumar-Kanuri/Snapchat-Clone.git

Install dependencies
```
cd snapchat-clone
npm install
```

Set up environment variables.

MONGODB_URI=your-mongodb-uri
AUTH_URL=http://localhost:3000/api/auth
AUTH_GITHUB_ID=your-github-client-id
AUTH_GITHUB_SECRET=your-github-client-secret
AUTH_SECRET=your-auth-secret
CLOUDINARY_CLOUD_NAME=your-cloudinary-cloud-name
CLOUDINARY_API_KEY=your-cloudinary-api-key
CLOUDINARY_API_SECRET=your-cloudinary-api-secret

Start the development server.
```
npm run dev
```

Now, your development environment is set up, and you can start working on the project locally.Open http://localhost:3000 with your browser to see the result.

Top categories

tailwind daisyui resume portfolio email blog dashboard landing-page admin ecommerce