DEV Community

Codemaster_121482
Codemaster_121482

Posted on

A social media platform to connect people, built to be very simple from day one!

Vlox

Built from the ground up by me, Vlox is the spiritual successor to BlockSocial, reimagined with better architecture, modern tooling, and a focus on performance.


✨ Features

🔐 Authentication

  • User signup & login with session-based auth
  • Banned user middleware
  • Passwords hashed with bcrypt
  • Input sanitization with he (XSS protection)

📝 Posts

  • Create posts with title, content, images, and mentions
  • Image upload with Sharp optimization (WebP, resize, compress)
  • Keyword extraction for search/trending
  • Pagination (50 posts per page)

💬 Comments

  • Add comments to any post
  • Comment count updates in real time
  • Pagination (10 comments per page)

❤️ Reactions

  • Like and report posts
  • Unique reactions to prevent duplicates
  • Live count updates

🛡️ Security & Performance

  • Rate limiting (5000 req/15 min)
  • XSS protection (he)
  • File type & size validation (10MB max)
  • Optimized image pipeline (Sharp)
  • Environment variables for sensitive data

🖼️ Image Upload

  • Multer + Sharp pipeline
  • User-specific folders
  • 800 image limit per user
  • Auto-conversion to WebP (80% quality)
  • UUID-based naming to avoid collisions

🧰 Tech Stack

Layer Technology
Frontend HTML5, CSS3, JavaScript (ES6+)
Frontend Library NanoScript (custom, lightweight DOM lib made by me)
Backend Node.js, Express.js
Database MongoDB, Mongoose ODM
Auth express-session, bcrypt
Image Processing Multer, Sharp
Security he, express-rate-limit
UI Enhancements SweetAlert2, Font Awesome

🚀 Getting Started

Prerequisites

  • Node.js (v16+)
  • MongoDB (local or Atlas)
  • Git

Installation

  1. Clone the repository
git clone https://github.com/Hfs2024/Vlox.git
cd Vlox
npm install
Enter fullscreen mode Exit fullscreen mode
  1. Set up the env
PORT=3000
MONGO_URI=your_mongodb_connection_string
SESSION_SECRET=your_super_secret_key
NODE_ENV=development
Enter fullscreen mode Exit fullscreen mode
  1. Run the server
npm start
Enter fullscreen mode Exit fullscreen mode

🤝 Contributing

Contributions are welcome! If you find a bug or have a feature idea:

  • Fork the repo
  • Create a new branch (git checkout -b feature/AmazingFeature)
  • Commit your changes (git commit -m 'Add some AmazingFeature')
  • Push to the branch (git push origin feature/AmazingFeature)
  • Open a Pull Request

⭐ Show Your Support

If you like this project, please consider giving it a ⭐ on GitHub – it means the world to me!

Built with ❤️ using NanoScript – my own lightweight DOM library!

Top comments (1)

Collapse
 
codemaster_121482 profile image
Codemaster_121482

Feel free to share all your toughts!