Setting Up the Project

How to extract the codebase, understand the project structure, and boot the dev server.

Last updated:

Get the code

After purchase, you'll receive the source code as a zip file download. Extract it into your projects folder and open it in your terminal:

bash
unzip bloggfast.zip -d my-blog
cd my-blog

Tip

After extracting, create a new private GitHub repository and push the code there. This makes Vercel deployment a simple "connect repo" step and gives you version control.
bash
# Initialize git and push to your own private repo
git init
git add .
git commit -m "Initial commit from BloggFast"
git remote add origin https://github.com/your-org/my-blog.git
git push -u origin main

Project structure

Project layout
my-blog/
├── prisma/
│   ├── schema.prisma          # Full database schema (17 models, 6 enums)
│   └── seed.ts                # Seed script for initial data
├── public/                    # Static assets (images, fonts, icons)
├── sanity/
│   └── schemas/               # Sanity content type definitions
│       ├── post.ts            # Blog post schema
│       ├── author.ts          # Author schema
│       ├── category.ts        # Category schema
│       └── index.ts           # Schema registry
├── src/
│   ├── app/
│   │   ├── (marketing)/       # Public blog pages
│   │   │   ├── page.tsx       # Homepage with article feed
│   │   │   ├── article/[slug] # Individual article pages
│   │   │   ├── category/[slug]# Category listing pages
│   │   │   ├── tag/[slug]/    # Tag listing pages
│   │   │   ├── author/[slug]/ # Author profile pages
│   │   │   ├── latest/        # Latest articles
│   │   │   ├── trending/      # Trending articles
│   │   │   ├── editors-pick/  # Editor's pick articles
│   │   │   ├── search/        # Search page
│   │   │   └── layout.tsx     # Marketing layout (navbar + footer)
│   │   ├── (admin)/           # Protected admin dashboard
│   │   │   ├── admin/
│   │   │   │   ├── page.tsx           # Dashboard overview + stats
│   │   │   │   ├── articles/          # Article list, create, edit
│   │   │   │   ├── categories/        # Category management
│   │   │   │   ├── authors/           # Author management
│   │   │   │   ├── tags/              # Tag management
│   │   │   │   ├── subscribers/       # Email subscriber management
│   │   │   │   ├── generate/          # AI article generator
│   │   │   │   ├── generation-history/# AI generation history
│   │   │   │   └── settings/          # Site & AI settings
│   │   │   └── layout.tsx             # Admin layout (sidebar nav)
│   │   ├── (app)/             # Authenticated user pages
│   │   │   ├── profile/       # User profile page
│   │   │   ├── saved/         # Saved articles
│   │   │   ├── liked/         # Liked articles
│   │   │   └── layout.tsx
│   │   ├── (auth)/            # Auth pages
│   │   │   ├── sign-in/[[...stack]]/  # Sign in page
│   │   │   ├── sign-up/[[...stack]]/  # Sign up page
│   │   │   └── layout.tsx
│   │   ├── auth/[path]/       # Custom auth path handler
│   │   ├── studio/            # Embedded Sanity Studio
│   │   │   ├── [[...tool]]/   # Catch-all for Studio routes
│   │   │   └── layout.tsx     # Studio layout
│   │   ├── api/               # API route handlers
│   │   │   ├── auth/          # Neon Auth API endpoints
│   │   │   ├── generate/      # AI article generation endpoint
│   │   │   ├── generate-image/# AI cover image generation endpoint
│   │   │   ├── search/        # Article search endpoint
│   │   │   ├── subscribers/   # Email subscription endpoints
│   │   │   ├── views/         # Article view tracking endpoint
│   │   │   ├── rss/           # RSS feed endpoint
│   │   │   └── webhooks/      # Resend webhook handler
│   │   ├── layout.tsx         # Root layout (providers, fonts, theme)
│   │   ├── globals.css        # Global CSS with Tailwind v4 imports
│   │   ├── sitemap.ts         # Dynamic sitemap generation
│   │   ├── robots.ts          # robots.txt configuration
│   │   ├── error.tsx          # Global error page
│   │   ├── loading.tsx        # Global loading UI
│   │   └── not-found.tsx      # 404 page
│   ├── components/            # Reusable UI components
│   │   ├── ui/                # shadcn/ui base components
│   │   ├── admin/             # Admin dashboard components
│   │   ├── articles/          # Article card, detail, engagement
│   │   ├── layout/            # Navbar, footer, sidebar, theme toggle
│   │   ├── search/            # Search modal and input
│   │   ├── providers.tsx      # App-level context providers
│   │   └── subscribe-form.tsx # Newsletter subscription form
│   ├── actions/               # Next.js Server Actions
│   │   ├── articles.ts        # Article CRUD operations
│   │   ├── admin.ts           # Admin-specific operations
│   │   ├── ai-settings.ts     # AI configuration operations
│   │   ├── engagement.ts      # Engagement tracking
│   │   └── subscribe.ts       # Subscription management
│   ├── lib/
│   │   ├── db/
│   │   │   ├── index.ts       # Prisma client singleton (Neon adapter)
│   │   │   └── queries.ts     # Database query functions
│   │   ├── ai/
│   │   │   ├── generator.ts   # Article generation with OpenAI
│   │   │   ├── prompts.ts     # System prompts for AI generation
│   │   │   └── ai-settings-schema.ts  # AI settings Zod schema
│   │   ├── auth/
│   │   │   ├── neon-server.ts # Neon Auth server-side client
│   │   │   ├── neon-client.ts # Neon Auth client-side hooks
│   │   │   └── server.ts      # Auth helper functions
│   │   ├── sanity/
│   │   │   ├── client.ts      # Sanity client + image URL builder
│   │   │   └── queries.ts     # GROQ query functions
│   │   ├── resend.ts          # Email sending functions (Resend)
│   │   ├── unified-queries.ts # Cross-source article queries
│   │   ├── article-utils.ts   # Article helper utilities
│   │   ├── constants.ts       # Shared enum constants
│   │   └── utils.ts           # General utilities
│   ├── sanity/                # Sanity runtime config (imported by Studio)
│   │   ├── schemaTypes/       # Portable Text content type definitions
│   │   ├── lib/               # Sanity client, image, live helpers
│   │   ├── structure.ts       # Studio structure config
│   │   └── env.ts             # Sanity environment variables
│   ├── types/                 # Shared TypeScript type definitions
│   ├── hooks/                 # Custom React hooks
│   ├── env.ts                 # Type-safe env validation (@t3-oss/env-nextjs)
│   └── middleware.ts          # Auth middleware (protects /admin, /profile, etc.)
├── .env.example               # Environment variable template
├── next.config.ts             # Next.js config (React Compiler, image domains)
├── sanity.config.ts           # Sanity Studio config file
├── sanity.cli.ts              # Sanity CLI config
├── prisma.config.ts           # Prisma config
├── components.json            # shadcn/ui component registry config
├── package.json
└── tsconfig.json

Key directories explained

Directory / FileWhat it contains
prisma/schema.prismaComplete database schema with all models, enums, and indexes
prisma/seed.tsDatabase seed script — run with npm run db:seed
sanity/schemas/Sanity content type definitions (post, author, category)
src/app/(marketing)/All public-facing blog pages (homepage, articles, categories, tags, search)
src/app/(admin)/Protected admin dashboard — requires authentication
src/app/(app)/Authenticated user pages (profile, saved, liked)
src/app/(auth)/Sign in and sign up pages
src/app/auth/Custom auth path handler for Neon Auth callbacks
src/app/studio/Embedded Sanity Studio at /studio
src/app/api/Server-side API handlers (AI generation, email, auth, search, webhooks)
src/components/UI components organized by feature: admin/, articles/, layout/, search/, ui/
src/actions/Next.js Server Actions for articles, admin, AI settings, engagement, subscriptions
src/lib/db/Prisma client (Neon adapter) and database query functions
src/lib/ai/AI article generator, AI settings schema, and system prompts
src/lib/auth/Neon Auth client/server utilities
src/lib/sanity/Sanity client, image URL builder, and GROQ query functions
src/lib/resend.tsEmail sending functions (welcome, confirmation, unsubscribe)
src/sanity/Sanity runtime config — Portable Text schema types, Studio structure, env
src/middleware.tsRoute protection middleware — guards /admin, /profile, /saved, /liked
src/env.tsType-safe environment variable validation via @t3-oss/env-nextjs

Install dependencies and start dev server

bash
npm install

Then start the development server:

bash
npm run dev

The app will be available at http://localhost:3000. You'll see errors or blank pages until environment variables are configured — that's expected at this stage.

Warning

Do not skip the environment variable setup step. The app requires database, CMS, auth, and AI credentials to function.