Eid Greeting Card Generator

A web application that empowers users to craft personalized Eid greeting cards with custom text, typography, colors, and backgrounds. The app prioritizes user engagement through intuitive drag-and-drop text positioning and delivers high-quality image exports.

Key Features

• 🖋️ Custom Name Placement: Users can input multiple names, with each name dynamically generated based on the first positioned text.
• 🎨 Typography Customization: Adjustable font styles, sizes, weights (bold/italic), and a selection of diverse font options.
• 🖼️ Custom & Preset Backgrounds: Upload personal images or choose from curated high-quality preset backgrounds fetched from URLs.
• 💧 Color Picker from Image: Extract and apply colors directly from uploaded background images for perfect color matching.
• 🖱️ Fabric.js Integration: Enables seamless text dragging, resizing, and real-time preview capabilities for a smooth design experience.
• 💾 High-Quality Image Export: Maintains original image resolution with precise cropping during downloads.
• 📦 Dynamic Download Options: Instant downloads for single names; automated ZIP packaging for multiple names to save time.
• 🔍 Full-Screen Image Viewer: Preview backgrounds in an expanded view with easy-to-use close functionality.
• 📱 Mobile Responsive Design: A consistently smooth and intuitive experience across desktops, tablets, and mobile devices.

Technologies Used

Frontend

• Next.js (v15), React (v19), Tailwind CSS

Image Processing

• Fabric.js, JSZip, FileSaver

UI Components

• Radix UI, Lucide Icons, Embla Carousel

State Management & Validation

• React Hook Form, Zod

Styling & Animations

• Tailwind Merge, Tailwind CSS Animate

Project Highlights

This project highlights my ability to deliver interactive, user-centric web applications with a strong emphasis on modern technologies, performance optimization, and polished UI/UX design.