GitHub Stats Studio

A beautiful visual editor for creating stunning GitHub statistics cards with real-time preview and customization options.

✨ Features

• 🎨 Visual Editor - Intuitive interface for customizing GitHub stats cards
• 👁️ Real-time Preview - See your changes instantly with live preview
• 🖼️ Multiple Templates - Choose from various pre-designed templates
• ⚡ Customizable Options - Fine-tune every aspect of your stats card
• 🔍 Zoom Controls - Zoom in/out and pan for detailed preview
• 📋 One-click Copy - Copy generated URLs with a single click
• 🎉 Delightful UX - Smooth animations and confetti celebrations
• 📱 Responsive Design - Works seamlessly on all devices

🚀 Getting Started

Prerequisites

• Node.js 18.x or higher
• npm, pnpm, yarn, or bun

Installation

1. Clone the repository:

git clone https://github.com/pphatdev/studio.git
cd studio

2. Install dependencies:

# npm
npm install

# pnpm
pnpm install

# yarn
yarn install

# bun
bun install

Development Server

Start the development server on http://localhost:3000:

# npm
npm run dev

# pnpm
pnpm dev

# yarn
yarn dev

# bun
bun run dev

🏗️ Production

Build the application for production:

# npm
npm run build

# pnpm
pnpm build

# yarn
yarn build

# bun
bun run build

Locally preview production build:

# npm
npm run preview

# pnpm
pnpm preview

# yarn
yarn preview

# bun
bun run preview

📁 Project Structure

studio.stats.pphat.top/
├── app/
│   ├── assets/
│   │   └── css/           # Global styles
│   ├── components/
│   │   ├── icons/         # Icon components
│   │   ├── sidebar/       # Sidebar components
│   │   └── studio/        # Studio preview components
│   ├── composables/
│   │   └── useStats.ts    # Stats management composable
│   ├── pages/
│   │   └── index.vue      # Main studio page
│   └── utils/
│       ├── data.json      # Configuration and templates
│       ├── themes.ts      # Theme definitions
│       └── utils.ts       # Utility functions
├── public/                # Static assets
├── nuxt.config.ts         # Nuxt configuration
└── package.json           # Project dependencies

🛠️ Tech Stack

• Framework: Nuxt 4 - The Intuitive Vue Framework
• UI Library: Vue 3 - The Progressive JavaScript Framework
• Styling: Tailwind CSS 4 - Utility-first CSS framework
• Language: TypeScript - JavaScript with syntax for types
• Effects: canvas-confetti - Confetti celebrations

📝 Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run generate - Generate static site
• npm run preview - Preview production build
• npm run prettier - Format code with Prettier

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.

📄 License

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

👤 Author

Sophat LEAT (pphatdev)

• Website: pphat.top
• GitHub: @pphatdev
• Stats API: stats.pphat.top

🙏 Acknowledgments

• Built with Vue and Nuxt
• Styled with Tailwind CSS
• Icons and UI components custom-designed