A Premium, High-Fidelity Social Experience
Vibe Social is a modern, premium, and fully-featured social media platform. Engineered with a clean architecture, it features a fluid, responsive frontend built with pure HTML, custom CSS variables, and vanilla ES6 JavaScript, connected to a robust Node.js and Express backend powered by sql.js.
Designed with high aesthetics and premium micro-interactions, Vibe Social avoids rigid templates and boilerplate frameworks to deliver an authentic, human-designed user interface.
- User Authentication: Secure registration and login flows backed by session-based authentication (express-session) and bcrypt hashing.
- Stories & Viewed States: Interactive story rings with neon-gradient active borders that minimize to a simple gray circle once viewed, replicating modern social app user flows.
- Advanced Profile Customization: Modify usernames safely with password validation guards, configure custom avatars (with Multer file uploads), and edit pronouns, genders, bios, and links.
- Vibe Verified Tick System: Purchase verification badges mock flows that dynamically render the official blue verified badge next to usernames across feed posts, captions, recommendations, searches, followers lists, and comments.
- Explore & Feed: Explore posts in a responsive 3-column overlay grid with hover details, or scroll through a centralized feed page with follow suggestions.
- Post Actions & Likes: Toggle post likes with fluid heart pop animations, support double-tap gestures to like, and CRUD delete functionalities for owner accounts.
- Followers & Following Networks: Connect with and unfollow users dynamically, adjusting user statistics in real-time.
Ensure you have Node.js installed, then execute:
-
Clone the repository:
git clone https://github.com/dr5t/CodeAlpha-SocialMedia-App.git cd Social-Media-App -
Install node dependencies:
npm install
-
Start the Express server:
npm start
-
Launch Vibe Social: Open your browser and navigate to
http://localhost:3000
The local database comes pre-seeded with highly realistic accounts featuring ready-to-view stories, comments, likes, and posts:
| Username | Name | Verification Status | Password |
|---|---|---|---|
priya_designs |
Priya Sharma | ✅ Verified (UX Designer) | password123 |
dr5t |
Shaurya Tiwari | ✅ Verified (Creator) | password123 |
- Security Guidelines: See SECURITY.md for vulnerability disclosure procedures.
- License: Distributed under the MIT License. See LICENSE for more details.