Void Space 🌌

A minimalist, modern blog platform built with Next.js 15, featuring unique community engagement tools and a dark, cosmic aesthetic.

✨ Features

Core Features

• 📝 Blog System - Full-featured blog with Markdown/MDX support
• 👁️ View Tracking - Automatic post view counting with client-side deduplication
• ❤️ Resonates - Like system with heart animations and spam prevention
• 🏷️ Tag System - Organize posts with tags and filter by tag
• 🔍 Search - Real-time search across titles, content, excerpts, and tags
• 📱 Responsive Design - Beautiful UI on all devices

Engagement Features

• 💬 Moderated Comments - Guest commenting with name (no login required)

  • Email notifications on comment approval
  • Admin panel for moderation
  • Support for links and emojis
  • Profanity filtering

• 🌬️ Void Whispers - Unique micro-reactions feature (powered by Convex)

  • Anonymous, ephemeral messages (max 15 characters)
  • Real-time streaming - appears instantly across all viewers
  • Floating animations across the screen
  • One whisper per user per post
  • Live presence tracking - see how many souls are present
  • Optimistic updates for instant feedback
  • Emoji support

• 📧 Newsletter - Email subscription system

  • Supabase Edge Functions for delivery
  • Resend for email sending
  • Admin panel for sending newsletters
  • Unsubscribe functionality

Admin Features

• Comment Moderation - Approve, reject, or delete comments
• Newsletter Management - Send newsletters to subscribers
• API Key Protection - Secure admin endpoints

Technical Features

• Rate Limiting - Prevent API abuse (comments, likes)
• Content Filtering - Profanity detection using @2toad/profanity
• SEO Optimized - Dynamic sitemap, robots.txt, structured data
• CORS Configured - API access for external domains

🛠️ Tech Stack

• Framework: Next.js 15 (App Router)
• Language: TypeScript
• Database: Supabase (PostgreSQL) + Convex (Real-time)
• Email: Resend
• Styling: Tailwind CSS
• Icons: Lucide React
• Content: Markdown/MDX with React Markdown
• Deployment: Vercel

🚀 Getting Started

Prerequisites

• Node.js 18+ and npm
• A Supabase account and project
• A Convex account and project
• A Resend account for emails

Installation

1. Clone the repository

   git clone https://github.com/yourusername/void-space.git
   cd void-space

2. Install dependencies

   npm install

3. Set up environment variables

   Copy env.example to .env.local and fill in your values:

   cp env.example .env.local

   Required environment variables:

   # Supabase
   NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
   NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
   SUPABASE_SERVICE_ROLE_KEY=your_service_role_key
   
   # Convex (for real-time features)
   # Development URL (from `npx convex dev`)
   NEXT_PUBLIC_CONVEX_URL_DEV=https://your-dev-project.convex.cloud
   
   # Production URL (from `npx convex deploy --prod`)
   NEXT_PUBLIC_CONVEX_URL_PROD=https://your-prod-project.convex.cloud
   
   # Email (Resend)
   RESEND_API_KEY=your_resend_api_key
   FROM_EMAIL=noreply@yourdomain.com
   
   # Admin Protection
   NEWSLETTER_API_KEY=your_secure_api_key_here
   
   # Base URL
   NEXT_PUBLIC_BASE_URL=http://localhost:3000

4. Set up Supabase database

   Run the SQL files in your Supabase SQL Editor in this order:

   -- Core schema
   supabase-schema.sql
   
   -- Features
   add-resonates-column.sql
   create-comments-table.sql
   newsletter-schema.sql

   Or use the consolidated schema file if available.

5. Set up Convex

   Follow the detailed guide in CONVEX_SETUP.md:

   # Login to Convex
   npx convex login
   
   # Initialize and deploy
   npx convex dev

   Copy the development deployment URL to your .env.local as NEXT_PUBLIC_CONVEX_URL_DEV.

   For production, run npx convex deploy --prod and add that URL as NEXT_PUBLIC_CONVEX_URL_PROD.

6. Run the development servers

   You need two terminals:

   Terminal 1: Next.js

   npm run dev

   Terminal 2: Convex

   npx convex dev

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

📁 Project Structure

void-space/
├── src/
│   ├── app/              # Next.js app router pages
│   │   ├── api/          # API routes
│   │   ├── blog/         # Blog pages
│   │   └── admin/        # Admin pages
│   ├── components/       # React components
│   ├── lib/              # Utility functions
│   ├── types/            # TypeScript types
│   └── styles/           # Global styles
├── public/               # Static assets
├── supabase/            # Supabase functions
│   └── functions/       # Edge functions
└── *.sql                # Database migrations

🎨 Key Components

• BlogPostCard - Blog post preview cards
• CommentForm & CommentsList - Comment system
• WhisperModal & WhispersDisplay - Void Whispers feature
• ResonatesButton - Heart animation button
• Newsletter - Email subscription form
• SearchBar & TagFilter - Content discovery
• BlackHoleLoader - Custom loading animation

🔐 Admin Access

Access admin panels at:

• /admin/comments - Comment moderation
• /admin/newsletter - Newsletter management

Requires NEWSLETTER_API_KEY in the Authorization header or as a query parameter.

🚢 Deployment

Vercel (Recommended)

1. Push your code to GitHub
2. Import the project in Vercel
3. Add environment variables in Vercel project settings
4. Deploy!

Environment Variables in Production

Make sure to set all environment variables from .env.local in your Vercel project settings.

📝 Content Management

Creating Blog Posts

Blog posts are stored in Supabase. Create them via:

1. Direct database insertion
2. The /api/posts/publish endpoint (protected)
3. A custom admin interface (build your own)

Post schema:

{
  slug: string;           // URL-friendly identifier
  title: string;          // Post title
  excerpt: string;        // Short description
  content: string;        // Markdown/MDX content
  coverImage?: string;    // Cover image URL
  author: string;         // Author name
  tags: string[];         // Array of tags
  published: boolean;     // Visibility
  publishedAt?: Date;     // Publication date
}

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

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

🙏 Acknowledgments

• Built with Next.js
• Powered by Supabase
• Styled with Tailwind CSS
• Icons by Lucide

📧 Contact

For questions or feedback, reach out via karlevedant7@gmail.com

---

Made with ❤️ and void energy 🌌