sabique@portfolio:~$ cat projects/pixiefie.md

Pixiefie

Generates branded, shareable ID cards from GitHub and Reddit handles. Fetches profile pic, name, and username; embeds live QR code.

Next.jsTailwind CSSVercelQR CodeGitHubReddit

Pixiefie

A modern web application that generates beautiful, branded ID cards from social media profiles. Simply enter your GitHub or Reddit username, and Pixiefie creates a shareable digital ID card complete with your profile information and a live QR code.


Overview

Pixiefie bridges the gap between digital identity and physical networking by creating visually appealing ID cards that can be shared both digitally and in print. The application leverages social media APIs to fetch authentic profile data and generates high-quality, customizable ID cards suitable for conferences, meetups, and professional networking.


Key Features

Multi-Platform Support

  • GitHub Integration: Fetches user profiles, repositories, and contribution data
  • Reddit Integration: Retrieves user information, karma, and community activity
  • Universal QR Codes: Generated QR codes link directly to social profiles
  • Cross-Platform Compatibility: Works seamlessly across all devices

Dynamic Card Generation

  • Real-time Data Fetching: Live profile information retrieval
  • Responsive Design: Cards automatically adapt to different screen sizes
  • High-Quality Output: Print-ready resolution for physical cards
  • Instant Preview: Real-time card preview as you customize

Customization Options

  • Multiple Themes: Professional, casual, and vibrant design options
  • Color Schemes: Customizable accent colors and backgrounds
  • Layout Variants: Different card layouts for various use cases
  • Branding Elements: Add company logos or event branding

Technology Stack

Frontend

  • Next.js 14: React framework with App Router
  • Tailwind CSS: Utility-first CSS framework
  • TypeScript: Type-safe JavaScript development
  • Framer Motion: Animation library

Libraries & APIs

  • QRCode.react: QR code generation
  • html2canvas: Screenshot generation
  • jsPDF: PDF export functionality
  • GitHub API: Profile data fetching
  • Reddit API: User information retrieval

Deployment

  • Vercel: Hosting and deployment platform
  • GitHub Actions: CI/CD pipeline
  • Vercel Analytics: Performance monitoring