🎨 QuikDec - GitHub README Decoration Builder

quikdec.mp4

🚀 Create stunning GitHub README components with zero design overhead

A dynamic, interactive platform that empowers developers to build beautiful, customizable GitHub README components through a visual builder interface.

✨ Features

• 🎯 Interactive Visual Builder - Craft project showcase cards with real-time preview
• 🎨 Zero Design Skills Required - Beautiful components without any design knowledge
• ⚡ Instant Generation - Get shareable image URLs in seconds
• 📱 Responsive Design - Works perfectly across all devices
• 🔗 Direct Integration - Simple <img> tag embedding in your README
• 🎭 Smooth Animations - Enhanced with Framer Motion and React Tilt

🎪 Live Demo

Try QuikDec now: https://quikdec.vercel.app

🛠 Tech Stack

Component	Technology
Frontend	React, TailwindCSS, Framer Motion, React Tilt
State Management	Redux Toolkit
Routing	React Router DOM
Image Rendering	html-to-image, html-to-svg, puppeteer-core, resvg-wasm
Backend	Vercel Serverless Functions (Node.js)
Deployment	Vercel

💡 Usage

Creating a Project Card

1. Visit the QuikDec builder interface
2. Customize your project card:
   • Add project title and description
   • Select tech stack badges
   • Choose icons and styling
3. Preview your card in real-time
4. Copy the generated image URL
5. Embed in your README:

<img src="https://quikdec.vercel.app/api/project-card?title=GreenTrace&desc=Track+your+carbon+footprint&tech=React,Node.js,MongoDB" alt="Project Card" />

API Parameters

Parameter	Description	Example
title	Project title	MyAwesomeProject
desc	Project description	An+amazing+web+application
tech	Tech stack (comma-separated)	React,Node.js,MongoDB
theme	Color theme	dark, light, gradient

📁 Project Structure

📁 QuikDec
├── 📁 public
│   └── index.html
├── 📁 src
│   ├── 📁 components      # Reusable UI components
│   │   ├── CardBuilder.jsx
│   │   ├── Preview.jsx
│   │   └── ...
│   ├── 📁 pages          # Route-specific components
│   │   ├── Home.jsx
│   │   ├── Builder.jsx
│   │   └── ...
│   ├── 📁 redux          # Redux store & slices
│   │   ├── store.js
│   │   └── cardSlice.js
│   ├── App.jsx
│   └── index.js
├── 📁 api               # Vercel Serverless Functions
│   └── project-card.js  # Dynamic image generation
├── vercel.json
├── package.json
└── README.md

🗺 Roadmap

Phase 1: Project Cards ✅

• Interactive visual builder
• Real-time preview
• Tech stack badges
• Custom styling options
• Image URL generation

Phase 2: Skill Cards 🚧

• Skill proficiency visualization
• Custom skill categories
• Progress indicators
• Interactive animations

Phase 3: Advanced Components 📋

• GitHub stats cards
• Contribution calendars
• Achievement badges
• Custom metrics display

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

Development Setup

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 API Documentation

Endpoint: /api/project-card

Method: GET

Parameters:

• title (string, required): Project title
• desc (string, optional): Project description
• tech (string, optional): Comma-separated tech stack
• theme (string, optional): Visual theme
• bg (string, optional): Background color/gradient

Response: PNG image

Example:

GET /api/project-card?title=QuikDec&desc=README+Builder&tech=React,Tailwind&theme=gradient

🎯 Why QuikDec?

• ⚡ No Design Overhead - Focus on code, not graphics
• 🔄 Dynamic Generation - Images update automatically with parameters
• 🚀 Serverless Architecture - Fast, scalable, cost-effective
• 📱 Mobile-First - Responsive design for all devices
• 🎨 Beautiful Defaults - Stunning cards out of the box

📊 Architecture

QuikDec uses a serverless architecture for optimal performance:

• Frontend: React SPA hosted on Vercel
• Image Generation: Serverless functions with puppeteer-core
• State Management: Redux Toolkit for complex UI state
• Styling: TailwindCSS for rapid, responsive design

🐛 Bug Reports & Feature Requests

Found a bug or have an idea? Please open an issue.

📝 License

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

🙏 Acknowledgments

• Vercel for seamless deployment
• Tailwind CSS for beautiful styling
• Framer Motion for smooth animations
• All contributors who help make QuikDec better

---

Made with ❤️ by developers, for developers

⭐ Star this repo | 🐛 Report Bug | 💡 Request Feature