SimpleBlogs 🚀

The fastest way to create and share blog posts. Write in markdown, publish in seconds, and share across all platforms with one click.

✨ Features

• ⚡ Lightning Fast - Create and publish blog posts in under 60 seconds
• 📝 Markdown Editor - Write with live preview in our clean markdown editor
• 🖼️ Stock Images - Add beautiful images from our integrated stock photo library
• 📱 Mobile First - Fully responsive design that works on all devices
• 🔐 Authentication - Secure user authentication with Supabase
• 🌐 Instant Sharing - One-click sharing to X, LinkedIn, and all major platforms
• 🎨 Beautiful UI - Clean, modern interface built with shadcn/ui components
• 📊 Dashboard - Manage all your posts from one central location

🚀 Quick Start

Prerequisites

• Node.js 18+
• pnpm (recommended) or npm
• Supabase account

1. Clone the Repository

git clone https://github.com/yourusername/simple-blog-generator.git
cd simple-blog-generator

2. Install Dependencies

pnpm install
# or
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
SUPABASE_SERVICE_ROLE_KEY=your_supabase_service_role_key

# Next.js Configuration
NEXT_PUBLIC_SITE_URL=http://localhost:3000

4. Set Up Supabase Database

1. Create a new project at supabase.com
2. Run the SQL scripts in the scripts/ folder:

-- Create blog posts table
\i scripts/001_create_blog_posts_table.sql

-- Create profiles table
\i scripts/002_create_profiles_table.sql

-- Create profile trigger
\i scripts/003_create_profile_trigger.sql

5. Start the Development Server

pnpm dev
# or
npm run dev

Open http://localhost:3000 in your browser.

🏗️ Project Structure

simple-blog-generator/
├── app/                    # Next.js 15 app directory
│   ├── api/               # API routes
│   ├── auth/              # Authentication pages
│   ├── blog/              # Blog post display
│   ├── dashboard/         # User dashboard
│   └── globals.css        # Global styles
├── components/            # React components
│   ├── auth/             # Authentication components
│   ├── dashboard/        # Dashboard components
│   ├── ui/               # shadcn/ui components
│   └── markdown-editor.tsx # MDXEditor wrapper
├── lib/                  # Utility functions
│   └── supabase/         # Supabase client & server
├── scripts/              # Database setup scripts
└── public/               # Static assets

🎯 Usage

Creating Your First Blog Post

1. Sign Up/Login - Create an account or sign in
2. Navigate to Dashboard - Click "Create New Post"
3. Write Content - Use the markdown editor with live preview
4. Add Title & Image - Set your post title and select a featured image
5. Publish - Click "Publish Post" to make it live
6. Share - Use the built-in sharing buttons to share across platforms

Markdown Support

The editor supports standard markdown syntax:

# H1 Heading

## H2 Heading

### H3 Heading

**Bold text**
_Italic text_
`inline code`

- Bullet points
- Another point

1. Numbered list
2. Second item

[Link text](https://example.com)

![Alt text](image-url.jpg)

Managing Posts

• View Posts - See all your published and draft posts
• Edit Posts - Modify existing posts anytime
• Publish/Unpublish - Toggle post visibility
• Delete Posts - Remove posts permanently
• Copy Links - Get shareable URLs instantly

🔧 Configuration

Customizing the Editor

Edit components/markdown-editor.tsx to customize the MDXEditor:

import { headingsPlugin, listsPlugin, quotePlugin } from "@mdxeditor/editor";

// Add or remove plugins as needed
const plugins = [
  headingsPlugin(),
  listsPlugin(),
  quotePlugin(),
  // Add more plugins here
];

Styling

The project uses Tailwind CSS with a custom design system. Modify app/globals.css to change:

• Color scheme
• Typography
• Spacing
• Component styles

Database Schema

Key tables and their purposes:

• blog_posts - Stores all blog post data
• profiles - User profile information
• auth.users - Supabase authentication users

🚀 Deployment

Vercel (Recommended)

1. Push your code to GitHub
2. Connect your repository to Vercel
3. Add environment variables in Vercel dashboard
4. Deploy automatically on every push

Other Platforms

The app can be deployed to any platform that supports Next.js:

• Netlify
• Railway
• DigitalOcean App Platform
• AWS Amplify

🤝 Contributing

We welcome contributions! Here's how to get started:

1. Fork the Repository

Click the "Fork" button on GitHub to create your copy.

2. Create a Feature Branch

git checkout -b feature/amazing-feature

3. Make Your Changes

• Write clean, readable code
• Follow the existing code style
• Add tests if applicable
• Update documentation

4. Commit Your Changes

git commit -m "feat: add amazing feature"

5. Push and Create a Pull Request

git push origin feature/amazing-feature

Then create a Pull Request on GitHub.

Development Guidelines

• TypeScript - All code must be written in TypeScript
• ESLint - Follow the project's linting rules
• Component Structure - Use functional components with hooks
• Styling - Use Tailwind CSS classes
• Testing - Add tests for new features

📝 License

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

🙏 Acknowledgments

• Next.js - React framework
• Supabase - Backend as a service & authentication
• MDXEditor - Markdown editor
• shadcn/ui - UI components
• Tailwind CSS - Utility-first CSS framework
• Lucide React - Beautiful icons

📞 Support

• Issues - GitHub Issues
• Discussions - GitHub Discussions
• Email - [email protected]

🌟 Star History

---

Made with ❤️ by Valtteri

If you find this project helpful, please give it a ⭐️ on GitHub!