Back to Projects
RetroPaste
CompletedNext.jsTypeScriptReact+2 more

RetroPaste

Terminal-themed pastebin with CRT effects, phosphor glow, and 8-bit sounds. Features AI-powered code analysis for security vulnerabilities and best practices, ephemeral pastes with view limits, auto l…

Timeline

2024

Role

Full Stack Developer

Status

Completed

Technology Stack

Next.js
TypeScript
React
MongoDB
Vercel

Overview

A modern code sharing platform that resurrects the classic Pastebin aesthetic with retro terminal vibes, complete with CRT effects, phosphor glow, 8-bit sounds, and AI-powered code analysis.

Core Features

Authentic Retro UI

  • CRT screen effects with scan lines and phosphor glow
  • VHS noise texture overlay for authentic feel
  • 8-bit sound effects using Web Audio API
  • Matrix rain and glitch effects on hover
  • 3D perspective grid background

AI Code Analysis

  • Automatic vulnerability detection (SQL injection, XSS, hardcoded credentials)
  • Performance suggestions and code quality scoring
  • Syntax error detection with real-time highlighting
  • Language-specific issue detection for 100+ languages

Ephemeral Pastes

  • Self-destructing snippets with time-based expiration (10min to never)
  • View-based expiration (1-1000 views before auto-deletion)
  • Privacy options: public, unlisted, or private visibility

Advanced Features

Code Playground

Run JavaScript/TypeScript code directly in browser with instant feedback

Collaboration

  • Real-time collaborative editing with permissions (view/edit/edit-together)
  • Live chat assistant for AI-powered code help and explanations

Integrations

  • QR Code Generator for easy mobile sharing
  • GitHub Gist Integration for import/export
  • Embed Widget with customizable themes for websites

Statistics Dashboard

  • View counts and analytics
  • Lines of code tracking
  • Usage patterns and insights

Performance

  • Lightning fast with optimized caching and debouncing
  • 60% fewer API calls through smart request management
  • 90+ Lighthouse score for performance
  • Responsive design for desktop, tablet, and mobile

Tech Stack

  • Framework: Next.js 14 (App Router)
  • Language: TypeScript
  • Styling: Tailwind CSS + Custom CSS
  • Animations: Framer Motion
  • Editor: Monaco Editor (100+ languages)
  • Database: MongoDB + Mongoose
  • Auth: JWT + bcrypt
  • AI: OpenAI/Claude ready

Visual Effects

| Effect | Description | |--------|-------------| | CRT Scan Lines | Authentic terminal look | | Phosphor Glow | Green text glow effect | | VHS Noise | Static texture overlay | | Glitch Effects | Text glitch on hover | | Neon Pulse | Pulsing text glow | | Boot Sequence | Terminal startup animation |

Sound Effects

  • Click: 800Hz square wave
  • Hover: 600Hz sine wave
  • Success: Ascending tones
  • Error: Descending tones
12 views