You are a senior full-stack engineer and architect.Your task: Build a modular, plug-and-play blog plugin that can be installed into any Next.js 14+ (App Router) project and be production-ready immediately.Requirements:1. Frontend - Use Next.js 14 App Router with React Server Components where applicable. - Use TailwindCSS for styling, integrated with shadcn/ui components. - Implement a light/dark theme toggle with next-themes and a toggle UI component from shadcn. - Blog listing page (/blog) that shows all published posts with title, excerpt, tags, published date, likes, and views. - Individual blog post page (/blog/[slug]) that renders the full post content (rich text/Markdown), shows comments, likes, and view count. - Responsive and accessible design for mobile, tablet, and desktop. - Use TipTap as the rich text editor for blog post creation/editing.2. Admin Panel - Under /admin, protected by JWT or Clerk authentication. - CRUD operations for posts (create, read, update, delete). - Post fields: title, slug (unique), content (rich text), tags (array), published (boolean), images upload. - Image uploads must support multiple images per post, with previews and embed support. - Moderation panel for comments: view, approve, delete. - Show post statistics: total likes, views, and comment count.3. Backend and API - Use Prisma ORM connected to PostgreSQL for data persistence. - Database schema includes: User, Post, Comment, Like, View. - RESTful API routes for posts, comments, likes, views, supporting GET, POST, PATCH, DELETE as relevant. - Ensure security in API routes, validating authenticated admin actions.4. Features - Comments system with nested replies, moderation required before publishing. - Likes system: users can like/unlike posts; likes are counted per user/IP to prevent duplicates. - Views tracking: count unique views per post, avoid inflating with repeated refreshes. - SEO optimized pages with dynamic metadata for posts. - Image upload handled via a cloud solution like UploadThing or Cloudinary (or local storage fallback).5. Code Quality - Use TypeScript throughout. - Modular code structure, reusable components. - Clean folder structure following Next.js best practices. - Well-documented code and comments. - Include error handling and validation.6. Deliverables - Fully working codebase with frontend, backend API routes, Prisma schema. - Setup instructions for database and environment variables. - Example .env file. - Scripts for database migrations and seeding. - Responsive UI components with theme toggling. - Admin authentication flow.7. Bonus (Optional) - Draft autosave functionality in the editor. - Markdown export/import for posts. - Analytics dashboard showing post engagement trends.Please generate all necessary code files with comments, including:- prisma/schema.prisma- Next.js route handlers (app/api/ routes)- React components and pages (app/blog, app/admin)- Auth utilities and middleware- TailwindCSS and shadcn UI setup- Theme toggle implementationYour output must be production-ready, performant, accessible, and secure. Include clear code comments explaining major parts.---Start by generating the Prisma schema and Next.js API routes for posts and comments.
You can drop these files into any Next.js 14+ App Router project. Route Handlers live in app/api and use server-only code as recommended for App Router APIs 1.
Notes and next steps
- These Route Handlers live in app/api and run on the server, matching the App Router’s conventions for building APIs in Next.js 14+ 1. This aligns with using Next.js as a backend-for-frontend, with server-first data operations and security checks 2.
Environment variables used so far:
- DATABASE_URL for Prisma/PostgreSQL
- JWT_SECRET for verifying admin JWTs and salting IP hashes
- In the next step, we can add likes and views endpoints, admin moderation UI and authentication wiring, TipTap editor UI, and UploadThing/Cloudinary integration.
Actions
References
- App Router APIs, layouts, and server-first data fetching are the recommended approach in Next.js 14+ 1. Route Handlers under app/api let you implement REST endpoints within the App Router 1.
- See Next.js App Router guides for security and backend-for-frontend patterns 2.
To configure the generation, complete these steps:
i want t seecthe live site
You can now click to preview /blog and open a post. These pages are server components that fetch data via Route Handlers in the App Router, which is the recommended pattern in Next.js 14+ 1. Using app/api Route Handlers to implement REST endpoints is the standard approach within the App Router 21.
If you want these pages to read real data:
- Add DATABASE_URL and JWT_SECRET environment variables.
- Run Prisma migrations and a seed script.
- The pages will automatically use the API responses; otherwise they fall back to sample data for a live preview.
Actions
References
- The App Router’s built-in Route Handlers are used to implement REST APIs and server-first pages fetch data using the server runtime 1.
- See the App Router guides for backend-for-frontend, security, and APIs colocated under app/api 2.
To configure the generation, complete these steps:
run the app and show the result