🚀 DevBlog - Modern Tech & Architecture Blog

DevBlog is a high-performance, premium tech blog built for deep dives into software architecture, ethical hacking, and AI. It features a futuristic dark aesthetic, interactive guest features, and a robust authentication system.

🛠️ Tech Stack

• Astro 5.0+: The web framework for content-driven websites. Focused on performance with zero-JavaScript by default.
• Supabase: Backend-as-a-Service providing PostgreSQL database, Secure Auth, and Real-time capabilities.
• Tailwind CSS 4.0: A utility-first CSS framework for rapid UI development with a custom premium design system.
• Vite: Next-generation frontend tooling for a fast development experience.
• TypeScript: Static type checking for robust and maintainable code.

🏗️ System Architecture

DevBlog follows a modern decoupled architecture, combining static content with dynamic real-time features.

🧩 Architecture Diagram

graph TB
    subgraph "🌐 Client Layer"
        UI["Astro UI (SSR/Hybrid)"]
        SDK["Supabase JS SDK"]
        LS["Local Storage (Guest State)"]
    end

    subgraph "⚡ Edge / Server Layer"
        Astro["Astro Server Engine"]
        API["Edge Functions / RPC"]
    end

    subgraph "🔐 Security & Logic"
        Auth["Supabase Auth"]
        RLS["RLS & RBAC (Admin/User policies)"]
    end

    subgraph "💾 Persistence Layer"
        DB[("PostgreSQL Database")]
        Prisma["Prisma ORM (Migrations)"]
    end

    %% Interactions
    UI <--> SDK
    SDK <--> Auth
    SDK <--> RLS
    RLS <--> DB
    UI <--> LS
    
    Astro -->|SSG| UI
    Astro <--> API
    API <--> DB
    
    Prisma -.->|Schema Sync| DB

    %% Styling
    classDef client fill:#e1f5fe,stroke:#01579b,stroke-width:2px;
    classDef server fill:#fff3e0,stroke:#e65100,stroke-width:2px;
    classDef security fill:#ede7f6,stroke:#311b92,stroke-width:2px;
    classDef storage fill:#e8f5e9,stroke:#1b5e20,stroke-width:2px;

    class UI,SDK,LS client;
    class Astro,API server;
    class Auth,RLS security;
    class DB,Prisma storage;

Loading

⚙️ How it works:

• Static First: Blog posts are pre-rendered during build time for maximum speed and SEO.
• Dynamic Layers: Interactivity (Likes, Comments, Bookmarks) is handled via client-side scripts connecting directly to Supabase.
• Secure Auth: User management and the "Danger Zone" use Supabase Auth and secure PostgreSQL functions.
• Data Integrity: Prisma handles the schema definitions and migrations, while Supabase RLS ensures only authorized users can modify their data.

📂 Project Structure

The project follows a modular and organized structure:

/
├── src/
│   ├── components/       # Reusable UI components
│   │   ├── PostSidebarLeft.astro   # Interactive sidebar (Likes, Comments, Bookmarks)
│   │   ├── PostSidebarRight.astro  # Table of Contents and Related Posts
│   │   ├── Comments.astro          # Real-time comment system with Admin features
│   │   ├── ArticleCard.astro       # Blog post layout card
│   │   ├── Header.astro            # Dynamic navigation
│   │   └── Footer.astro            # Site footer
│   ├── content/          # Markdown/MDX content for blog posts
│   │   └── posts/        # Individual article files
│   ├── layouts/          # Base HTML structures (Layout.astro)
│   ├── lib/              # Utility configurations
│   │   └── supabase.ts   # Supabase client configuration
│   ├── pages/            # View routes
│   │   ├── posts/        # Dynamic blog post routes ([...slug].astro)
│   │   ├── index.astro   # Homepage
│   │   ├── login.astro   # User login
│   │   ├── register.astro# User registration
│   │   └── settings.astro# Account management (Update profile, Delete account)
│   └── styles/           # Global design tokens and Tailwind configuration
├── public/               # Static assets (images, icons)
├── prisma/               # Database ORM
│   └── schema.prisma     # Database schema definition
├── supabase_security_policies.sql # SQL for RLS policies, Profiles table, and Admin setup
└── package.json          # Project dependencies and scripts

✨ Key Features

• Interactive Post Sidebar: Real-time counter for Likes, Comments, and Bookmarks.
• Guest Support: Anonymous users can interact (likes, favorites, comments) via local tracking.
• Advanced Auth: Secure Registration, Login, and personalized "My Activity" pages.
• Danger Zone: A secure, custom-built account deletion flow with anti-cache RPC logic.
• Premium UI: Futuristic design with Aldrich typography, glassmorphism, and smooth transitions.

🚀 Getting Started

1. Install dependencies:

   npm install

2. Configure environment: Create a .env file with your Supabase credentials:

   PUBLIC_SUPABASE_URL=your_url
   PUBLIC_SUPABASE_ANON_KEY=your_key

3. Run development server:

   npm run dev

🚀 Deployment (Vercel)

1. Environment Variables: In your Vercel project settings, add the following:
   • PUBLIC_SUPABASE_URL: Your Supabase Project URL.
   • PUBLIC_SUPABASE_ANON_KEY: Your Supabase Anonymous API Key.
2. Redeploy: Ensure you redeploy the project after adding these variables to apply the changes.

🤝 Contributing

Developed with ❤️ for the Tech Community.

---

📜 Licencia

Este proyecto está bajo la licencia MIT. Puedes usarlo libremente, siempre citando al autor.