🚀 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

This project follows a strict DevSecOps structure to isolate sensitive components from the public repository.

🔒 Core Architecture (GitLab - Private Lab)

/
├── configs/              # Sensitive configurations and DB rules
│   └── supabase_security_policies.sql
├── diagrams/             # Technical architecture assets
│   └── architecture.drawio
├── docs/                 # Documentation hub (Logo, CONTRIBUTING, SECURITY)
├── scripts/              # DevSecOps Automation Scripts
│   └── publish_public.ps1# Deployment sanitization script
├── src/                  # Core frontend source (Astro pages, components, layouts)
├── tests/                # CI/CD validations and mock e2e workflows
├── .gitlab-ci.yml        # Private Lab's Pipeline definitions
├── public/               # Static web assets
├── prisma/               # Database ORM schema
└── package.json          # Dependencies

🌐 Sanitized Architecture (GitHub - Public Portfolio)

Sensitive folders (tests/, configs/, scripts/, .gitlab-ci.yml) are stripped securely using the DevSecOps flow before the codebase is pushed to the public space.

🛡️ DevSecOps & Publishing Flow

The strategy enforces a Private Lab as Source of Truth model:

1. Development & CI/CD: All work is designed, committed, and tested privately in GitLab. The .gitlab-ci.yml pipeline covers security audits and tests.
2. Automated Sanitization: The script scripts/publish_public.ps1 is called to prepare the release.
3. Filtering: The script filters out CI setups, backend configuration structures, and validation test paths.
4. Public Portfolio Push: A force push of the sanitized main state is made to GitHub's main branch, updating the public portfolio without exposing sensitive laboratory implementations.

✨ 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.