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-blogTip
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 mainProject 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.jsonKey directories explained
| Directory / File | What it contains |
|---|---|
prisma/schema.prisma | Complete database schema with all models, enums, and indexes |
prisma/seed.ts | Database 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.ts | Email sending functions (welcome, confirmation, unsubscribe) |
src/sanity/ | Sanity runtime config — Portable Text schema types, Studio structure, env |
src/middleware.ts | Route protection middleware — guards /admin, /profile, /saved, /liked |
src/env.ts | Type-safe environment variable validation via @t3-oss/env-nextjs |
Install dependencies and start dev server
bash
npm installThen start the development server:
bash
npm run devThe 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.