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