Create customizable photo cards with templates, filters, and adjustable image settings, perfect for social media posts, brand promotions, and eCommerce marketing.
Check out the live demo: Photo Card Generator
Photo Card Generator
Transform your product photos into stunning social media content with this powerful Next.js-based Photo Card Generator. Built for eCommerce businesses and digital marketers, this modern web application streamlines the creation of professional photo cards with customizable templates, advanced filters, and flexible export options. Whether you're managing an online store, running social media campaigns, or handling brand assets, this tool helps you create consistent, eye-catching visuals in seconds. Featuring real-time previews, smart image validation, and responsive design, it's the perfect solution for modern digital content creation.
Create professional social media photo cards for your eCommerce products in seconds
- πΌοΈ Custom template selection and management (PNG format)
- π€ Smart file upload with validation:
- Photos: JPG, JPEG, PNG formats
- Templates: PNG format only
- 10MB size limit with validation feedback
- π¨ Image adjustment controls:
- Scale/resize
- Brightness
- Contrast
- Grayscale
- Sepia effects
- π Guide overlay for precise positioning
- πΎ Multiple export formats (PNG/JPEG)
- π Custom filename support
- π Reset and adjustment capabilities
- π± Responsive design with Tailwind CSS
- π Real-time preview updates
βββ public/
β βββ templates/ # Card template images
β β βββ logo.png
β β βββ template.png
β βββ video/ # Demo assets
β βββ demo.gif # Application demo
βββ src/
β βββ app/ # Next.js app directory
β β βββ Footer.tsx # Footer component
β β βββ globals.css # Global styles
β β βββ layout.tsx # Root layout
β β βββ page.tsx # Home page
β βββ components/ # React components
β β βββ CardPreview.tsx # Preview component
β β βββ Controls.tsx # Image controls
β β βββ TemplateManager.tsx # Template management
β β βββ UploadArea.tsx # File upload area
β βββ types/ # TypeScript definitions
β β βββ css.d.ts # CSS type definitions
β β βββ index.ts # Common type definitions
β βββ utils/
β βββ generateCard.ts # Card generation logic
βββ next-env.d.ts # Next.js TypeScript definitions
βββ next.config.mjs # Next.js configuration
βββ package.json # Project dependencies
βββ postcss.config.js # PostCSS configuration
βββ tailwind.config.js # Tailwind CSS configuration
βββ tsconfig.json # TypeScript configuration
-
Clone the repository:
git clone https://github.com/faha1999/photo-card.git cd photo-card -
Install dependencies:
npm install
-
Run the development server:
npm run dev
-
Open http://localhost:3000 with your browser to see the application.
- Framework: Next.js 15.4
- Language: TypeScript 5.9
- UI Library: React 19.1
- Styling: TailwindCSS 3.3
- Icons: Lucide React
- Image Manipulation: HTML5 Canvas API
- Development Tools:
- PostCSS
- Autoprefixer
- ESLint
- TypeScript Compiler
npm run dev- Starts the development servernpm run build- Builds the app for productionnpm start- Runs the built app in production modenpm run lint- Runs linting checks
- Renders the application footer
- Contains project attribution and links
- Responsive design with Tailwind CSS
- Main application layout wrapper
- Handles metadata and SEO settings
- Manages global styles and fonts
- Main application page component
- Orchestrates component composition
- Manages global state and data flow
- Renders real-time photo card preview
- Implements HTML5 Canvas for image manipulation
- Handles filters and effects (brightness, contrast, etc.)
- Manages guide overlay for positioning
- Provides real-time visual feedback
- Supports touch interactions for mobile users
- Image adjustment interface
- Scale/resize controls with predefined options
- Advanced filter controls:
- Brightness and contrast sliders
- Grayscale and sepia effects
- Blend mode selection
- Export format selection (PNG/JPEG)
- Custom filename input
- Guide overlay toggle
- Reset functionality
- Template selection and management interface
- Supports default and custom templates
- PNG template upload functionality
- Template preview with live updates
- Template deletion and renaming features
- Local storage integration for user templates
- Drag-and-drop template switching
- Smart file upload component
- Drag-and-drop functionality
- File type validation:
- Photos: JPG, JPEG, PNG support
- Templates: PNG only restriction
- 10MB file size limit enforcement
- Real-time validation feedback
- User-friendly error messages
- Progress and status indicators
- TypeScript definitions for CSS modules
- Style-related type declarations
- Custom CSS property definitions
- Core type definitions
- Interface declarations for:
- Filter settings
- Position coordinates
- Card state management
- Component props
- Image generation options
- Core image processing functionality
- Advanced features:
- Image scaling and positioning
- Filter and effect application
- Template overlay handling
- Guide rendering system
- Multiple export format support
- Base64 conversion
- Error handling
- Performance optimizations
- Next.js framework configuration
- Image optimization settings
- Build and deployment options
- Tailwind CSS customization
- Theme and color palette settings
- Responsive breakpoints
- Custom plugin configuration
- TypeScript compiler options
- Path aliases and module resolution
- Strict type checking settings
- Build optimization rules
Contributions are welcome! Here's how you can help:
- Fork the repository
- Create your feature branch:
git checkout -b feature/AmazingFeature
- Commit your changes:
git commit -m 'Add some AmazingFeature' - Push to the branch:
git push origin feature/AmazingFeature
- Open a Pull Request
Please ensure your PR adheres to the following:
- Follows the existing code style
- Includes appropriate tests if applicable
- Updates documentation as needed
- Maintains TypeScript type safety
This project is licensed under the MIT License - see the LICENSE file for details.
Kawsar Ahmed Fahad
- GitHub: @faha1999
Give a βοΈ if this project helped you!