Premium Assets

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 Register an account, follow users, post photos, and test real-time messaging between two browser windows. 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