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

Clone the repository:

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

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

pphatdev/studio