Gift Card Maker

A modern web application that allows users to create beautiful, personalized digital gift cards. Built with React and TypeScript, this project provides an intuitive interface for customizing and generating gift cards with custom backgrounds and messages.

✨ Features

• Custom Background Images: Upload your own background images (PNG, JPG, or GIF)
• Personalized Messages: Add custom "Dear", message text, and "From" fields
• Smart Text Layout:
  • Intelligent text splitting for optimal presentation
  • Handles various message lengths automatically
  • Maintains readability with white outline and semi-transparent text
• Real-time Preview: See your gift card updates in real-time
• Responsive Design: Works seamlessly across different screen sizes

🚀 Getting Started

Prerequisites

• Node.js (v14 or higher)
• npm or yarn

Installation

1. Clone the repository:

git clone https://github.com/far14c/gift-card-maker.git
cd gift-card-maker

2. Install dependencies:

npm install
# or
yarn install

3. Start the development server:

npm run dev
# or
yarn dev

4. Open your browser and navigate to http://localhost:5173

🎨 Usage

1. Upload Background: Click the "Upload Background" section to add your custom background image
2. Personalize Message:
   • Enter recipient's name in the "Dear" field
   • Add your message in the message field
   • Add your name in the "From" field
3. Preview: See your changes reflected instantly in the preview section
4. Download: Download your created gift card as an image

🛠️ Built With

• React
• TypeScript
• Vite
• Tailwind CSS
• @fontsource for font management

📝 Notes

• Maximum file size for background images: 5MB
• Supported file formats: PNG, JPG, GIF
• Text automatically adjusts to maintain readability on any background

📜 License

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

🙏 Acknowledgments

• Special thanks to the React and TypeScript communities for their excellent documentation