Skip to content

deadmau5v/CoverView

Β 
Β 

Repository files navigation

CoverView Enhanced

Creating beautiful, customizable cover images for your blogs in seconds.

Note: This is an enhanced fork of rutikwankhade/CoverView with additional features and modern tech stack.

⚑ Features

Core Features (Original)

  • πŸš€ Super fast and easy to use
  • ✨ Unsplash integration to search images
  • 🌠 100+ dev icons with option to upload custom icon
  • πŸ’Ύ Export as PNG or WEBP format

✨ Enhanced Features (This Fork)

  • 🎨 9 Color Themes: One Dark, Catppuccin (Latte, FrappΓ©, Macchiato, Mocha), Nord, Tokyo Night, Gruvbox, Solarized, Dracula
  • πŸ–ΌοΈ 7 Visual Themes: Background, Stylish, Basic, Modern, Outline, Preview, Mobile Mockup
  • πŸ“ Multiple Canvas Sizes: 16:9, 4:3, 16:10, 1:1, 3:2 presets with custom dimensions support
  • πŸ”€ 4 Font Families: Inter, Poppins, Anek Latin, Nunito
  • πŸ“ Dynamic Font Sizing: Adjustable text size for perfect layout
  • 🎭 Background Patterns: Dots, Zigzag, Cross, and more SVG patterns
  • 🌐 Internationalization Ready: Multi-language support structure
  • ⚑ Modern Tech Stack: Vite, React 18, TypeScript, Bun
  • 🎯 Auto-format on Save: Prettier with Tailwind CSS plugin

πŸ› οΈ Tech Stack

  • Frontend: React 18 with TypeScript
  • Build Tool: Vite 7.x (migrated from Create React App)
  • Package Manager: Bun 1.3+
  • Styling: Tailwind CSS with custom patterns
  • Code Quality: Prettier with Tailwind CSS plugin
  • Image Processing: dom-to-image for export
  • API Integration: Unsplash JS SDK

πŸ“¦ Installation & Development

Prerequisites

  • Bun 1.3 or higher
  • Node.js 18+ (if using npm/yarn instead)

Quick Start

# Clone the repository
git clone https://github.com/yourusername/CoverView.git
cd CoverView/

# Install dependencies
bun install

# Set up environment variables
cp .env.example .env
# Edit .env and add your Unsplash API key

# Start development server
bun run dev
# or simply
bun dev

The app will be available at http://localhost:3000

Available Scripts

# Development
bun run dev              # Start dev server
bun run build            # Production build
bun run preview          # Preview production build

# Code Quality
bun run format           # Format all files with Prettier
bun run format:check     # Check formatting
bun run build:check      # Build with TypeScript type checking

Environment Variables

Create a .env file in the root directory:

VITE_UNSPLASH_ACCESS_KEY=your_unsplash_access_key_here

Get your Unsplash API key from Unsplash Developers

πŸ‘‡ Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

  1. Fork it (https://github.com/rutikwankhade/CoverView/fork)
  2. Create your feature branch (git checkout -b feature/fooBar)
  3. Commit your changes (git commit -am 'Add some fooBar')
  4. Push to the branch (git push origin feature/fooBar)
  5. Create a new Pull Request

🎯 What's Different from Original?

This fork enhances the original CoverView with:

  1. More Customization Options

    • 9 professionally designed color themes vs original's color picker
    • Multiple canvas size presets (16:9, 4:3, etc.)
    • Font size adjustment
    • Additional font choices
  2. Modern Development Stack

    • Migrated from Create React App to Vite (faster builds, better DX)
    • Full TypeScript support
    • Bun package manager for faster installs
    • Prettier auto-formatting
  3. Better Developer Experience

    • Format-on-save with VS Code integration
    • Comprehensive documentation (CLAUDE.md)
    • Migration guide included
    • Better project structure
  4. Enhanced UI/UX

    • Theme preview system
    • Better color scheme organization
    • Responsive canvas scaling

πŸ™ Acknowledgments

Original Project

Dependencies & Tools

πŸ“„ License

MIT License - see LICENSE for details


⭐ If you found this useful, please star this repository and the original project!

About

πŸ›  Create awesome cover images for your blog posts quickly.

Resources

License

Code of conduct

Stars

Watchers

Forks

Languages

  • TypeScript 95.0%
  • HTML 2.6%
  • CSS 2.0%
  • JavaScript 0.4%