App Preview

Social Media App

Deployed Live Website

📋 Table of Contents

1. 🌐 Introduction
2. ⚙️ Tech Stack
3. 🔋 Features
4. 🚀 Quick Start

🌐 Introduction

Social media app, built with Next.js, offers a seamless user experience with features like viewing others' profiles, following or blocking users, adding stories, and managing posts by adding, deleting, or reposting them. Users can also edit their profiles to customize their online presence.

⚙️ Tech Stack

• Next.js
• Prisma
• MySQL
• Zod
• Clerk
• TypeScript
• Tailwind CSS
• Cloudinary

🔋 Features

👉 User Authentication: Secure login and registration using social sign-on or traditional email and password methods with Clerk.

👉 User Profiles: Create and manage user profiles with customizable avatars and bios.

👉 Post Creation: Share updates, images, and videos with the community.

👉 Commenting and Liking: Engage with posts through comments and likes.

👉 Real-time Notifications: Receive instant notifications for likes, comments, and new followers.

👉 Media Management: Upload and manage media files through Cloudinary.

👉 Responsive Design: Ensures optimal user experience across devices with a responsive and adaptive design.

👉 Secure and Scalable: Built with best practices for security and scalability in mind, ensuring data integrity and privacy.

🚀 Quick Start

Follow these steps to set up the project locally on your machine.

Prerequisites

Make sure you have the following installed on your machine:

• Git
• Node.js
• npm (Preferred Node Package Manager)

Cloning the Repository

git clone https://github.com/Agamya-Samuel/SnapNexus-SocialMediaApp-NextJS
cd SnapNexus-SocialMediaApp-NextJS

Installation

Install the project dependencies using npm:

npm install

Set Up Environment Variables

Create a new file named .env in the root of your project and add the following content:

# Database
DATABASE_URL="mysql://user:password@localhost:3306/database"

# Clerk
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=YOUR_CLERK_PUBLISHABLE_KEY
CLERK_SECRET_KEY=YOUR_CLERK_SECRET_KEY
WEBHOOK_SECRET=

NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up

# Cloudinary
NEXT_PUBLIC_CLOUDINARY_API_KEY=YOUR_CLOUDINARY_API_KEY
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=YOUR_CLOUDINARY_CLOUD_NAME
CLOUDINARY_API_SECRET=YOUR_CLOUDINARY_API_SECRET
CLOUDINARY_UPLOAD_PRESET=YOUR_CLOUDINARY_UPLOAD_PRESET

# Add other necessary environment variables

Replace the placeholder values with your actual MySQL, Cloudinary, and Clerk credentials.

Running the Project

npm run dev

Open http://localhost:3000 in your browser to view the project.

Building for Production

npm run build
npm start

This will start the production server.

Contributing

If you'd like to contribute, please fork the repository and use a feature branch. Pull requests are warmly welcome.

License

This project is licensed under the MIT License. See the LICENSE file for more information.

Feel free to customize any section further based on the specific details of your project.