A comprehensive web application featuring three major components:

1. Canvas-Based Sticker Designer - Create custom circular stickers with images, text, and layers
2. Customer Care Chat Widget - Real-time chat support widget
3. Custom Invoice Generator - Dynamic invoice creation with PDF export

Tech Stack

• Framework: Next.js 14+ (App Router)
• Language: TypeScript
• Canvas Library: Fabric.js
• Real-time: Socket.io
• PDF Generation: jsPDF + html2canvas
• State Management: Zustand
• Styling: CSS Modules + Tailwind CSS (optional)

Features

Part 1: Canvas-Based Sticker Designer

• Image upload (drag-and-drop, file browser)
• Circular canvas workspace
• Image manipulation (resize, rotate, position, crop)
• Layer management
• Text addition with fonts and colors
• Undo/Redo functionality
• Zoom controls
• Design templates
• Export as PNG/PDF
• Submission flow with cart

Part 2: Customer Care Chat Widget

• Real-time messaging
• File attachments
• Typing indicators
• Read receipts
• Chat history persistence
• Pre-chat form
• Admin panel (bonus)

Part 3: Custom Invoice Generator

• Dynamic invoice layout
• Company header with logo
• Itemized list with images
• Automatic calculations
• Multiple templates
• PDF download
• Print functionality

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

1. Install dependencies:

npm install

2. Run the development server:

npm run dev

3. Open http://localhost:3000 in your browser

Environment Variables

Create a .env.local file (optional):

NEXT_PUBLIC_SOCKET_URL=http://localhost:3001

Note: The chat widget currently uses simulated responses. For full real-time functionality, you would need to set up a Socket.io server.

Project Structure

├── app/                    # Next.js App Router
│   ├── (routes)/          # Route groups
│   ├── layout.tsx         # Root layout
│   └── page.tsx           # Home page
├── components/            # React components
│   ├── sticker-designer/  # Sticker designer components
│   ├── chat-widget/       # Chat widget components
│   └── invoice/          # Invoice generator components
├── lib/                   # Utilities and helpers
├── stores/                # Zustand stores
├── types/                 # TypeScript types
└── public/                # Static assets

Testing

Run tests:

npm test

Run tests in watch mode:

npm run test:watch

Features Overview

Part 1: Sticker Designer

• Image Upload: Drag-and-drop or file browser upload (PNG, JPG, SVG)
• Canvas Editor: Circular workspace with Fabric.js
• Image Manipulation: Resize, rotate, position objects
• Layer Management: Bring forward, send backward
• Text Tools: Add text with custom fonts, colors, and sizes
• Undo/Redo: Full history management
• Zoom Controls: Zoom in/out for detailed editing
• Design Controls: Color picker, templates, save/export
• Export: PNG and PDF export capabilities
• Submission Flow: Quantity selector, size options, cart integration

Part 2: Chat Widget

• Real-time Interface: Floating chat button (bottom-right)
• Pre-chat Form: Collect name, email, and query type
• Message Features: Text input, file attachments, emoji support
• UX Enhancements: Typing indicators, read receipts, timestamps
• Notifications: Unread message badge
• Chat History: Persistent conversation history
• Responsive: Works on mobile, tablet, and desktop

Part 3: Invoice Generator

• Dynamic Layout: Company header with logo support
• Auto-generated: Invoice numbers and dates
• Itemized List: Items with images, descriptions, quantities, prices
• Calculations: Automatic subtotal, tax, and total calculations
• Templates: Multiple invoice templates (Default, Modern)
• Export Options: PDF download, print functionality
• Email Simulation: Email invoice button (ready for integration)

Technical Implementation

State Management

• Zustand: Lightweight state management with persistence
• Local Storage: Draft saves and session persistence
• Context API: Available for component-level state

Performance Optimizations

• Code Splitting: Dynamic imports for heavy components
• Lazy Loading: Components loaded on demand
• Memoization: React.memo and useMemo where appropriate
• Image Optimization: Next.js Image component ready

Error Handling

• Error Boundaries: Graceful error recovery
• Form Validation: Client-side validation with error messages
• Toast Notifications: User feedback system (component ready)

Testing

• Jest: Unit testing framework
• React Testing Library: Component testing utilities
• Test Coverage: Utility functions tested

Performance Optimizations

• Code splitting with dynamic imports
• Lazy loading for heavy components
• Image optimization
• Memoization for expensive operations

License

MIT