Skip to content

README.md

Latest commit

 

History

History
132 lines (97 loc) · 3.86 KB

README.md

File metadata and controls

132 lines (97 loc) · 3.86 KB

LovePaste ❤️

A modern, minimal, and distraction-free paste sharing service built with Next.js 15, Tailwind CSS, and shadcn/ui.

https://paste.lovexog.me/

✨ Features

  • 🎨 Clean Monochrome Design - Lots of whitespace, Inter font, subtle gray borders
  • ⚡ Instant Link Generation - Get your shareable link in milliseconds
  • 📋 One-Click Copy - Copy code or share link with smooth feedback animation
  • 🔍 Auto Language Detection - Automatically detects JavaScript, Python, TypeScript, and more
  • 🎯 Syntax Highlighting - Beautiful code highlighting with Prism.js
  • ⏰ Expiration Options - Set pastes to expire after 1 hour, 1 day, 7 days, or 30 days
  • 📝 Raw View - View raw content for easy curl or script usage
  • ⌨️ Keyboard Shortcuts - Press Ctrl/Cmd + S to instantly share

🛠️ Tech Stack

🚀 Getting Started

Prerequisites

  • Node.js 18.17 or later
  • npm, yarn, or pnpm

Installation

  1. Install dependencies:

    npm install

  2. Set up environment variables:

    cp .env.example .env.local

  3. Start the development server:

    npm run dev

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

📁 Project Structure

zenpaste/
├── src/
│   ├── app/
│   │   ├── api/paste/          # API route for creating pastes
│   │   ├── p/[id]/             # Dynamic route for viewing pastes
│   │   │   ├── page.tsx        # Paste view page
│   │   │   ├── raw/page.tsx    # Raw view page
│   │   │   └── not-found.tsx   # 404 for missing pastes
│   │   ├── globals.css         # Global styles
│   │   ├── layout.tsx          # Root layout
│   │   └── page.tsx            # Home page (editor)
│   ├── components/
│   │   ├── ui/                 # shadcn/ui components
│   │   ├── CodeEditor.tsx      # Main editor component
│   │   ├── CodeViewer.tsx      # Syntax highlighted viewer
│   │   └── CopyButton.tsx      # Copy button with animation
│   └── lib/
│       ├── db.ts               # Database operations
│       └── utils.ts            # Utility functions
├── .env.example                # Example environment variables
└── package.json

🗄️ Database Setup (Supabase)

The app comes with an in-memory store for development. For production, use Supabase:

1. Create a Supabase Project

Go to supabase.com and create a new project.

2. Create the Pastes Table

Run this SQL in the Supabase SQL Editor:

CREATE TABLE pastes (
  id TEXT PRIMARY KEY,
  content TEXT NOT NULL,
  language TEXT DEFAULT 'plaintext',
  expires_at TIMESTAMPTZ,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

CREATE INDEX idx_pastes_expires_at ON pastes(expires_at);

3. Configure Environment Variables

Update your .env.local:

NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
SUPABASE_SERVICE_ROLE_KEY=your_supabase_service_role_key

4. Update the Database File

Uncomment the Supabase code in src/lib/db.ts.

📦 Building for Production

npm run build
npm run start

🚢 Deployment

Vercel (Recommended)

  1. Push your code to GitHub
  2. Import your repository on vercel.com
  3. Add your environment variables
  4. Deploy!

📄 License

MIT License