# Planit AI - WordPress & Next.js Template

A modern, headless WordPress theme with Next.js frontend. This template provides a complete solution for content-driven websites with WordPress as the CMS and Next.js for the frontend.

## 📦 Package Contents

```
planit-ai/
├── README.md                    # This file - Project overview
├── SETUP-GUIDE.md              # Complete setup instructions
├── INTEGRATION-GUIDE.md        # WordPress & Next.js integration details
├── wordpress/                  # WordPress backend package
│   ├── planitai-wp.wpress     # WordPress backup file
│   └── WORDPRESS-SETUP.md     # WordPress installation guide
└── nextjs/                     # Next.js frontend application
    ├── NEXTJS-SETUP.md        # Next.js setup guide
    ├── package.json           # Dependencies
    ├── next.config.ts         # Next.js configuration
    ├── env.example            # Environment variables template
    ├── app/                   # Next.js app directory (pages)
    ├── components/            # React components
    ├── lib/                   # Utilities and API functions
    └── public/                # Static assets
```

## 🎯 Overview

This template combines:
- **WordPress** (Backend/CMS) - Content management, blog/news, contact forms
- **Next.js 15** (Frontend) - Modern React framework with App Router
- **WordPress REST API** - Seamless integration between frontend and backend

### Architecture

```
┌─────────────────┐
│   Next.js App   │  (Frontend - Port 3000)
│   (React/TS)    │
└────────┬────────┘
         │ HTTP/REST API
         │
┌────────▼────────┐
│   WordPress     │  (Backend - Port 80/443)
│   (CMS/API)     │
└─────────────────┘
```

### Key Features

- ✅ **WordPress Headless CMS** - Content management via WordPress
- ✅ **Next.js Frontend** - Fast, SEO-friendly React application
- ✅ **Blog & News System** - Dynamic content from WordPress
- ✅ **Contact Form** - Integrated with reCAPTCHA v3
- ✅ **WordPress Block Editor** - Rich content rendering
- ✅ **Responsive Design** - Mobile-first approach
- ✅ **TypeScript** - Type-safe development

## 🚀 Quick Start

### Prerequisites

- **Node.js** 18+ and yarn
- **PHP** 7.4+ and MySQL 5.7+ (for WordPress)
- **Web Server** (Apache/Nginx) or local development environment

### Installation Flow

1. **Set up WordPress** (Backend)
   - See `wordpress/WORDPRESS-SETUP.md`
   - Import `planitai-wp.wpress` backup
   - Configure WordPress settings

2. **Set up Next.js** (Frontend)
   - See `nextjs/NEXTJS-SETUP.md`
   - Install dependencies
   - Configure environment variables

3. **Configure Integration**
   - Update WordPress API URL in Next.js
   - Configure reCAPTCHA keys
   - Test the connection

For detailed instructions, see **SETUP-GUIDE.md**

## 📋 Documentation

- **[SETUP-GUIDE.md](./SETUP-GUIDE.md)** - Complete step-by-step setup instructions
- **[wordpress/WORDPRESS-SETUP.md](./wordpress/WORDPRESS-SETUP.md)** - WordPress backend installation
- **[nextjs/NEXTJS-SETUP.md](./nextjs/NEXTJS-SETUP.md)** - Next.js frontend setup
- **[INTEGRATION-GUIDE.md](./INTEGRATION-GUIDE.md)** - Technical integration details

## 🔗 Integration Points

### WordPress REST API

The Next.js frontend connects to WordPress via REST API:

- **Base URL:** `https://your-wordpress-domain.com/api/wp/v2`
- **Endpoints Used:**
  - `/posts` - Blog posts and news
  - `/posts/{id}` - Single post
  - `/posts?slug={slug}` - Post by slug
  - `/contact-form-7/v1/contact-forms/{id}/feedback` - Contact form submission

### Environment Variables

**Next.js** requires:
```env
NEXT_PUBLIC_WP_API_BASE=https://your-wordpress-domain.com/api/wp/v2
NEXT_PUBLIC_RECAPTCHA_SITE_KEY=your_recaptcha_site_key
```

**Setup:**
1. Copy `nextjs/env.example` to `nextjs/.env.local`
2. Update the values with your actual WordPress domain and reCAPTCHA key
3. See `nextjs/NEXTJS-SETUP.md` for detailed instructions

**WordPress** requires:
- reCAPTCHA Secret Key (for Contact Form 7)
- SMTP configuration (for email delivery)

## 🛠️ Technology Stack

### Frontend (Next.js)
- **Framework:** Next.js 15 with App Router
- **Language:** TypeScript
- **Styling:** Tailwind CSS 4
- **UI Components:** shadcn/ui, Radix UI
- **State Management:** TanStack Query (React Query)
- **Forms:** React Hook Form + Zod
- **Animations:** AOS (Animate On Scroll)

### Backend (WordPress)
- **CMS:** WordPress (Latest)
- **Plugins:**
  - Contact Form 7
  - All-in-One WP Migration
- **API:** WordPress REST API v2
- **Security:** reCAPTCHA v3

## 📁 Project Structure

### Next.js Frontend

```
nextjs/
├── env.example            # Environment variables template
├── NEXTJS-SETUP.md        # Next.js setup guide
├── package.json           # Dependencies
├── next.config.ts         # Next.js configuration
├── app/                   # Next.js App Router pages
│   ├── blogs/             # Blog listing and detail pages
│   ├── news/              # News listing and detail pages
│   ├── contact/           # Contact form page
│   └── layout.tsx         # Root layout
├── components/            # React components
│   ├── blogs/             # Blog-related components
│   ├── news/              # News-related components
│   ├── pages/             # Page-specific components
│   └── ui/                # Reusable UI components
├── lib/                   # Utilities and API
│   └── api.ts            # WordPress API integration
└── public/                # Static assets
```

### WordPress Backend

```
wordpress/
└── planitai-wp.wpress      # Complete WordPress backup
    ├── Themes
    ├── Plugins
    ├── Uploads (Media)
    └── Database
```

## 🔄 Development Workflow

1. **Content Management:**
   - Content editors use WordPress admin panel
   - Create/edit posts, pages, media
   - Changes reflect in Next.js frontend via API

2. **Frontend Development:**
   - Develop in Next.js
   - Test locally with WordPress API
   - Deploy Next.js to production

3. **Deployment:**
   - WordPress: Traditional hosting (cPanel, etc.)
   - Next.js: Vercel, Netlify, or custom server

## 🔐 Security

- **reCAPTCHA v3** - Bot protection for contact forms
- **HTTPS** - Required for production
- **API Security** - WordPress REST API authentication
- **Environment Variables** - Sensitive data in `.env.local`

## 📄 License

[Your License Here]

---

**Version:** 1.0.0  
**Last Updated:** November 2024  
**WordPress Version:** Latest  
**Next.js Version:** 15.5.5