Skip to content

README.md

Latest commit

 

History

History
171 lines (137 loc) · 5.03 KB

README.md

File metadata and controls

171 lines (137 loc) · 5.03 KB

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
  1. Run the development server:
npm run dev
  1. 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