Click the button above to view the live version of the project.
VibeSocial is a next-generation social media platform inspired by Instagram Reels — built for aesthetic lovers, modern creators, and tech enthusiasts. Featuring:
- 🎥 Vertical Reel-like Video Feed
- 🌀 Infinite Scroll with Realistic User & Post Generation
- 💬 Advanced Comment System with Threaded Replies, Emojis, Likes, and Pinned Comments
- 🚀 Built with modern front-end tech: React, Tailwind CSS, Framer Motion, and API integration for seamless experiences.
🌐 Project Status: Currently in development. Live Preview Coming Soon for User Testing!
| Category | Technologies Used |
|---|---|
| Frontend |      |
| Animation |  |
| Icons & Assets |   |
| Data Generation |  |
| Infinite Scroll |  |
| Styling |   |
| Version Control |   |
| Feature | Description |
|---|---|
| 🎥 VibeReel View | A scrollable Instagram Reels-style feed, one reel per view |
| 👤 Profile UI | User bio, follower stats, post grid, and smooth layout |
| 💬 Advanced Comment System | Supports replying, liking, pinning, emojis/stickers, blur transitions |
| 🌀 Infinite Scrolling Feed | Auto loads more posts when you scroll to bottom, with dynamic user data |
| ✨ Aesthetic Animations | All pages/components use Framer Motion for smooth interactions |
| 🌈 Gradient UI | Custom black-pink & purple gradient overlays and buttons |
| 🔄 Real-Time Post Updates | Coming soon via Socket.io for likes/comments on reels |
| 📷 Explore/Search Pages | Allow you to discover new users, posts, and popular reels easily |
| ➕ Upload Page | Upload reels with captions and audio (UI Ready) |
A glimpse into the stunning UI of VibeSocial
Follow these steps to run the project locally:
git clone https://github.com/Dev-axay18/VibeSocial.git
cd VibeSocialnpm install{
"dependencies": {
"@emoji-mart/data": "^1.2.1",
"@emoji-mart/react": "^1.1.1",
"@faker-js/faker": "^9.8.0",
"@headlessui/react": "^1.7.17",
"axios": "^1.9.0",
"clsx": "^2.1.1",
"emoji-picker-react": "^4.12.2",
"firebase": "^10.7.1",
"framer-motion": "^10.18.0",
"lucide-react": "^0.292.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-feather": "^2.0.10",
"react-hot-toast": "^2.4.1",
"react-intersection-observer": "^9.5.3",
"react-router-dom": "^6.20.1",
"socket.io-client": "^4.7.2",
"tailwind-scrollbar-hide": "^2.0.0",
"uuid": "^11.1.0"
},
"devDependencies": {
"@types/react": "^18.2.43",
"@types/react-dom": "^18.2.17",
"@vitejs/plugin-react": "^4.2.1",
"autoprefixer": "^10.4.16",
"concurrently": "^9.1.2",
"eslint": "^8.55.0",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.5",
"postcss": "^8.4.32",
"tailwindcss": "^3.3.6",
"vite": "^5.0.8"
}
}Create a
.envfile in the root and add:
VITE_PEXELS_API_KEY=your_api_key_here
npm run devApp will run at:
http://localhost:5173
- 🔄 Infinite Scroll Feed (powered by IntersectionObserver + Random Data API)
- 💬 Threaded Comments with Like/Reply/Pin options
- 🌀 Animated Story Cards and Post Cards with Framer Motion
- 🎨 Gradient-Rich UI inspired by Instagram but uniquely custom
- 🧠 Responsive & Modular Code for scalability
- 🌐 Live Hosting & Testing Phase (Coming Soon!)
- 📱 Mobile Optimization
- 🔐 Authentication & Authorization
- 💡 Reel Upload + Like/Comment in Realtime (Socket.io)
- 🧠 AI-Powered Caption Suggestions & Video Tagging
- 🎭 AR Effects & Filters (Future Integration)
- 📊 Insights Dashboard for Creator Analytics
- 🧩 Drag & Drop Reel Editor
- 🧵 Hashtags + Trending Section
- ⏰ Scheduled Post Uploads with Calendar Picker
- 🎵 Audio Library for Background Tracks
- 🧠 Personalized Reel Recommendations Using AI
- 🔎 Smart Search with Semantic Filters
- 💌 DM & Messaging System
Feel free to open issues or submit pull requests for suggestions and features. Let’s make VibeSocial better together!