Hockey Jersey Customizer Website

JOB TITLE Build a React/Next.js Interactive Hockey Jersey Customizer Using an Existing SVG PROJECT OVERVIEW I’m looking for an experienced React/Next.js developer with strong SVG and interactive graphics experience to build a web-based hockey jersey customizer. I have a professionally designed SVG showing the front and back of a hockey jersey. The jersey artwork and silhouette must remain visually accurate. This is not a request to generate a jersey using CSS or approximate it with basic shapes. The supplied SVG must be used as the foundation. The goal is to let customers customize individual jersey sections, add graphics and numbers, create body and sleeve stripes, and save or download their completed design. The experience should feel similar to established sports uniform customizers while initially focusing on a polished 2D front-and-back SVG preview. MOST IMPORTANT REQUIREMENT The supplied hockey jersey artwork must be preserved. The jersey must continue to look like a real hockey jersey. The SVG geometry, seams, proportions, front view, and back view should not be replaced with a simplified illustration. The SVG will need to be organized into independently customizable regions without changing its overall appearance. PREFERRED TECHNOLOGY - React - Next.js - TypeScript - SVG-based rendering - CSS I am open to recommendations, but the finished project must work smoothly in modern desktop browsers, including Chrome. The customizer should use the provided SVG directly. Canvas libraries may be considered for overlays and interactions, but the underlying jersey should remain SVG-based and visually accurate. REQUIRED FEATURES 1. INDEPENDENT JERSEY COLOR REGIONS Users should be able to choose colors for individual jersey sections, including: - Main body - Sleeves - Shoulder caps/yoke - Collar trim - Collar diamond or insert - Laces - Bottom hem - Underarm gussets Changing one section must not accidentally affect another section. The developer may need to restructure, label, group, or mask paths inside the existing SVG to create these independent color zones. 2. FRONT AND BACK JERSEY PREVIEW The interface must display: - Front of the jersey - Back of the jersey - Both views updated in real time - Consistent colors and design elements across both views The jersey preview should stay fixed and visible while the customization menu scrolls independently. Opening or closing menu sections should not cause the jersey preview to jump around the page. 3. PLAYER NUMBERS Users should be able to enter a one- or two-digit player number. The customizer should display: - A large number on the back - One digit on each front shoulder/sleeve - One digit on each back shoulder/sleeve For example, if the number is 97: - Front-left shoulder displays 7 - Front-right shoulder displays 9 - Back-left shoulder displays 9 - Back-right shoulder displays 7 For a single-digit number, that digit can appear on all shoulder positions. Additional number requirements: - Selectable number fonts - Fill color - Outline color - Large back number movable vertically - Shoulder digits locked into approved positions - Shoulder digits rotated to follow the actual angle of the supplied jersey sleeves - Shoulder numbers must appear printed onto the jersey rather than floating over it The front and back shoulder placements must be consistent and visually balanced. 4. LOGO UPLOAD AND PLACEMENT Users should be able to upload a team logo in common formats such as PNG, JPEG, and SVG. Logo functionality should include: - Display on the front jersey - Drag-and-drop positioning - Resize handle - Preserve aspect ratio - Keep the logo inside an approved printable area - Visual selection or placement boundary - Save logo placement with the design The implementation should handle transparent PNG and SVG logos correctly. 5. TEAM OR DESIGN NAME Users should be able to enter a team name or design name. The name should: - Appear above the jersey preview - Be included when the design is saved - Be included in downloaded design data - Help identify the design later This is primarily a project/design label and does not necessarily need to be printed directly on the jersey. 6. REPEATING PATTERN UPLOAD Users should be able to upload one repeating pattern, such as camouflage, digital camouflage, or another seamless texture. Supported formats should include PNG, JPEG, and SVG. Pattern controls should include: - Pattern tile size or scale - Pattern opacity - Ability to select which jersey regions receive the pattern Users should be able to apply the pattern to any combination of: - Body - Sleeves - Shoulder caps - Collar trim - Collar insert - Hem - Gussets The pattern must stay clipped inside the selected jersey sections and must not spill outside the jersey. 7. MOVABLE BODY STRIPES The customizer should include an Add Body Stripe button rather than only a dropdown for selecting a predetermined number of stripes. Each body stripe should support: - Adding multiple stripes - Independent color - Independent vertical position - Direct vertical dragging on the jersey - Position slider as an alternative to dragging - Individual removal - Front and back synchronization - Clipping to the main body panels - No spill onto sleeves, the background, or unrelated sections A stripe moved on the front should move to the corresponding position on the back automatically. The stripe should remain horizontal across the body while respecting the jersey’s body shape. 8. MOVABLE SLEEVE STRIPES The customizer should also include an Add Sleeve Stripe feature. This is one of the more technically important parts of the project. Each sleeve stripe must: - Appear on all four visible sleeves - Use exactly the same color on every sleeve - Use exactly the same relative position on every sleeve - Use exactly the same thickness on every sleeve - Be perpendicular to the direction of each sleeve - Mirror correctly between left and right sleeves - Move along the sleeve direction - Be draggable directly on any sleeve - Include a position slider - Include an adjustable thickness control - Include a color picker - Include an individual remove button - Remain completely clipped to the sleeve paths Moving one stripe on any sleeve should update all four copies simultaneously. The developer must calculate the sleeve angles using the supplied jersey artwork rather than using arbitrary horizontal rectangles. No part of a sleeve stripe may appear on the main body, shoulder caps, underarm gussets, background, or any non-sleeve region. Multiple synchronized sleeve stripes should be supported. 9. SAVING AND DOWNLOADING DESIGNS Users should be able to preserve a design so it can be opened later. At minimum, the application should support: - Save in browser storage - Load from browser storage - Download design as a JSON file - Open/import a previously downloaded JSON design Saved design data should include: - Team/design name - All jersey colors - Player number - Number font - Number colors - Number placement - Uploaded logo - Logo position and size - Uploaded repeating pattern - Pattern settings and selected regions - Body stripes - Sleeve stripes - Stripe colors, positions, and thicknesses The save format should be versioned so future changes do not immediately break older saved designs. Please describe any limitations associated with storing uploaded images as data URLs in browser storage. 10. EXPORT OPTIONS Required: - Download the editable design configuration as JSON Please provide separate optional estimates for: - Export the front and back preview as PNG - Export a high-resolution production image - Export an SVG or print-ready file - Generate a PDF design proof - Generate a production summary listing selected colors and uploaded assets Please explain which export formats are practical when working with uploaded SVG, PNG, JPEG, fonts, patterns, and browser-rendered SVG content. USER INTERFACE REQUIREMENTS The layout should have: - Scrollable customization sidebar - Fixed/stable jersey preview area - Collapsible customization sections - Color pickers - Range sliders - Upload controls - Add/remove buttons - Clear status and error messages - Responsive behavior for smaller screens The interface does not need to replicate another company’s branding, but it should feel polished and easy to understand. Suggested menu sections: 1. Team name 2. Jersey colors 3. Body stripes 4. Sleeve stripes 5. Pattern 6. Player numbers 7. Logo 8. Save, load, and export SVG AND GRAPHICS REQUIREMENTS The selected developer should be comfortable with: - Editing and restructuring complex SVG files - SVG groups and path IDs - SVG transforms - Clip paths - Masks - Patterns - Dynamically changing SVG fills - Mirroring elements between front and back - Pointer events inside SVG - Translating browser pointer coordinates into SVG coordinates - Dragging and resizing SVG elements - Preserving the original SVG geometry - Handling transforms inherited from nested SVG groups - Preventing overlays from leaking into unrelated paths The developer must inspect the actual supplied SVG before finalizing the estimate. PERFORMANCE REQUIREMENTS The customizer should: - Update in real time - Drag smoothly - Avoid excessive React re-rendering - Work reliably in current Chrome, Safari, Firefox, and Edge - Avoid duplicating large uploaded images unnecessarily - Handle pointer and touch interactions where practical ACCESSIBILITY EXPECTATIONS Reasonable accessibility support should include: - Labels for form controls - Keyboard-accessible buttons - Clear focus states - Meaningful status messages - Accessible names for interactive SVG elements - Controls that do not rely entirely on color or pointer interaction DELIVERABLES - Complete React/Next.js source code - Updated production-ready jersey SVG - TypeScript implementation - Responsive interface - Working color controls - Number customization - Logo upload and placement - Pattern upload and placement - Body stripe builder - Synchronized sleeve stripe builder - Browser save/load - JSON download/import - Deployment instructions - Basic technical documentation - Explanation of the design JSON format - Clean Git history or delivery through a GitHub repository TESTING AND ACCEPTANCE CRITERIA The project will be accepted when: - The supplied jersey still looks identical to the approved SVG - Every color region can be changed independently - Front and back update correctly - Shoulder digits follow the sleeve angles - Logo placement and resizing work - Patterns remain inside selected regions - Body stripes remain inside the main body - Sleeve stripes remain exclusively inside the sleeves - All four sleeve stripes remain synchronized - Saved designs reopen accurately - The project builds without TypeScript errors - No major browser console errors occur INFORMATION TO INCLUDE IN YOUR PROPOSAL Please include: 1. Examples of SVG customizers, product configurators, design tools, or interactive graphics you have built. 2. Your experience with React, Next.js, and TypeScript. 3. Your experience with SVG clipping, transforms, masks, and pointer interactions. 4. Whether you recommend pure SVG, Canvas, Fabric.js, Konva, or a hybrid, and why. 5. Your estimated timeline. 6. Your estimated total cost. 7. Your hourly rate, if applicable. 9. Any risks or limitations you see. 10. Separate estimates for the core customizer, save/load functionality, PNG export, and print-ready export. 11. Whether you will personally complete the work or use subcontractors. 12. What files or information you need before providing a final fixed-price estimate. SUGGESTED MILESTONES MILESTONE 1: SVG PREPARATION AND TECHNICAL PROTOTYPE - Inspect and organize the supplied SVG - Preserve the approved jersey appearance - Create independent color regions - Confirm front and back rendering - Demonstrate one draggable overlay MILESTONE 2: CORE CUSTOMIZATION - Jersey colors - Collar components - Team/design name - Player numbers and fonts - Shoulder-number positioning MILESTONE 3: LOGO AND PATTERN TOOLS - Logo upload - Dragging and resizing - Print-area limits - Pattern upload - Region selection - Pattern scaling and opacity MILESTONE 4: STRIPE BUILDERS - Add/remove body stripes - Body stripe positioning - Add/remove sleeve stripes - Correct sleeve angles - Four-sleeve synchronization - Sleeve-only clipping - Thickness and color controls MILESTONE 5: SAVING, EXPORT, AND DEPLOYMENT - Browser storage - JSON download/import - Compatibility testing - Optional image export - Documentation and handoff BUDGET I’m currently gathering quotes to understand the realistic cost of building this correctly. Please provide either: - A fixed-price estimate with milestone pricing, or - An estimated range of hours and your hourly rate I’m more interested in an accurate, well-explained estimate than the lowest bid. Proposals that do not address the SVG interaction and clipping requirements will not be considered.