✨ SparkLink — Full-Stack Social Media App (MERN)

A modern social media platform built with the MERN stack, featuring authentication, stories, messaging, posts, profile management, connections, and real-time experiences.

---

📌 Table of Contents

• 🚀 Overview
• ✨ Features
• 🖼 Screenshots
• 🛠 Tech Stack
• 📁 Project Structure
• ⚙️ Environment Variables
• 🚀 Getting Started
• 📡 API Summary
• 🌐 Deployment
• 🤝 Contributing
• ⭐ Support

---

🚀 Overview

SparkLink is a full-stack social media application built using the MERN Stack, equipped with:

• Real-time messaging
• Stories & viewer
• Post feed with images
• Authentication (Clerk)
• Media CDN (ImageKit)
• Background jobs (Inngest)
• Connections / Follow system

It is built for learning, scaling, and production-ready deployment.

---

✨ Features

🔐 Authentication (Clerk)

• Signup / Login / Logout
• Protected routes
• Middleware-secured API

💬 Real-time Messaging

• Chat UI
• Recent messages panel
• Smart notification popups

📝 Posts & Feed

• Create post (text + image)
• Feed algorithm
• Post card components

🕒 Stories System

• Story upload modal
• Story viewer
• Auto-expiry

👥 Connections

• Follow / Unfollow
• Pending requests
• Discover page with suggestions

📤 Media Uploads (ImageKit)

• Fast optimized CDN
• Automatic compression
• Upload via Multer

⚙️ Inngest Background Jobs

• Webhooks
• Notifications
• Scheduled tasks

---

🖼 Screenshots

Replace these links with your real images later.

Feed	Messaging	Profile

🎥 Demo GIF

Add screen recording later

---

🛠 Tech Stack

Frontend

Backend

---

📁 Project Structure

sparklink/
│
├── client/
│   ├── public/
│   ├── src/
│   │   ├── api/
│   │   ├── app/
│   │   ├── assets/
│   │   ├── components/
│   │   ├── features/
│   │   ├── pages/
│   │   ├── index.css
│   │   ├── main.jsx
│   │   └── vite.config.js
│   ├── package.json
│   └── vercel.json
│
└── server/
├── configs/
├── controllers/
├── inngest/
├── middlewares/
├── models/
├── routes/
├── utils/
├── server.js
├── package.json
└── vercel.json

---

⚙️ Environment Variables

Server .env

PORT=5000
MONGO_URI=your_mongodb_uri

CLERK_SECRET_KEY=your_clerk_secret_key

IMAGEKIT_PUBLIC_KEY=your_public
IMAGEKIT_PRIVATE_KEY=your_private
IMAGEKIT_URL_ENDPOINT=your_url

INNGEST_EVENT_KEY=your_key

EMAIL_USER=your_email
EMAIL_PASS=your_pass

Client .env

VITE_CLERK_PUBLISHABLE_KEY=your_key
VITE_API_URL=[http://localhost:5000](http://localhost:5000)

---

🚀 Getting Started

1. Clone the repo

git clone https://github.com/<your-username>/sparklink.git

2. Install dependencies

Client

cd client
npm install

Server

cd server
npm install

3. Run the App

Start Backend

npm run server

Start Frontend

npm run dev

---

📡 API Summary

Auth Middleware

middlewares/auth.js

Endpoints

👤 User Routes

POST   /api/user/create
GET    /api/user/profile/:id
PUT    /api/user/update

📝 Post Routes

POST   /api/post/create
GET    /api/post/feed
GET    /api/post/:id

🕒 Story Routes

POST   /api/story/create
GET    /api/story/all

💬 Message Routes

POST   /api/message/send
GET    /api/message/list/:userId

---

🌐 Deployment

Supports:

• Vercel (recommended)
• Render
• Railway
• Netlify + Server Deployment
• AWS / Azure / DigitalOcean

Each folder includes its own:

vercel.json

---

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to open a PR or issue.

---

⭐ Support

If you like this project, please ⭐ star the repo — it motivates future updates!

---

Made with ❤️ using MERN Stack