Vistagram — Instagram Clone | React Social Media App Template (MERN)

Vistagram is a full-stack Instagram clone and social media web app built with the MERN stack (MongoDB, Express, React, Node.js). Use it as a marketplace-ready project, portfolio piece, or starting point for a photo-sharing platform with feed, stories, DMs, notifications, and real-time updates.

Why Vistagram?

Feature Description Photo Feed Follow-based home feed with likes, comments, and infinite scroll Explore & Search Discover posts by hashtag, category, and username Stories Upload and view 24-hour-style stories Direct Messages Real-time chat with Socket.io, shared posts, and online status Notifications Live likes, comments, follows, and messages Profiles Public/private accounts, followers, following, and saved posts Modern UI React 19 + Vite + Tailwind CSS, fully responsive mobile layout Local-First Runs entirely on localhost — ideal for learning and customization

Tech Stack

Layer Technologies Frontend React 19, Vite, Redux Toolkit, React Router, Tailwind CSS, Socket.io Client, Axios Backend Node.js, Express 5, MongoDB, Mongoose, JWT, Multer, Socket.io, Helmet Real-Time WebSockets for messages, notifications, and presence (online/offline)

Screenshots & Demo

Run the app locally (see Quick Start) and open:

Service URL Client http://localhost:5173 API http://localhost:5000

Quick Start

Prerequisites

Node.js v18 or higher
MongoDB running locally, or a MongoDB Atlas connection URI

1. Clone and Install

git clone <your-repo-url>
cd Vistagram

cd server && npm install
cd ../client && npm install

2. Environment Variables

Server — copy server/.env.example to server/.env and fill in the values:

PORT=5000
NODE_ENV=development
CLIENT_URL=http://localhost:5173
MONGODB_URI=mongodb://127.0.0.1:27017/vistagram
JWT_SECRET=your_local_jwt_secret_min_32_chars
JWT_EXPIRE=30d

Client — create client/.env:

VITE_API_URL=http://localhost:5000/api
VITE_SERVER_URL=http://localhost:5000

3. Run the App

Open two terminal windows and run each command:

# Terminal 1 — API Server
cd server
npm start

# Terminal 2 — React App
cd client
npm run dev

Project Structure

Vistagram/
├── client/          # React + Vite frontend
├── server/          # Express API + Socket.io backend
└── README.md        # This file (marketplace overview)

For detailed documentation, see:

client/README.md — Frontend architecture, scripts, and environment setup
server/README.md — API routes, data models, and deployment notes

License

Free to use and modify for personal or commercial projects according to your license terms.

Author

Vistagram — Created by Tekki Coder