BlogNetwork Pro

File Structure Guide

File Structure Guide

Understanding the project structure helps you navigate the codebase and make customizations. This guide explains the organization of files and directories.

Root Directory Structure

The project root contains configuration files, documentation, and main directories:

blogger/
package.json - Project dependencies and scripts
package-lock.json - Locked dependency versions
tsconfig.json - TypeScript configuration
next.config.ts - Next.js configuration
drizzle.config.ts - Database ORM configuration
postcss.config.mjs - PostCSS configuration
eslint.config.mjs - ESLint configuration
proxy.ts - Domain routing proxy
vercel.json - Vercel deployment configuration
.env.local - Environment variables (create this)
app/ - Next.js App Router pages
components/ - React components
lib/ - Core libraries and utilities
scripts/ - Database and utility scripts
public/ - Static assets
docs/ - Documentation files

App Directory (/app)

The app directory contains all Next.js pages and API routes using the App Router structure:

Domain Routes (/app/[domain])

app/[domain]/
layout.tsx - Domain layout with theme injection
page.tsx - Domain homepage
blog/[slug]/
page.tsx - Individual blog post pages
category/[slug]/
page.tsx - Category archive pages
tag/[slug]/
page.tsx - Tag archive pages
sitemap.xml/
route.ts - XML sitemap generation
rss.xml/
route.ts - RSS feed generation
robots.txt/
route.ts - Robots.txt generation
favicon.ico/
route.ts - Favicon generation
manifest.json/
route.ts - PWA manifest generation
apple-touch-icon.png/
route.ts - Apple touch icon generation

Admin Routes (/app/admin)

app/admin/
layout.tsx - Admin panel layout
page.tsx - Admin dashboard
login/
page.tsx - Admin login page
domains/
page.tsx - Domain management list
new/
page.tsx - Create new domain
[id]/edit/
page.tsx - Edit domain
posts/
page.tsx - Post management list
new/
page.tsx - Create new post
[id]/
page.tsx - Edit post
themes/ - Theme management
categories/ - Category management
content-plans/ - Content plan management
plugins/ - Plugin management

API Routes (/app/api)

app/api/
auth/ - Authentication endpoints
login/
route.ts - Login endpoint
logout/
route.ts - Logout endpoint
domains/ - Domain CRUD operations
posts/ - Post CRUD operations
themes/ - Theme CRUD operations
categories/ - Category CRUD operations
tags/ - Tag CRUD operations
content-plans/ - Content plan operations
jobs/ - AI generation job endpoints
contacts/ - Contact form submission
plugins/ - Plugin management endpoints
revalidate/ - Static page revalidation
cron/ - Cron job endpoints

Components Directory (/components)

React components organized by functionality:

components/
admin/ - Admin panel components
AdminNav.tsx - Admin navigation
DomainForm.tsx - Domain configuration form
PostForm.tsx - Post creation/editing form
ThemeForm.tsx - Theme configuration form
ContentEditor.tsx - Rich text editor
PluginConfigForm.tsx - Plugin configuration
CategoriesTable.tsx - Categories list
PluginsTable.tsx - Plugins list
advertising/ - Ad components
AdSenseAd.tsx - AdSense ad component
CTABasedAd.tsx - CTA-based ad component
InlineAdsContent.tsx - Inline ad insertion
analytics/ - Analytics components
GA4.tsx - Google Analytics 4 component
SiteHeader.tsx - Site header component
StickySidebar.tsx - Sticky sidebar component
EmailCaptureForm.tsx - Email capture form

Library Directory (/lib)

Core libraries and utilities:

lib/
db/ - Database utilities
client.ts - Database client connection
schema.ts - Database schema definitions
sql.ts - SQL utilities
auth/ - Authentication
auth.ts - Auth utilities
claude/ - Claude AI integration
client.ts - Claude API client
generator.ts - Content generation
prompts.ts - AI prompts
json-repair.ts - JSON repair utilities
plugins/ - Plugin system
core/ - Core plugin system
plugin-manager.ts - Plugin manager
plugin-registry.ts - Plugin registry
plugin-hooks.ts - Plugin hooks system
plugin-types.ts - TypeScript types
providers/ - Plugin providers
ai/ - AI provider plugins
marketing/ - Marketing provider plugins
analytics/ - Analytics provider plugins
advertising/ - Advertising provider plugins
social/ - Social provider plugins
index.ts - Plugin exports
seo/ - SEO utilities
meta.ts - Meta tag generation
schema.ts - JSON-LD schema generation
domain-meta.ts - Domain metadata
themes/ - Theme system
provider.tsx - Theme provider
utils.ts - Theme utilities
content/ - Content parsing
parser.ts - Content parser
cta/ - CTA generation
generator.ts - CTA generator
ai-generator.ts - AI CTA generation
errors/ - Error handling
api-error-handler.ts - API error handler
error-utils.ts - Error utilities

Scripts Directory (/scripts)

Database migration and utility scripts:

scripts/
seed.ts - Seed initial admin user
add-plugin-tables.ts - Add plugin system tables
add-ga4-column.ts - Add GA4 column to domains
add-category-ctas-table.ts - Add CTA table
add-author-columns.ts - Add author fields
register-bundled-plugins.ts - Register bundled plugins
package-plugin.sh - Plugin packaging script

Public Directory (/public)

Static assets served directly:

public/
favicon.ico - Default favicon
apple-touch-icon.png - Apple touch icon
site.webmanifest - PWA manifest
plugins.example.json - Example plugins JSON

Key Files Explained

proxy.ts

The core domain routing system. This file intercepts all requests, extracts the domain from the Host header, and routes to domain-specific pages. This is what enables multi-domain functionality.

lib/db/schema.ts

Defines all database tables and relationships using Drizzle ORM. This is where you'll find the structure of domains, posts, categories, themes, plugins, etc.

lib/plugins/core/

Core plugin system files. The plugin manager, registry, hooks system, and type definitions are here. This is the foundation of the extensible plugin architecture.

app/[domain]/layout.tsx

Domain-specific layout that injects theme CSS and applies domain configuration. This is where domain isolation happens at the presentation layer.

next.config.ts

Next.js configuration. Currently configures image domains for remote images. You can add custom configurations here.

Understanding the Domain Routing

The platform uses a proxy-based routing system:

  1. Request arrives with Host: example.com
  2. proxy.ts intercepts the request
  3. Domain is extracted and looked up in database
  4. URL is rewritten from /blog/post-slug to /example.com/blog/post-slug
  5. Domain layout applies theme and configuration
  6. Page component renders with domain-isolated data

Making Customizations

Theme Customization

To customize themes:

Component Customization

To customize components:

Adding Custom Routes

To add custom routes:

Important: Always backup your files before making customizations. Consider using version control (Git) to track changes.

Next Steps

Now that you understand the file structure: