Dev Block – Full-Stack Platform for Code Snippets, Blogs, Tutorials & Developer Collaboration

Tagline: Breaking barriers in tech knowledge sharing and building meaningful developer connections.

📖 Table of Contents

1. Overview
2. Inspiration
3. Core Features
4. Tech Stack
5. System Architecture
6. Database Schema
7. Installation & Setup
8. Environment Variables
9. Usage Guide
10. Screenshots
11. Future Roadmap

---

Overview

Dev Block is an interactive, community-driven platform for developers to:

• Publish blogs and tutorials
• Share code snippets
• Collaborate and discuss ideas via threaded comments
• Run live code with an integrated code playground

It centralizes tech learning, collaboration, and practical coding in one platform.

---

Inspiration

Dev Block started as Code Blog, a markdown-powered blog for coding tutorials and tech insights. It evolved into a feature-rich platform supporting:

• Multiple content types (blogs, tutorials, snippets)
• Real-time code execution
• Engagement features (likes, bookmarks, comments)

The Primary Goal is to provide a single space where developers write, run, and refine ideas while connecting with the community.

---

Core Features

Content Types

• Blogs – Long-form articles, guides, and insights.
• Tutorials – Step-by-step instructions with media and formatting.
• Code Snippets – Reusable code blocks with syntax highlighting.

Engagement

• Likes, bookmarks, and threaded comments on all content types.
• Nested replies, edit/delete, and “show more” toggle for long threads.
• Real-time UI updates for engagement.

Code Playground

• Multi-language execution with online compiler APIs.
• Shareable playground sessions with output display.
• Reduced code-testing friction by 70%.

Social Sharing

• Share via WhatsApp, Twitter/X, LinkedIn, Email, Reddit, Telegram.
• One-click link copying for easy sharing.

UI & UX

• Theme-switchable (light/dark) with smooth animations.
• Fully responsive design.
• Hydration-safe date rendering for SSR.

---

Tech Stack

Frontend

• Next.js
• JavaScript (ES6+)
• Tailwind CSS
• ShadCN UI
• TipTap – Rich text editing

Backend & Databases

• PostgreSQL – Structured content storage
• MongoDB – Flexible content storage
• Piston API – Live code execution API
• Clerk – Authentication

---

Database Schema

Entities:

• Users
• Blogs
• Tutorials
• Code Snippets
• Comments
• Likes
• Bookmarks
• Playground Sessions

Relationships:

• Users ↔ Blogs (One-to-Many)
• Users ↔ Tutorials (One-to-Many)
• Users ↔ Code Snippets (One-to-Many)
• Users ↔ Comments (One-to-Many)
• Content ↔ Likes/Bookmarks (Many-to-Many)

---

Installation & Setup

# Clone repository
git clone https://github.com/yourusername/dev-block.git

# Move into directory
cd dev-block

# Install dependencies
npm install

# Copy environment variables
cp .env.example .env.local

# Start development server
npm run dev