DEV Community: Codemaster_121482

How I engineered a custom social media app in 2 months?

Codemaster_121482 — Mon, 29 Jun 2026 19:43:11 +0000

What is BlockSocial?

BlockSocial is the ultimate social network for developers, bringing the energy of short-form video to the world of open source. Think of it as Facebook meets Instagram—a place to showcase your code, find inspiration, and build your developer brand through "Reels" and interactive dashboards.

Github repo link: https://github.com/Hfs2024/BlockSocial

1. User Scenario & Workflow (The Fork System)

The Setup

User A: Publishes a post saying: "I love drinking Pepsi every day."
User B: Is shy, but wants to tell their friend this is an unhealthy habit.
User C: Is a malicious user who gossips.

The Fork Mechanism

User B creates a fork to discuss this post with User C via the POST /api/share endpoint.

Data Copying: It copies the entire post contents except comments, likes, reports, and downloads.
Chain Prevention: You can fork a forked post, but the system will fork the original source root, not the fork itself.
Scope: It shares with only one user at a time to prevent unexpected group creation.

Database Payload for Forks

The following fields are appended to the document structure:

{
  "share": true,
  "shareId": "post._id", // The original post ID
  "sharedBy": "req.currentUser.username", // The user who shared or forked
  "shareTo": "shareTo", // The friend receiving the share
  "shareComment": "comment || ''" // A quick comment on the post
}

Moderation & Enforcement Workflow

If User C breaks trust and leaks the conversation, User B can report them via the POST /report/user endpoint.

Verification: Administrators review interaction history to verify the violation.
Account Termination: Bad users receive a permanent lifetime account ban.
Data Scrubbing: All associated messages from the malicious user are removed.
Blacklisting: The account is fully banned.
The Blindspot: Face-to-face interactions remain outside system moderation boundaries 😅

2. Technical Implementation Details

Dynamic Comment Identity Logic

When a user submits a comment via POST /api/comment, the application evaluates the id payload from req.body to locate the post and applies the following identity check:

(result.anonymous && result.by === req.currentUser.username) ? result.anonymous_name : req.currentUser.username

Logic: If it is an anonymous post and the author is commenting, the system displays their unique UUID (result.anonymous_name). Otherwise, it returns their standard username.

API Data Masking (Anti-Data Leaking)

To prevent tech-savvy clients from using custom fetch functions to sniff the hidden by (author) field, the backend strips identifying data before serving payloads:

posts.forEach(post => {
  if (post.anonymous) post.by = post.anonymous_name;
});

Security: The true author identity is replaced with the anonymous UUID payload on the fly. This ensures raw creator data remains accessible exclusively to administrators for moderation purposes.
Optimization: This uses .lean() to fetch plain JavaScript objects directly, bypassing heavy Mongoose documents and preventing accidental database writes.

Performance Optimization

Pagination Constraints: Payloads are strictly limited to 50 posts per request cycle.
Navigation: Client-side navigation relies on next/previous pagination states to ensure low latency and high speed.

3. Core Feature Matrix

Posting & Filtering

Posting Options: Supports anonymous publishing or making a post private (visible only to you).
Interactions: Native support for likes, reports, convert posts to image, comments, and forks.
Collections: Custom user collections featuring full CRUD support (Create, Read, Update, Delete).
Advanced Filters: Filter posts by text/image content, forks, and creator.
Reels Filter: Video filtering sorted by content creator profiles.

Data Portability

Export Posts Data: Download post history in JSONL format (Minimum 15 post, Maximum 300 post, if you have less than 15, just type 15 and it will get what it can find).
Import Posts Data: Upload Bulk posts (Each post MUST not already exist on the platform, or it will be skipped).

User & Social Tools

Search Infrastructure: Indexed query lookups for system users and connections.
Profile Customization: Access to a curated matrix of custom emojis: 😎 🌸 👧🏿 👦🏿 🐑 🐣 🐔 🧆 🥚 👩🏿 👨🏿 🍳 🥒 🚗 👮 👮‍♀️ 🕵️‍♀️ 🎅 🤶 ✨ 🎉 🎊 🎀 🎥 🍔 👨🏻 👳🏻‍♂️ 👳🏻‍♀️ 👩🏻‍🦱 😂
Post Management: Full content editing and deletion capabilities.
Image Editor: Integrated image editor for post attachments.

Security & Account Lifecycle

Password Recovery: Time-limited recovery codes featuring manual administrative revocation.
Delete Account: Complete account purging removes user metadata while converting active public records into anonymous "ghost posts."
UI Themes: Dark and light mode styling toggles.
Support Engine: Live-chat support desks powered by the tawk.to API wrapper and docs.

4. Architectural Enhancements (In Progress)

The current codebase is migrating away from legacy offset pagination (skip().limit()) toward an optimized, index-backed Cursor-Based Pagination model leveraging chronological object IDs (_id) to ensure linear query performance at scale.

5. Getting Started

Prerequisites

Node.js v16+
MongoDB (Local instance or Atlas cluster)
npm package manager

Installation

Clone the repository:

   git clone https://github.com/Hfs2024/BlockSocial/

Navigate to the project root:

   cd BlockSocial

Install dependencies:

   npm install

Configure your environment variables in a .env file:

   MONGO_URI=your_mongodb_connection_string
   ADMIN_PASSWORD=your_hashed_password
   ADMIN_USERNAME=your_admin_username
   SESSION_SECRET=your_secure_session_secret

Initialize the server application:

   node server.js

Project Structure

/private - Administrative authentication dashboards
/public - Client-side presentation layer and assets
/ - Core application architecture and server routing logic

Contributions, bug reports, and repository stars are highly appreciated!

Architecting Block: Building a Custom Social Network, Theme Engine, and more

Codemaster_121482 — Fri, 19 Jun 2026 12:47:23 +0000

What is BlockSocial?

Github repo link: https://github.com/Hfs2024/BlockSocial

1. User Scenario & Workflow (The Fork System)

The Setup

User A: Publishes a post saying: "I love drinking Pepsi every day."
User B: Is shy, but wants to tell their friend this is an unhealthy habit.
User C: Is a malicious user who gossips.

The Fork Mechanism

User B creates a fork to discuss this post with User C via the POST /api/share endpoint.

Data Copying: It copies the entire post contents except comments, likes, reports, and downloads.
Chain Prevention: You can fork a forked post, but the system will fork the original source root, not the fork itself.
Scope: It shares with only one user at a time to prevent unexpected group creation.

Database Payload for Forks

The following fields are appended to the document structure:

{
  "share": true,
  "shareId": "post._id", // The original post ID
  "sharedBy": "req.currentUser.username", // The user who shared or forked
  "shareTo": "shareTo", // The friend receiving the share
  "shareComment": "comment || ''" // A quick comment on the post
}

Moderation & Enforcement Workflow

If User C breaks trust and leaks the conversation, User B can report them via the POST /report/user endpoint.

Verification: Administrators review interaction history to verify the violation.
Account Termination: Bad users receive a permanent lifetime account ban.
Data Scrubbing: All associated messages from the malicious user are removed.
Blacklisting: The account is fully banned.
The Blindspot: Face-to-face interactions remain outside system moderation boundaries 😅

2. Technical Implementation Details

Dynamic Comment Identity Logic

When a user submits a comment via POST /api/comment, the application evaluates the id payload from req.body to locate the post and applies the following identity check:

(result.anonymous && result.by === req.currentUser.username) ? result.anonymous_name : req.currentUser.username

Logic: If it is an anonymous post and the author is commenting, the system displays their unique UUID (result.anonymous_name). Otherwise, it returns their standard username.

API Data Masking (Anti-Data Leaking)

To prevent tech-savvy clients from using custom fetch functions to sniff the hidden by (author) field, the backend strips identifying data before serving payloads:

posts.forEach(post => {
  if (post.anonymous) post.by = post.anonymous_name;
});

Security: The true author identity is replaced with the anonymous UUID payload on the fly. This ensures raw creator data remains accessible exclusively to administrators for moderation purposes.
Optimization: This uses .lean() to fetch plain JavaScript objects directly, bypassing heavy Mongoose documents and preventing accidental database writes.

Performance Optimization

Pagination Constraints: Payloads are strictly limited to 50 posts per request cycle.
Navigation: Client-side navigation relies on next/previous pagination states to ensure low latency and high speed.

3. Core Feature Matrix

Posting & Filtering

Posting Options: Supports anonymous publishing or making a post private (visible only to you).
Interactions: Native support for likes, reports, convert posts to image, comments, and forks.
Collections: Custom user collections featuring full CRUD support (Create, Read, Update, Delete).
Advanced Filters: Filter posts by text/image content, forks, and creator.
Reels Filter: Video filtering sorted by content creator profiles.

Data Portability

Export Posts Data: Download post history in JSONL format (Minimum 15 post, Maximum 300 post, if you have less than 15, just type 15 and it will get what it can find).
Import Posts Data: Upload Bulk posts (Each post MUST not already exist on the platform, or it will be skipped).

User & Social Tools

Search Infrastructure: Indexed query lookups for system users and connections.
Profile Customization: Access to a curated matrix of custom emojis: 😎 🌸 👧🏿 👦🏿 🐑 🐣 🐔 🧆 🥚 👩🏿 👨🏿 🍳 🥒 🚗 👮 👮‍♀️ 🕵️‍♀️ 🎅 🤶 ✨ 🎉 🎊 🎀 🎥 🍔 👨🏻 👳🏻‍♂️ 👳🏻‍♀️ 👩🏻‍🦱 😂
Post Management: Full content editing and deletion capabilities.
Image Editor: Integrated image editor for post attachments.

Security & Account Lifecycle

Password Recovery: Time-limited recovery codes featuring manual administrative revocation.
Delete Account: Complete account purging removes user metadata while converting active public records into anonymous "ghost posts."
UI Themes: Dark and light mode styling toggles.
Support Engine: Live-chat support desks powered by the tawk.to API wrapper and docs.

4. Architectural Enhancements (In Progress)

5. Getting Started

Prerequisites

Node.js v16+
MongoDB (Local instance or Atlas cluster)
npm package manager

Installation

Clone the repository:

   git clone https://github.com/Hfs2024/BlockSocial/

Navigate to the project root:

   cd BlockSocial

Install dependencies:

   npm install

Configure your environment variables in a .env file:

   MONGO_URI=your_mongodb_connection_string
   ADMIN_PASSWORD=your_hashed_password
   ADMIN_USERNAME=your_admin_username
   SESSION_SECRET=your_secure_session_secret

Initialize the server application:

   node server.js

Project Structure

/private - Administrative authentication dashboards
/public - Client-side presentation layer and assets
/ - Core application architecture and server routing logic

Contributions, bug reports, and repository stars are highly appreciated.

Wanna free chess training? I built a new chess.com clone!

Codemaster_121482 — Fri, 03 Apr 2026 07:46:17 +0000

Wanna Free Chess Training? I Built a New Chess.com Clone! ♟️

Hey fellow devs! I just finished a project I’m pretty stoked about: a fully functional Chess.com clone built with HTML, CSS, and JavaScript.

While there are plenty of chess apps out there, I wanted to build one that was clean, fast, and completely free for training.

🛠️ The Tech Stack

Instead of reinventing the wheel (and failing at complex move validation), I leaned on two heavy hitters in the JS chess world:

Chessboard.js: This handles the "look" of the game—the board, the pieces, and the drag-and-drop animations.
Chess.js This is the "brain." It handles the move validation, game state, checkmate detection, and FEN/PGN generation.

🚀 Key Features

Legal Move Enforcement: You can't make an illegal move. The "brain" (Chess.js) validates every drag before the board updates.
Move Highlighting: Just like on Chess.com, the board highlights where you moved from and where you landed.
Game Status: Real-time alerts for Check, Checkmate, or Draw.
Responsive Design: Practice your endgames on your phone or your desktop.

🧠 The Best Moment

The trickiest part was syncing the UI with the logic. When a user drops a piece, I have to:

Ask chess.js if the move is legal.
If it is, update the internal game state.
Tell chessboard.js to snap the piece to the new square.
Check if the game is over.

It’s a perfect example of the Model-View-Controller pattern in action!

💡 What's Next?

The core game is solid, but I'm planning to add:

[ ] Real time play: To play against an real people.
[ ] UI/UX improvment: Add theme toggle + more board and piece theme.
[ ] Timer: For those high-stakes blitz matches.

🔗 Check it out!

Try it: Chessmasterapp.online

I’d love to hear your feedback! How would you handle the Real time play integration—maybe Backend API?

Happy coding (and checkmating)! 👑

[Boost]

Codemaster_121482 — Wed, 01 Apr 2026 15:06:43 +0000

Codemaster_121482

Apr 1

I Built a Programming Language so You Don’t Have to Stress: Meet SphereLang

#webdev #programming #javascript #opensource

1 min read

New programming language

Codemaster_121482 — Wed, 01 Apr 2026 14:55:18 +0000

[Boost]

Codemaster_121482 — Wed, 01 Apr 2026 14:50:19 +0000

Post not found or has been removed.