[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6},"actionData","errors","routes/custom-page",{"_7":8},"page",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":22,"_23":22,"_24":-5,"_25":26},"id","6bf128ce-ab38-4724-b4c5-e3089384300a","title","Cybersecurity Before Code: How Vibe-Coding Helped Me Build Real Full-Stack Systems","slug","vibecoding-full-stack","html_content","

Complete\nTechnical Architecture Documentation

Satvik’s Cybersecurity\nPortfolio Website

1. Executive Summary

This is a modern, full-stack cybersecurity portfolio website built\nwith a React frontend and Supabase backend. It features a hacker-themed\naesthetic with Matrix-style green accents, animated backgrounds, and a\ncomprehensive content management system for blogs, projects,\ncertifications, and resume management.

Key Capabilities: - Public portfolio with dynamic\ncontent - Blog platform with series, comments, and engagement tracking -\nAdmin panel for content management - SEO-optimized with social media\nsharing support - Analytics and visitor tracking - Resume version\nmanagement with download tracking

2. Technology Stack Overview

Frontend Stack

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Technology	Version	Purpose
React	18.3.1	UI Framework
Vite	Latest	Build Tool & Dev Server
TypeScript	Latest	Type Safety
TailwindCSS	Latest	Utility-first CSS
Framer Motion	12.10.0	Animations
React Router DOM	6.26.2	Client-side Routing
TanStack Query	5.56.2	Data Fetching & Caching
React Helmet Async	2.0.5	SEO Meta Tags
Radix UI	Various	Accessible UI Components
Lucide React	0.462.0	Icons
React Markdown	10.1.0	Markdown Rendering
Recharts	2.12.7	Charts & Analytics

Backend Stack

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Technology	Purpose
Supabase	Backend-as-a-Service
PostgreSQL	Database
Supabase Auth	Authentication (Google OAuth)
Deno Edge Functions	Serverless Functions
Cloudflare R2	File Storage (S3-compatible)
ZeptoMail	Email Service

3. Frontend Architecture

Directory Structure

src/\n├── components/           # Reusable UI components\n│   ├── admin/           # Admin panel components\n│   │   ├── analytics/   # Analytics sub-components\n│   │   └── forms/       # Form components\n│   └── ui/              # shadcn/ui components\n├── contexts/            # React Context providers\n├── hooks/               # Custom React hooks\n├── integrations/        # External service integrations\n│   └── supabase/        # Supabase client & types\n├── pages/               # Route page components\n├── types/               # TypeScript type definitions\n├── lib/                 # Utility functions\n├── data/                # Static data files\n└── config/              # Configuration files

State Management Strategy

React Query (TanStack Query): Server state\nmanagement\n
- Configured with refetchOnWindowFocus: false and\nretry: false
- Handles data fetching, caching, and synchronization
React Context: Authentication state\n
- AuthContext: Manages user session, admin status, and\nauth methods
Local State: Component-specific UI state\n
- Using useState and useReducer for form\ndata, filters, modals

Routing Architecture

// Public Routes\n/                        → Home (Index.tsx)\n/about                   → About page\n/projects                → Projects listing\n/projects/:slug          → Project details\n/skills                  → Skills page\n/blog                    → Blog listing with tabs (Blogs/Series)\n/blog/:slug              → Individual blog post\n/series/:slug            → Series details\n/certifications          → Certifications page\n/contact                 → Contact form\n\n// Admin Routes (Protected)\n/admin                   → Dashboard\n/admin/projects          → Projects management\n/admin/blog              → Blog management\n/admin/series            → Series management\n/admin/analytics         → Analytics dashboard\n/admin/logs              → Activity logs\n/admin/tracking          → Tracking sources\n/admin/comments          → Comment moderation\n/admin/certifications    → Certifications management\n/admin/messages          → Contact messages\n/admin/emails            → Email management\n/admin/resumes           → Resume management\n/admin/profile           → Profile settings\n/admin/settings          → Site settings\n/admin/login             → Admin login page

Component Architecture\nPattern

Container/Presentation Pattern: - Pages act as\ncontainers (data fetching, state management) - Components handle\npresentation (UI rendering)

Background Components (Visual Effects): -\nHackerBackground: Matrix-style falling characters -\nHackerGridBackground: Animated grid lines -\nParticlesBackground: Floating particles -\nMatrixBackground: Code rain effect -\nEnhancedBackground: Gradient overlays -\nDottedBackground: Dotted pattern overlay

4. Backend Architecture

Supabase Configuration

Project ID: eaznwapedisfopcqmakp\nRegion: Default Supabase region

Backend Services

Database: PostgreSQL with Row Level Security\n(RLS)
Authentication: Supabase Auth with Google\nOAuth
Edge Functions: 9 serverless functions (Deno\nruntime)
Storage: Cloudflare R2 (external, via edge\nfunction)

Data Flow Architecture

┌─────────────┐     ┌─────────────┐     ┌─────────────┐\n│   React     │────▶│  Supabase   │────▶│ PostgreSQL  │\n│   Client    │     │   Client    │     │  Database   │\n└─────────────┘     └─────────────┘     └─────────────┘\n       │                   │\n       │                   ▼\n       │            ┌─────────────┐\n       └───────────▶│    Edge     │\n                    │  Functions  │\n                    └─────────────┘\n                           │\n                    ┌──────┴──────┐\n                    ▼             ▼\n              ┌──────────┐  ┌──────────┐\n              │Cloudflare│  │ ZeptoMail│\n              │    R2    │  │   API    │\n              └──────────┘  └──────────┘

5. Database Schema Design

Entity Relationship Diagram

┌─────────────────┐      ┌─────────────────┐\n│   blog_posts    │──────│  blog_comments  │\n│─────────────────│      │─────────────────│\n│ id (PK)         │      │ id (PK)         │\n│ title           │      │ blog_post_id(FK)│\n│ slug (unique)   │      │ name            │\n│ content         │      │ email           │\n│ excerpt         │      │ comment         │\n│ category        │      │ is_approved     │\n│ published       │      └─────────────────┘\n│ featured        │\n│ image_url       │      ┌─────────────────┐\n│ views_count     │──────│blog_interactions│\n│ likes_count     │      │─────────────────│\n│ shares_count    │      │ id (PK)         │\n│ preview_token   │      │ blog_post_id(FK)│\n│ preview_secret  │      │ interaction_type│\n└─────────────────┘      │ session_id      │\n        │                │ source          │\n        │                │ metadata (JSONB)│\n        │                └─────────────────┘\n        │\n┌───────┴─────────┐      ┌─────────────────┐\n│  blog_related   │      │  blog_resources │\n│─────────────────│      │─────────────────│\n│ blog_post_id    │      │ blog_post_id(FK)│\n│ related_blog_id │      │ title           │\n│ display_order   │      │ url             │\n└─────────────────┘      │ description     │\n                         └─────────────────┘\n\n┌─────────────────┐      ┌─────────────────┐\n│     series      │──────│  series_blogs   │\n│─────────────────│      │─────────────────│\n│ id (PK)         │      │ series_id (FK)  │\n│ title           │      │ blog_post_id(FK)│\n│ slug            │      │ display_order   │\n│ description     │      └─────────────────┘\n│ image_url       │\n│ display_order   │\n└─────────────────┘\n\n┌─────────────────┐      ┌─────────────────┐\n│    projects     │      │ certifications  │\n│─────────────────│      │─────────────────│\n│ id (PK)         │      │ id (PK)         │\n│ title           │      │ name            │\n│ slug            │      │ slug            │\n│ description     │      │ issuer          │\n│ content         │      │ description     │\n│ image           │      │ image_url       │\n│ tags (ARRAY)    │      │ verify_url      │\n│ github          │      │ issue_date      │\n│ link            │      │ expiry_date     │\n│ status          │      │ credential_id   │\n│ featured        │      │ status          │\n│ category        │      │ featured        │\n│ progress        │      │ display_order   │\n└─────────────────┘      └─────────────────┘\n\n┌─────────────────┐      ┌─────────────────┐\n│    profiles     │      │   experience    │\n│─────────────────│      │─────────────────│\n│ id (PK)         │      │ id (PK)         │\n│ user_id (FK)    │      │ user_id (FK)    │\n│ name            │      │ position        │\n│ title           │      │ company         │\n│ bio             │      │ period          │\n│ email           │      │ location        │\n│ phone           │      │ description     │\n│ github          │      └─────────────────┘\n│ linkedin        │\n│ location        │      ┌─────────────────┐\n└─────────────────┘      │    education    │\n                         │─────────────────│\n┌─────────────────┐      │ id (PK)         │\n│     skills      │      │ user_id (FK)    │\n│─────────────────│      │ degree          │\n│ id (PK)         │      │ institution     │\n│ name            │      │ period          │\n│ category        │      │ score           │\n│ percentage      │      │ description     │\n└─────────────────┘      └─────────────────┘\n\n┌─────────────────┐      ┌─────────────────┐\n│    resumes      │──────│ resume_versions │\n│─────────────────│      │─────────────────│\n│ id (PK)         │      │ id (PK)         │\n│ name            │      │ resume_id (FK)  │\n│ file_url        │      │ name            │\n│ is_main         │      │ file_url        │\n│ download_count  │      │ version_number  │\n└─────────────────┘      │ notes           │\n                         └─────────────────┘\n\n┌─────────────────┐      ┌─────────────────┐\n│    messages     │      │ newsletter_subs │\n│─────────────────│      │─────────────────│\n│ id (PK)         │      │ id (PK)         │\n│ name            │      │ email           │\n│ email           │      │ source          │\n│ message         │      │ is_active       │\n│ is_read         │      │ metadata (JSONB)│\n└─────────────────┘      └─────────────────┘\n\n┌─────────────────┐      ┌─────────────────┐\n│tracking_sources │      │  site_settings  │\n│─────────────────│      │─────────────────│\n│ id (PK)         │      │ id (PK)         │\n│ name            │      │ setting_key     │\n│ code            │      │ setting_value   │\n│ blog_post_id    │      └─────────────────┘\n│ is_global       │\n└─────────────────┘

Row Level Security (RLS)\nPolicies

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Table	SELECT	INSERT	UPDATE	DELETE
blog_posts	Published only	Admin	Admin	Admin
blog_comments	Approved (public)	Anyone	Admin	Admin
blog_interactions	Public	Anyone	-	-
projects	Public	Admin	Admin	Admin
certifications	Public	Authenticated	Authenticated	Authenticated
messages	-	Anyone	-	-
resumes	Public	Authenticated	Authenticated	Authenticated
skills	Public	Admin	Admin	Admin
profiles	Public	Own user	Own user	Own user

Database Functions &\nTriggers

update_blog_analytics(): Trigger on\nblog_interactions to update aggregate counts
ensure_single_main_resume(): Ensures only one\nresume is marked as main
increment_resume_download(): RPC function to track\nresume downloads
update_series_updated_at(): Updates series\ntimestamp on modification

6. Authentication System

Authentication Flow

┌──────────┐     ┌──────────┐     ┌──────────┐     ┌──────────┐\n│  User    │────▶│  Login   │────▶│  Google  │────▶│ Callback │\n│ (Admin)  │     │  Page    │     │  OAuth   │     │  Handle  │\n└──────────┘     └──────────┘     └──────────┘     └──────────┘\n                                                         │\n                                                         ▼\n                                                   ┌──────────┐\n                                                   │  Check   │\n                                                   │ isAdmin  │\n                                                   └──────────┘\n                                                    │       │\n                                              ┌─────┘       └─────┐\n                                              ▼                   ▼\n                                        ┌──────────┐        ┌──────────┐\n                                        │  Admin   │        │ RickRoll │\n                                        │Dashboard │        │  Modal   │\n                                        └──────────┘        └──────────┘

Implementation Details

// AuthContext.tsx - Key Configuration\nconst AUTHORIZED_EMAIL = '[ admin@gmail.com or your personal mail ]';\n\n// Admin check logic\nif (session?.user?.email === AUTHORIZED_EMAIL) {\n  setIsAdmin(true);\n}

Security Features

Single Admin User: Hardcoded email for admin\naccess
OAuth Only: No password-based authentication
Session Persistence: Using localStorage with\nauto-refresh
Protected Routes: ProtectedRoute component wraps\nall admin routes
Easter Egg: Non-admin users see a RickRoll\nmodal

7. Edge Functions

Functions Overview

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Function	Purpose	Auth Required
`track-visit`	Records blog views with geolocation	No
`track-share`	Records blog shares with platform info	No
`blog-meta`	Generates OG meta tags for social sharing	No
`cert-meta`	Generates OG meta tags for certifications	No
`generate-sitemap`	Generates dynamic XML sitemap	No
`generate-rss`	Generates RSS feed for blog	No
`send-zeptomail`	Sends emails via ZeptoMail API	No
`send-discord-notification`	Sends Discord notifications	No
`upload-r2`	Uploads files to Cloudflare R2	No

Edge Function Architecture

// Standard Edge Function Pattern\nimport { serve } from "https://deno.land/std@0.168.0/http/server.ts";\n\nconst corsHeaders = {\n  'Access-Control-Allow-Origin': '*',\n  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',\n};\n\nserve(async (req) => {\n  // Handle CORS preflight\n  if (req.method === 'OPTIONS') {\n    return new Response(null, { headers: corsHeaders });\n  }\n\n  try {\n    // Function logic here\n    return new Response(\n      JSON.stringify({ success: true }),\n      { headers: { ...corsHeaders, 'Content-Type': 'application/json' } }\n    );\n  } catch (error) {\n    return new Response(\n      JSON.stringify({ error: error.message }),\n      { status: 400, headers: corsHeaders }\n    );\n  }\n});

Secrets Configuration

R2_ACCESS_KEY_ID         # Cloudflare R2 access key\nR2_SECRET_ACCESS_KEY     # Cloudflare R2 secret\nR2_BUCKET_NAME           # R2 bucket name\nR2_ACCOUNT_ID            # Cloudflare account ID\nZEPTOMAIL_API_TOKEN      # ZeptoMail API token\nSUPABASE_URL             # Auto-injected\nSUPABASE_ANON_KEY        # Auto-injected\nSUPABASE_SERVICE_ROLE_KEY # For elevated permissions

8. Page-by-Page Breakdown

Home Page (Index.tsx)

Purpose: Main landing page showcasing portfolio\nhighlights

Components Used: - HeroSection (animated intro with\ntypewriter effect) - AboutSection (brief bio with background effects) -\nSkillsSection (skill bars by category) - ProjectsSection (featured\nprojects) - WorkingProjectsSection (in-progress projects) -\nFeaturedBlogsSection (latest blog posts) - ContactSection (contact form)\n- Multiple background components

Data Sources: - projects (featured) - skills -\nblog_posts (published, featured) - profiles

Blog Page (Blog.tsx)

Purpose: Lists all blog posts and series with\nfiltering

Features: - Tabbed interface (Blogs / Series) -\nSearch functionality - Category filtering - Sort options (newest,\noldest, title) - Featured posts prioritization

Components: - BlogFilters - AllBlogsSection -\nSeriesSection

Blog Post Page (BlogPost.tsx)

Purpose: Individual blog post with full content

Features: - Markdown rendering with syntax\nhighlighting - Table of Contents (auto-generated from headings) - View\ntracking - Read time tracking - Like/Share functionality - Comments\nsection - Related posts - Resources section - Series navigation (if part\nof series) - Preview mode with secret key protection

Tracking Implementation:

// Session-based tracking to prevent duplicates\nconst getSessionId = () => {\n  let sessionId = sessionStorage.getItem('blog_session_id');\n  if (!sessionId) {\n    sessionId = `session_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;\n    sessionStorage.setItem('blog_session_id', sessionId);\n  }\n  return sessionId;\n};

Certifications Page\n(Certifications.tsx)

Purpose: Display professional certifications

Sections: - Currently Pursuing (status =\n‘in_progress’) - Earned Certifications (status != ‘in_progress’)

Features: - Modal for detailed view - Share\nfunctionality - Verify links - Featured badges

9. Admin Panel Architecture

Admin Layout Structure

/admin\n├── Header (user info, navigation, sign out)\n├── Sidebar (mobile) / Horizontal Nav (desktop)\n├── Content Area (Outlet for child routes)\n└── Bottom Navigation (mobile)

Admin Components

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

Component	Purpose
Dashboard	Overview stats, quick actions
AdminProjects	CRUD for projects
AdminBlog	Blog post management with markdown editor
AdminSeries	Series management with blog ordering
AdminCertifications	Certification management
AdminComments	Comment moderation
AdminMessages	Contact form submissions
AdminAnalytics	Traffic and engagement analytics
AdminLogs	Activity logging
AdminTrackingSources	UTM/source code management
AdminEmails	Email campaign management
AdminResumes	Resume upload and version management
AdminProfile	Personal info management
AdminSettings	Site configuration

Key Admin Features

Blog Management: - Rich markdown editor - Image\nupload to R2 - Preview with secret protection - Related posts management\n- Resource links management - Series assignment

Resume Management: - PDF upload to R2 - Version\nhistory - Download tracking - Main resume toggle - Rename capability

10. SEO Implementation

SEO Component (SEO.tsx)

interface SEOProps {\n  title?: string;\n  description?: string;\n  keywords?: string;\n  image?: string;\n  imageAlt?: string;\n  url?: string;\n  ogType?: 'website' | 'article' | 'profile';\n  publishedTime?: string;\n  modifiedTime?: string;\n  author?: string;\n  section?: string;\n  canonicalUrl?: string;\n  tags?: string[];\n  readTime?: string;\n  breadcrumbs?: Array<{ name: string; url: string }>;\n}

Meta Tags Generated

Basic meta (title, description, keywords, author)
Open Graph (og:title, og:description, og:image, og:type)
Twitter Cards (summary_large_image)
Article-specific (published_time, author, section)
Canonical URL
Robots directives

Structured Data (JSON-LD)

Person schema
Website schema
WebPage schema
BlogPosting schema (for articles)
BreadcrumbList schema

\n\n

The blog-meta function serves optimized HTML to social\nmedia bots:

// Detects social media bots\nconst isSocialBot = /(facebookexternalhit|twitterbot|linkedinbot|...)/i.test(userAgent);\n\n// Serves rich HTML to bots, redirects users\nif (!isSocialBot) {\n  return new Response(null, { status: 302, headers: { Location: redirectUrl } });\n}

11. File Storage Strategy

Cloudflare R2 Integration

Endpoint: https://{ACCOUNT_ID}.r2.cloudflarestorage.com\nBucket: {R2_BUCKET_NAME}\nPublic URL: {r2-custom-domain-link}/{path}

Upload Flow

Client sends file to upload-r2 edge function
Edge function validates file (type, size)
Generates unique filename with timestamp
Signs request with AWS Signature V4
Uploads to R2 bucket
Returns public URL

Supported File Types

Images: JPEG, PNG, GIF, WebP, SVG
Documents: PDF
Max Size: 10MB

File Organization

{bucket}/\n├── uploads/           # General uploads\n├── blog-images/       # Blog post images\n├── certifications/    # Certification images\n├── resumes/           # Resume PDFs\n└── projects/          # Project images

12. Analytics and Tracking

Tracking System Architecture

┌─────────────┐     ┌─────────────┐     ┌─────────────┐\n│ Blog Post   │────▶│ track-visit │────▶│   blog_     │\n│ Page Load   │     │ Edge Func   │     │interactions │\n└─────────────┘     └─────────────┘     └─────────────┘\n                           │\n                           ▼\n                    ┌─────────────┐\n                    │ Geolocation │\n                    │    API      │\n                    └─────────────┘

Interaction Types

view: Page view (unique per session)
like: User likes a post
share: User shares a post
read_time: Time spent reading (tracked every 30\nseconds)

Metadata Captured

{\n  "ip": "xxx.xxx.xxx.xxx",\n  "geo": {\n    "city": "City Name",\n    "country": "Country",\n    "region": "Region"\n  }\n}

Source Tracking

URL parameter: ?s=source_code
Stored in blog_interactions.source
Managed via tracking_sources table

13. Scaling Considerations

Current Limitations

Single admin user (hardcoded email)
Supabase free tier limits
No CDN for main app (only R2 assets)

Recommended Scaling Steps

Phase 1: Optimize - Enable Supabase connection\npooling - Add database indexes on frequently queried columns - Implement\nclient-side caching strategies

Phase 2: Scale Database - Upgrade Supabase instance\nsize - Add read replicas for high-traffic scenarios - Implement query\noptimization

Phase 3: Scale Edge Functions - Monitor function\nexecution times - Implement rate limiting - Add request caching where\nappropriate

Phase 4: Global Distribution - Deploy to multiple\nregions - Add CDN for static assets - Implement edge caching

Performance\nOptimizations Already Implemented

React Query for client-side caching
Lazy loading components
Image optimization via R2/CDN
Efficient database queries with selective columns

14. Deployment Guide

Prerequisites

Supabase project created
Cloudflare R2 bucket configured
ZeptoMail account for emails
Google OAuth configured in Supabase
Custom domain configured

Environment Setup

Supabase Secrets (Edge Functions):

# Set via Supabase Dashboard or CLI\nsupabase secrets set R2_ACCESS_KEY_ID=xxx\nsupabase secrets set R2_SECRET_ACCESS_KEY=xxx\nsupabase secrets set R2_BUCKET_NAME=xxx\nsupabase secrets set R2_ACCOUNT_ID=xxx\nsupabase secrets set ZEPTOMAIL_API_TOKEN=xxx

Database Setup

Run all migrations in order
Configure RLS policies
Create database functions and triggers
Seed initial data (profile, site settings)

Frontend Deployment

Build the project: npm run build
Deploy to hosting (Lovable handles this automatically)
Configure custom domain
Update OAuth redirect URLs

Post-Deployment Checklist

Verify Google OAuth\nworks
Test admin login
Verify R2 uploads work
Test email sending
Verify sitemap\ngeneration
Test RSS feed
Check social media\npreviews
Verify analytics\ntracking

Monitoring

Supabase Dashboard for database metrics
Edge Function logs for debugging
Browser DevTools for frontend issues
Social media debuggers for OG previews

Appendix: Quick Reference

Key URLs

Production: https://satvik.live
Supabase Dashboard : [ REDACATED FOR PRIVACY ]
R2 Assets: [ REDACATED FOR PRIVACY ]

Contact for Issues

Developer: Satvik Vemulapalli
Email: contact@satvik.live

Version History

Document Version: 1.0
Last Updated: January 2026

\n","description","How a cybersecurity-first mindset and vibe-coding helped me build real full-stack systems—without mastering web development first.","is_published",true,"created_at","2026-01-07T07:24:14.621472+00:00","updated_at","og_image_url","hide_from_search",false]