BlogCraft - AI-Powered Blog Content Generator

BlogCraft is a modern, AI-first content management system that empowers bloggers, marketers, and content teams to create high-quality, SEO-optimized blog content at scale using advanced language models.

🚀 Features

Core Features

• AI Content Generation: Generate complete blog posts from simple topics using advanced language models
• SEO Optimization: Built-in SEO analysis and suggestions for better search engine rankings
• Content Management: Save, edit, and organize blog posts with a clean interface
• Multiple Export Formats: Export content as HTML, Markdown, PDF, or plain text
• User Authentication: Secure authentication with Supabase Auth (email/password + OAuth)
• Dashboard Analytics: Track content performance and AI usage statistics

Technical Features

• Next.js 14: Built with the latest Next.js App Router and TypeScript
• Tailwind CSS: Modern, responsive design with custom components
• Supabase: PostgreSQL database with real-time subscriptions
• Framer Motion: Smooth animations and transitions
• DM Sans Font: Clean, readable typography from Google Fonts

🛠️ Tech Stack

• Frontend: Next.js 14, TypeScript, Tailwind CSS
• Backend: Supabase (PostgreSQL, Auth, Storage)
• AI Integration: OpenAI GPT-4 API
• UI Components: Custom components inspired by MVPBlocks
• Deployment: Vercel-ready

📋 Prerequisites

Before you begin, ensure you have the following installed:

• Node.js 18+
• npm or yarn
• Supabase account
• OpenAI API key (optional for development)

🚀 Quick Start

1. Clone the Repository

git clone <repository-url>
cd blogcraft

2. Install Dependencies

npm install

3. Set Up Environment Variables

Create a .env.local file in the root directory:

# Supabase Configuration
NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

# OpenAI Configuration (for AI content generation)
OPENAI_API_KEY=your_openai_api_key

# Optional: Analytics
NEXT_PUBLIC_POSTHOG_KEY=your_posthog_key
NEXT_PUBLIC_POSTHOG_HOST=https://app.posthog.com

4. Set Up Supabase Database

1. Create a new Supabase project
2. Run the following SQL in your Supabase SQL editor:

-- Create profiles table
CREATE TABLE profiles (
  id UUID REFERENCES auth.users(id) ON DELETE CASCADE PRIMARY KEY,
  email TEXT NOT NULL,
  full_name TEXT,
  avatar_url TEXT,
  subscription_tier TEXT DEFAULT 'free',
  ai_credits_used INTEGER DEFAULT 0,
  ai_credits_limit INTEGER DEFAULT 10,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Create blog_posts table
CREATE TABLE blog_posts (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  user_id UUID REFERENCES profiles(id) ON DELETE CASCADE,
  title TEXT NOT NULL,
  slug TEXT,
  content JSONB NOT NULL,
  meta_description TEXT,
  keywords TEXT[],
  seo_score INTEGER DEFAULT 0,
  word_count INTEGER DEFAULT 0,
  status TEXT DEFAULT 'draft',
  ai_generated BOOLEAN DEFAULT false,
  generation_prompt TEXT,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Create generation_history table
CREATE TABLE generation_history (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  user_id UUID REFERENCES profiles(id) ON DELETE CASCADE,
  prompt TEXT NOT NULL,
  generated_content TEXT NOT NULL,
  model_used TEXT DEFAULT 'gpt-4',
  tokens_used INTEGER,
  generation_time INTEGER,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Enable Row Level Security
ALTER TABLE profiles ENABLE ROW LEVEL SECURITY;
ALTER TABLE blog_posts ENABLE ROW LEVEL SECURITY;
ALTER TABLE generation_history ENABLE ROW LEVEL SECURITY;

-- Create policies
CREATE POLICY "Users can view own profile" ON profiles
  FOR SELECT USING (auth.uid() = id);

CREATE POLICY "Users can update own profile" ON profiles
  FOR UPDATE USING (auth.uid() = id);

CREATE POLICY "Users can view own posts" ON blog_posts
  FOR SELECT USING (auth.uid() = user_id);

CREATE POLICY "Users can insert own posts" ON blog_posts
  FOR INSERT WITH CHECK (auth.uid() = user_id);

CREATE POLICY "Users can update own posts" ON blog_posts
  FOR UPDATE USING (auth.uid() = user_id);

CREATE POLICY "Users can delete own posts" ON blog_posts
  FOR DELETE USING (auth.uid() = user_id);

CREATE POLICY "Users can view own generation history" ON generation_history
  FOR SELECT USING (auth.uid() = user_id);

CREATE POLICY "Users can insert own generation history" ON generation_history
  FOR INSERT WITH CHECK (auth.uid() = user_id);

5. Configure Authentication

1. In your Supabase dashboard, go to Authentication > Settings
2. Add your domain to the Site URL
3. Configure OAuth providers (Google, GitHub) if desired

6. Run the Development Server

npm run dev

Open http://localhost:3000 to view the application.

📁 Project Structure

blogcraft/
├── src/
│   ├── app/                    # Next.js App Router
│   │   ├── auth/              # Authentication pages
│   │   ├── dashboard/         # Dashboard pages
│   │   ├── globals.css        # Global styles
│   │   ├── layout.tsx         # Root layout
│   │   └── page.tsx           # Landing page
│   ├── components/            # Reusable components
│   ├── lib/                   # Utilities and configurations
│   │   └── supabase.ts        # Supabase client
│   └── types/                 # TypeScript type definitions
├── public/                    # Static assets
├── tailwind.config.js         # Tailwind configuration
├── next.config.js            # Next.js configuration
└── package.json              # Dependencies and scripts

🎨 Design System

BlogCraft uses a custom design system inspired by MVPBlocks with:

• Colors: Primary blue (#0ea5e9) and secondary purple (#d946ef)
• Typography: DM Sans from Google Fonts
• Components: Custom Tailwind CSS components with consistent styling
• Animations: Framer Motion for smooth interactions

🔧 Configuration

Tailwind CSS

The project uses Tailwind CSS with custom configurations for:

• Custom color palette
• Custom animations
• Responsive breakpoints
• Component utilities

Supabase

Configured for:

• User authentication
• Real-time database
• Row Level Security (RLS)
• Storage for file uploads

🚀 Deployment

Vercel (Recommended)

1. Push your code to GitHub
2. Connect your repository to Vercel
3. Add environment variables in Vercel dashboard
4. Deploy!

Environment Variables for Production

Make sure to set these in your production environment:

• NEXT_PUBLIC_SUPABASE_URL
• NEXT_PUBLIC_SUPABASE_ANON_KEY
• OPENAI_API_KEY

📊 Features Overview

Landing Page

• Hero section with AI content generation demo
• Feature showcase with animated cards
• Pricing section with free/pro tiers
• Call-to-action sections

Authentication

• Email/password signup and signin
• Google OAuth integration
• Password reset functionality
• Protected routes

Dashboard

• Overview statistics
• Recent posts management
• AI credits tracking
• Quick actions

Content Generator

• Topic-based content generation
• Tone and audience targeting
• SEO optimization suggestions
• Multiple export formats

Content Management

• Post library with search and filters
• Rich text editor
• SEO analysis tools
• Bulk operations

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🆘 Support

If you encounter any issues or have questions:

1. Check the Issues page
2. Create a new issue with detailed information
3. Join our community discussions

🎯 Roadmap

MVP Features ✅

• Landing page with marketing content
• User authentication system
• Dashboard with overview
• AI content generator
• Content management system
• SEO optimization tools
• Export functionality

Future Features 🚧

• Multi-platform publishing integrations
• Advanced analytics and performance tracking
• Team collaboration features
• Custom AI model training
• Content calendar and scheduling
• Image generation integration

---

Built with ❤️ using Next.js, Supabase, and OpenAI