# Project export: CRISHIRT! This document was generated by HackStack to give an AI agent context about a hackathon project. Sections are labeled with their provenance; content marked as truncated was cut to keep this document small. ## Project metadata - Hackathon: TreeHacks 2026 - Tagline: Wear your imagination. Your style. Your story. Crishirts.Your ideas. Our AI. Infinite styles. - Devpost: https://devpost.com/software/crishirt - GitHub: https://github.com/UnknownGod2011/FIBO - Demo: https://crishirt.vercel.app/ - Video: https://www.youtube.com/embed/aKtH_DBFaYA?enablejsapi=1&hl=en_US&rel=0&start=&version=3&wmode=transparent - Team: 0 GitHub contributor(s) β€” ## Devpost submission (written by the team) ### Overview 🌟 The ### Inspiration The inspiration for CRISHIRTS came from a frustrating experience we had while trying to create custom T-shirt designs for a local event. Traditional design tools were either too complex for non-designers or too simplistic for professional results. We watched small business owners struggle with expensive design software, while AI image generators produced beautiful art that looked terrible when actually printed on fabric. When we discovered FIBO's revolutionary JSON-native approach to image generation, we realized we had found the missing piece. Unlike traditional prompt-based AI that produces unpredictable results, FIBO's structured control meant we could create a system that would generate consistently professional, print-ready designs every single time. 🎯 What We Built CRISHIRTS is a comprehensive AI-powered T-shirt design platform that leverages FIBO's most advanced features to solve real production challenges. 🧠 JSON-Native Design Intelligence We built a sophisticated system that translates natural language into FIBO's structured JSON parameters, automatically optimizing for T-shirt printing: πŸ”„ Advanced Multi-Step Refinement System We created an intelligent refinement engine that preserves FIBO's structured prompts while allowing complex multi-operation edits: Background Context Management: Prevents prompt bleeding between operations Multi-Edit Parsing: "add headphones and change the hat color to blue" β†’ 2 precise operations Structured Prompt Preservation: Maintains FIBO's JSON structure across refinement chains πŸ‘• Hyper-Realistic Fabric Integration Using FIBO's professional parameters, we developed a compositing engine that eliminates the "sticker" look: Material-Specific Rendering: Cotton, polyester, and blend fabrics with realistic properties Fabric Light Interaction: Professional lighting simulation using FIBO's advanced controls Ink Absorption Modeling: Realistic printing effects based on fabric type πŸ”¬ Technical Deep Dive Leveraging FIBO's Structured Control The breakthrough came when we realized FIBO's JSON-native approach could solve the consistency problem plaguing AI-generated designs. We built a translation layer that converts user intent into precise FIBO parameters: πŸŽ› Professional Parameter Optimization We implemented T-shirt-specific parameter optimization that automatically adjusts FIBO's professional controls: Camera Angle Optimization: Front-facing for chest designs, angled for sleeve prints Lighting Adaptation: Enhanced contrast for dark fabrics using FIBO's lighting controls Color Palette Management: Automatic color avoidance for better fabric contrast HDR / 16-bit Output: Professional print quality using FIBO's advanced output formats 🧩 Background Context Isolation One of our biggest technical challenges was preventing context bleeding between operations. We solved this with a sophisticated background management system: 🚧 Major Challenges Overcome Challenge 1: Multi-Operation Parsing Problem: Instructions like "add headphones and change the hat color to blue" were being parsed incorrectly. Solution: We developed a priority-based parsing system that handles complex multi-edit operations: Challenge 2: Background Persistence Problem: Background contexts were bleeding between refinement operations, causing inconsistent results. Solution: We implemented a refinement chain system that maintains background state while preventing unwanted inference: Context Isolation: Each request operates in complete isolation Background Preservation: Explicit backgrounds persist across non-background operations Theme Prevention: Prevents automatic background addition from character themes Challenge 3: Realistic Fabric Integration Problem: AI-generated designs looked "pasted on" when composited onto T-shirts. Solution: We developed a hyper-realistic compositing engine using FIBO's professional parameters: Fabric Interaction Simulation: Models how ink absorbs into different materials Perspective Correction: Applies subtle warping for natural draping Light Scattering: Simulates fabric-specific light interaction 🎨 FIBO Features We Mastered Image Generation (V2) Structured Prompt Generation HDR / 16-bit Output Transparent Background Generation Image Editing Suite Background Removal & Replacement GenFill Integration Enhancement Pipeline Advanced Compositing Multi-Layer Blending Professional Parameters Material Simulation πŸ“Š What We Learned FIBO's Game-Changing Advantages Deterministic Control Professional Quality Structured Refinement Commercial Safety Production Workflow Insights Context Management Parameter Optimization Multi-Step Processing User Experience Translation πŸ† Innovation Highlights JSON-Native Workflow Excellence Automated Parameter Optimization Refinement Chain Management Professional Output Pipeline Advanced Controllability Real-time Parameter Visualization T-shirt-Specific Presets Progressive Complexity Production-Ready Architecture Scalable Design Generation AR Try-On Integration Commercial Compliance πŸš€ The Future of AI-Powered Design CRISHIRTS represents more than just a T-shirt design toolβ€”it's a glimpse into the future of AI-powered creative workflows. By fully embracing FIBO's JSON-native approach, we've created a system that delivers the consistency and quality that professional designers demand while remaining accessible to everyday users. Built with passion for the FIBO Hackathon, showcasing the revolutionary potential of JSON-native AI image generation. πŸ”– Hashtags ## README (from the GitHub repository) # CRISHIRTS - AI-Powered T-Shirt Design Platform **CRISHIRTS** is an AI-powered T-shirt design platform that leverages Bria FIBO's advanced image generation capabilities. The platform provides intuitive tools for creating, customizing, and visualizing custom apparel designs with professional-grade control and real-time preview. ## ✨ Features ### 🎨 **AI Design Generation** - Natural language to image generation using Bria FIBO - Advanced parameter control (camera angles, lighting, colors) - Real-time design refinement and editing - Multiple style presets and customization options ### πŸ‘• **T-Shirt Mockup System** - Instant design overlay on T-shirt templates - Multiple T-shirt colors and styles - Real-time mockup updates - Professional design placement ### πŸ“± **AR Try-On** - Augmented reality T-shirt visualization - Real-time body tracking - Interactive design preview - Mobile-friendly experience ### πŸ’Ύ **Design Management** - Save and organize designs - Export in print-ready formats - Design library with search and filters - Batch processing capabilities ## πŸš€ Technology Stack **Frontend:** - React 18 with TypeScript - Vite for build tooling - Tailwind CSS + shadcn/ui components - React Three Fiber for 3D mockup rendering - @mediapipe/tasks-vision for AR body tracking - Zustand for state management **Backend:** - Node.js with Express - Bria FIBO API integration - Sharp for image processing - Canvas for mockup generation - JSON Schema validation (Ajv) ## πŸ› οΈ Setup Instructions ### Prerequisites - Node.js 18+ - Bria FIBO API key ### Installation 1. **Clone the repository** ```bash git clone https://github.com/UnknownGod2011/CRISHIRT.git cd CRISHIRT ``` 2. **Install dependencies** ```bash # Frontend npm install # Backend cd backend npm install ``` 3. **Environment Setup** ```bash # Backend (.env) FIBO_API_KEY=your_fibo_api_key_here PORT=5000 # Frontend (.env) VITE_API_URL=http://localhost:5000 ``` 4. **Start the application** ```bash # Terminal 1 - Backend cd backend npm start # Terminal 2 - Frontend npm run dev ``` 5. **Open in browser** ``` http://localhost:5173 ``` ## 🎬 How It Works 1. **Enter Prompt**: Describe your design idea in natural language 2. **AI Generation**: FIBO creates professional designs from your prompt 3. **Customize**: Adjust parameters like colors, lighting, and composition 4. **Preview**: See your design on T-shirt mockups instantly 5. **Try On**: Use AR to see how it looks on you 6. **Export**: Save designs in print-ready formats ## 🎯 Use Cases - **Custom Apparel**: Create unique T-shirt designs - **Small Businesses**: Generate merchandise designs quickly - **Personal Projects**: Design custom shirts for events or gifts - **Print Shops**: Offer AI-powered design services - **Fashion Designers**: Rapid prototyping and concept exploration ## πŸ”§ API Endpoints ``` POST /api/generate # Generate design from prompt/parameters POST /api/mockup # Create T-shirt mockup POST /api/batch/generate # Start batch generation GET /api/batch/:id/status # Check batch progress POST /api/designs # Save design to library GET /api/designs # List saved designs POST /api/designs/export # Export design bundle ``` ## πŸ§ͺ Testing ```bash # Run unit tests npm test # Run property-based tests npm run test:properties # Run E2E tests npm run test:e2e ``` ## πŸ“ License MIT License - See LICENSE file for details ## 🀝 Contributing This project was created for the FIBO Hackathon. For questions or collaboration opportunities, please reach out! --- **Built with ❀️ using Bria FIBO AI** *Empowering creativity through AI-powered design generation.* ## Detected evidence (automated analysis) Indexed codebase: 108 recognized source files, 773 KB. - CSS (language) β€” detected in the code - Express (technology) β€” detected in the code - HTML (language) β€” detected in the code - JavaScript (language) β€” detected in the code - OpenAI (technology) β€” detected in the code - React (technology) β€” detected in the code - Tailwind CSS (technology) β€” detected in the code - TypeScript (language) β€” detected in the code - Node.js (technology) β€” claimed on Devpost, not found in the code ## Codebase structure (from repository index) ### Files (120 of 122) ``` .env.example .gitignore backend/.env.example backend/BACKGROUND_CONTEXT_IMPLEMENTATION.md backend/BRIA_REFINEMENT_IMPLEMENTATION_V2.md backend/BRIA_REFINEMENT_IMPLEMENTATION.md backend/COMPREHENSIVE_FIXES_SUMMARY.md backend/CRITICAL_BUGS_FIXED_SUMMARY.md backend/designs/.gitkeep backend/ENHANCED_NLP_SUMMARY.md backend/enhanced-compositing-engine.js backend/enhanced-compositing.test.js backend/FIBO_COMPOSITING_TEST_RESULTS.md backend/FINAL_COMPREHENSIVE_FIXES_SUMMARY.md backend/FINAL_STATUS_SUMMARY.md backend/hyper-realistic-compositing.js backend/index.fibo.js backend/index.openai.js backend/LOG_ISSUES_FIXED_SUMMARY.md backend/package.json backend/PRODUCTION_FIXES_SUMMARY.md backend/REMAINING_ISSUES_FIXED_SUMMARY.md backend/render.yaml backend/test-complete-flow.js backend/test-enhanced-compositing.js backend/test-fibo-genfill-fixed.js backend/test-fibo-merge-existing.js backend/test-fibo-realistic-compositing.js backend/test-full-refinement-flow.js backend/test-multi-edit-live.js backend/test-server-startup.js backend/test-simple-realistic-compositing.js backend/test-upload-processing.js BRIA_API_DOCS.txt BRIA_SETUP.md components.json deploy.sh DEPLOYMENT_CHECKLIST.md DEPLOYMENT.md eslint.config.js FIBO_README.md HACKATHON_ADVANCED_FEATURES.md index.html INTEGRATION_STATUS.md MULTI_EDIT_FIX_SUMMARY.md package.json postcss.config.js QUICK_DEPLOY.md README.md src/App.css src/App.tsx src/components/ARTryOn.tsx src/components/ColorWheel.tsx src/components/ControlPanel.tsx src/components/TShirtMockup.tsx src/components/ui/accordion.tsx src/components/ui/alert-dialog.tsx src/components/ui/alert.tsx src/components/ui/aspect-ratio.tsx src/components/ui/avatar.tsx src/components/ui/badge.tsx src/components/ui/breadcrumb.tsx src/components/ui/button.tsx src/components/ui/calendar.tsx src/components/ui/card.tsx src/components/ui/carousel.tsx src/components/ui/chart.tsx src/components/ui/checkbox.tsx src/components/ui/collapsible.tsx src/components/ui/command.tsx src/components/ui/context-menu.tsx src/components/ui/dialog.tsx src/components/ui/drawer.tsx src/components/ui/dropdown-menu.tsx src/components/ui/form.tsx src/components/ui/hover-card.tsx src/components/ui/input-otp.tsx src/components/ui/input.tsx src/components/ui/label.tsx src/components/ui/menubar.tsx src/components/ui/navigation-menu.tsx src/components/ui/pagination.tsx src/components/ui/popover.tsx src/components/ui/PrintedDesignCanvas.tsx src/components/ui/progress.tsx src/components/ui/radio-group.tsx src/components/ui/resizable.tsx src/components/ui/scroll-area.tsx src/components/ui/select.tsx src/components/ui/separator.tsx src/components/ui/sheet.tsx src/components/ui/skeleton.tsx src/components/ui/slider.tsx src/components/ui/sonner.tsx src/components/ui/switch.tsx src/components/ui/table.tsx src/components/ui/tabs.tsx src/components/ui/textarea.tsx src/components/ui/toast.tsx src/components/ui/toaster.tsx src/components/ui/toggle-group.tsx src/components/ui/toggle.tsx src/components/ui/tooltip.tsx src/components/VRTryOn.tsx src/hooks/use-toast.ts src/index.css src/lib/utils.ts src/main.tsx src/pages/ar-tryon.tsx src/pages/cart.tsx src/pages/collection.tsx src/pages/vr-tryon.tsx src/store/AppContext.tsx src/vite-env.d.ts tailwind.config.js tsconfig.app.json tsconfig.app.tsbuildinfo tsconfig.json tsconfig.node.json tsconfig.node.tsbuildinfo [2 more files omitted for size] ``` ### Dependencies - backend/package.json: axios@^1.11.0, canvas@^3.2.0, concurrently@^9.0.1, cors@^2.8.5, deepmerge@^4.3.1, dotenv@^17.2.1, express@^5.1.0, node-fetch@^3.3.2, nodemon@^3.1.10, sharp@^0.34.5 - package.json: @eslint/js@^9.11.1, @hookform/resolvers@^3.9.0, @radix-ui/react-accordion@^1.2.0, @radix-ui/react-alert-dialog@^1.1.1, @radix-ui/react-aspect-ratio@^1.1.0, @radix-ui/react-avatar@^1.1.0, @radix-ui/react-checkbox@^1.1.1, @radix-ui/react-collapsible@^1.1.0, @radix-ui/react-context-menu@^2.2.1, @radix-ui/react-dialog@^1.1.1, @radix-ui/react-dropdown-menu@^2.1.1, @radix-ui/react-hover-card@^1.1.1, @radix-ui/react-icons@^1.3.0, @radix-ui/react-label@^2.1.0, @radix-ui/react-menubar@^1.1.1, @radix-ui/react-navigation-menu@^1.2.0, @radix-ui/react-popover@^1.1.1, @radix-ui/react-progress@^1.1.0, @radix-ui/react-radio-group@^1.2.0, @radix-ui/react-scroll-area@^1.1.0, @radix-ui/react-select@^2.1.1, @radix-ui/react-separator@^1.1.0, @radix-ui/react-slider@^1.2.0, @radix-ui/react-slot@^1.1.0, @radix-ui/react-switch@^1.1.0, @radix-ui/react-tabs@^1.1.0, @radix-ui/react-toast@^1.2.1, @radix-ui/react-toggle@^1.1.0, @radix-ui/react-toggle-group@^1.1.0, @radix-ui/react-tooltip@^1.1.2, @types/node@^22.7.3, @types/react@^18.3.9, @types/react-dom@^18.3.0, @types/react-router-dom@^5.3.3, @vitejs/plugin-react@^4.3.1, autoprefixer@^10.4.20, axios@^1.13.2, class-variance-authority@^0.7.0, clsx@^2.1.1, cmdk@^1.0.0, concurrently@^9.2.0, cors@^2.8.5, date-fns@^3.6.0, dotenv@^17.2.1, embla-carousel-react@^8.3.0, eslint@^9.11.1, eslint-plugin-react-hooks@^5.1.0-rc.0, eslint-plugin-react-refresh@^0.4.12, express@^5.1.0, framer-motion@^12.23.25, globals@^15.9.0, input-otp@^1.2.4, lucide-react@^0.446.0, next-themes@^0.3.0, node-fetch@^3.3.2, nodemon@^3.1.10, openai@^5.13.1, postcss@^8.4.47, react@^18.3.1, react-day-picker@^8.10.1, react-dom@^18.3.1, react-hook-form@^7.53.0, react-resizable-panels@^2.1.3, react-rnd@^10.5.2, react-router-dom@^7.10.1, recharts@^2.12.7, sonner@^1.5.0, tailwind-merge@^2.5.2, tailwindcss@^3.4.13, tailwindcss-animate@^1.0.7, typescript@^5.5.3, typescript-eslint@^8.7.0, vaul@^1.0.0, vite@^5.4.8, zod@^3.23.8 ### Recent commits (newest first) - Harden backend runtime safety - Add guarded backend runtime safety maintenance - Stabilize API request and cache handling - Add guarded API stability maintenance - Implement working VR Try-On using BRIA background replace approach - Hide API key - replace with placeholder - Add debug endpoint to check environment variables in production - Update prompt text: change 't-shirt printing' to 'printing' - Remove 'clean design suitable for t-shirt printing' from prompt modifications - Fix TypeScript build errors - remove unused variables - Fix VR Try-On to use composite T-shirt+design images instead of raw designs - Fix clipboard loading indicator: Add 10-second timer-based loading circle next to Remove button - Fix UI issues: Add proper loading indicator for clipboard paste processing and remove purple hover effect from CRISHIRTS logo - Fix collection cart behavior: Collection items now appear as complete T-shirts in cart, not as designs pasted on blank T-shirts. Added collection item support to CartItem interface and cart display logic. - feat: Add cart functionality to exclusive collection and improve color palette - Update collection: Remove first 4 items, rename remaining T-shirts with proper names, and add loading indicator for clipboard paste processing - Add new T-shirts from TeeCollection to Exclusive Collection page - 4 new premium designs with images - Fix footer: Restore original layout structure and make text-only changes to content - SAFE UI cleanup: Change Enhanced design to Your sketch, remove Enhanced colors, remove Output format, remove Fresh canvas message, simplify footer - NO layout changes - REVERT ALL CHANGES: Restore original footer, VR layout, Enhanced colors, Output format, Fresh canvas message, and Enhanced design text to fix layout issues ## Key source files (fetched from GitHub, selected and truncated for size) ### QUICK_DEPLOY.md ```markdown # ⚑ QUICK DEPLOYMENT GUIDE ## πŸš€ **Deploy in 10 Minutes** ### **STEP 1: Backend on Render (5 min)** 1. **Go to [render.com](https://render.com)** β†’ Sign up/Login 2. **Click "New +" β†’ "Web Service"** 3. **Connect GitHub** β†’ Select your repository 4. **Settings**: ``` Root Directory: backend Environment: Node Build Command: npm install Start Command: node index.fibo.js Plan: Free ``` 5. **Environment Variables** (click "Advanced"): ``` BRIA_API_TOKEN = your_actual_bria_token_here NODE_ENV = production PORT = 5000 ``` 6. **Click "Create Web Service"** β†’ Wait 3-5 minutes ### **STEP 2: Frontend on Vercel (3 min)** 1. **Install Vercel CLI**: ```bash npm install -g vercel ``` 2. **Login**: ```bash vercel login ``` 3. **Deploy** (from project folder): ```bash vercel --prod ``` 4. **Set Environment Variable** in Vercel Dashboard: - Go to your project β†’ Settings β†’ Environment Variables - Add: `VITE_API_URL` = `https://your-render-url.onrender.com` ### **STEP 3: Test & Submit** 1. **Test your live app** 2. **Update hackathon submission with live URLs** 3. **πŸŽ‰ You're done!** --- ## πŸ”§ **Troubleshooting** ### Backend not starting? - Check Render logs for BRIA_API_TOKEN error - Ensure token is valid ### Frontend can't connect? - Verify VITE_API_URL in Vercel settings - Check browser console for CORS errors ### Need help? - Backend health check: `https://your-backend.onrender.com/api/health` - Check Render/Vercel logs for errors --- ## πŸ“‹ **Final Checklist** - [ ] Backend deployed on Render - [ ] Frontend deployed on Vercel - [ ] Environment variables set - [ ] App works end-to-end - [ ] URLs updated in hackathon submission ``` ### DEPLOYMENT.md ```markdown # πŸš€ CRISHIRTS Deployment Guide ## Quick Deployment Steps ### 🎯 **Backend on Render (5 minutes)** 1. **Create Render Account**: Go to [render.com](https://render.com) and sign up 2. **Connect GitHub**: Link your GitHub repository 3. **Create Web Service**: - Click "New +" β†’ "Web Service" - Connect your repository - **Root Directory**: `backend` - **Environment**: `Node` - **Build Command**: `npm install` - **Start Command**: `node index.fibo.js` - **Plan**: Free 4. **Set Environment Variables**: ``` BRIA_API_TOKEN=your_actual_bria_token NODE_ENV=production PORT=5000 ``` 5. **Deploy**: Click "Create Web Service" ### 🎨 **Frontend on Vercel (3 minutes)** 1. **Install Vercel CLI**: ```bash npm install -g vercel ``` 2. **Login to Vercel**: ```bash vercel login ``` 3. **Deploy from project root**: ```bash cd project vercel --prod ``` 4. **Set Environment Variables** in Vercel Dashboard: ``` VITE_API_URL=https://your-render-backend-url.onrender.com ``` ## πŸ“‹ **Environment Variables Needed** ### Backend (Render): - `BRIA_API_TOKEN` - Your FIBO API token - `NODE_ENV=production` - `PORT=5000` ### Frontend (Vercel): - `VITE_API_URL` - Your Render backend URL ## πŸ”§ **Troubleshooting** ### Backend Issues: - Check Render logs for BRIA_API_TOKEN errors - Ensure all dependencies are in package.json - Verify CORS origins include your Vercel domain ### Frontend Issues: - Check browser console for API connection errors - Verify VITE_API_URL points to correct backend - Ensure build completes without TypeScript errors ## 🎯 **Final URLs** - **Backend**: `https://your-app-name.onrender.com` - **Frontend**: `https://your-app-name.vercel.app` ## ⚑ **Quick Commands** ```bash # Deploy frontend npm run deploy:frontend # Check backend health curl https://your-backend-url.onrender.com/api/health ``` ``` ### package.json ``` { "name": "ai-tshirt-design", "private": true, "version": "1.0.0", "type": "module", "scripts": { "dev:frontend": "vite", "build": "tsc -b && vite build", "lint": "eslint .", "preview": "vite preview", "start:openai": "node backend/index.openai.js", "dev:openai": "nodemon backend/index.openai.js", "start:bria": "node backend/index.fibo.js", "dev:bria": "nodemon backend/index.fibo.js", "start:fibo": "node backend/index.fibo.js", "dev:fibo": "nodemon backend/index.fibo.js", "start": "concurrently \"npm run start:bria\" \"npm run dev:frontend\"", "dev": "concurrently \"npm run dev:bria\" \"npm run dev:frontend\"", "deploy:backend": "echo 'Deploy backend to Render manually'", "deploy:frontend": "vercel --prod" }, "dependencies": { "@hookform/resolvers": "^3.9.0", "@radix-ui/react-accordion": "^1.2.0", "@radix-ui/react-alert-dialog": "^1.1.1", "@radix-ui/react-aspect-ratio": "^1.1.0", "@radix-ui/react-avatar": "^1.1.0", "@radix-ui/react-checkbox": "^1.1.1", "@radix-ui/react-collapsible": "^1.1.0", "@radix-ui/react-context-menu": "^2.2.1", "@radix-ui/react-dialog": "^1.1.1", "@radix-ui/react-dropdown-menu": "^2.1.1", "@radix-ui/react-hover-card": "^1.1.1", "@radix-ui/react-icons": "^1.3.0", "@radix-ui/react-label": "^2.1.0", "@radix-ui/react-menubar": "^1.1.1", "@radix-ui/react-navigation-menu": "^1.2.0", "@radix-ui/react-popover": "^1.1.1", "@radix-ui/react-progress": "^1.1.0", "@radix-ui/react-radio-group": "^1.2.0", "@radix-ui/react-scroll-area": "^1.1.0", "@radix-ui/react-select": "^2.1.1", "@radix-ui/react-separator": "^1.1.0", "@radix-ui/react-slider": "^1.2.0", "@radix-ui/react-slot": "^1.1.0", "@radix-ui/react-switch": "^1.1.0", "@radix-ui/react-tabs": "^1.1.0", "@radix-ui/react-toast": "^1.2.1", "@radix-ui/react-toggle": "^1.1.0", "@radix-ui/react-toggle-group": "^1.1.0", "@radix-ui/react-tooltip": "^1.1.2", "@types/react-router-dom": "^5.3.3", "axios": "^1.13.2", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", "cmdk": "^1.0.0", "cors": "^2.8.5", "date-fns": "^3.6.0", "dotenv": "^17.2.1", "embla-carousel-react": "^8.3.0", "express": "^5.1.0", "framer-motion": "^12.23.25", "input-otp": "^1.2.4", "lucide-react": "^0.446.0", "next-themes": "^0.3.0", "node-fetch": "^3.3.2", "openai": "^5.13.1", "react": "^18.3.1", "react-day-picker": "^8.10.1", "react-dom": "^18.3.1", "react-hook-form": "^7.53.0", "react-resizable-panels": "^2.1.3", "react-rnd": "^10.5.2", "react-router-dom": "^7.10.1", "recharts": "^2.12.7", "sonner": "^1.5.0", "tailwind-merge": "^2.5.2", "tailwindcss-animate": "^1.0.7", "vaul": "^1.0.0", "zod": "^3.23.8" }, "devDependencies": { "@eslint/js": "^9.11.1", "@types/node": "^22.7.3", "@types/react": "^18.3.9", "@types/react-dom": "^18.3.0", "@vitejs/plugin-react": "^4.3.1", "autoprefixer": "^10.4.20", "concurrently": "^9.2.0", "eslint": "^9.11.1", "eslint-plugin-react-hooks": "^5.1.0-rc.0", "eslint-plugin-react-refresh": "^0.4.12", "globals": "^15.9.0", "nodemon": "^3.1.10", "postcss": "^8.4.47", "tailwindcss": "^3.4.13", "typescript": "^5.5.3", "typescript-eslint": "^8.7.0", "vite": "^5.4.8" } } ``` ### backend/package.json ``` { "name": "ai-tshirt-design", "version": "1.0.0", "description": "AI T-shirt design project (frontend + backend)", "main": "index.js", "type": "module", "scripts": { "start": "node index.fibo.js", "dev": "nodemon index.fibo.js", "start:sd": "node index.sd.js", "dev:sd": "nodemon index.sd.js" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "axios": "^1.11.0", "canvas": "^3.2.0", "cors": "^2.8.5", "deepmerge": "^4.3.1", "dotenv": "^17.2.1", "express": "^5.1.0", "node-fetch": "^3.3.2", "sharp": "^0.34.5" }, "devDependencies": { "concurrently": "^9.0.1", "nodemon": "^3.1.10" } } ``` ### src/main.tsx ```typescript import { StrictMode } from 'react'; import { createRoot } from 'react-dom/client'; import { BrowserRouter } from 'react-router-dom'; import App from './App.tsx'; import './index.css'; createRoot(document.getElementById('root')!).render( ); ``` ### src/App.tsx ```typescript import { Link, Routes, Route } from 'react-router-dom'; import { Sparkles, ShoppingCart } from 'lucide-react'; import { AppProvider, useTshirtState, useDesignState, useCartState } from './store/AppContext'; import TShirtMockup from './components/TShirtMockup'; import ControlPanel from './components/ControlPanel'; import Collection from './pages/collection'; import Cart from './pages/cart'; import VRTryOnPage from './pages/vr-tryon.tsx'; import { useEffect } from 'react'; function AppContent() { const { tshirtColor, setTshirtColor } = useTshirtState(); const { currentImage, currentSide, switchSide } = useDesignState(); const { cartItems } = useCartState(); // Wake up Render backend on app load useEffect(() => { const wakeUpBackend = async () => { try { const apiUrl = import.meta.env.VITE_API_URL || (window.location.hostname === 'localhost' ? 'http://localhost:5000' : 'https://fibo-t5mv.onrender.com'); console.log('πŸš€ Waking up backend server...'); const response = await fetch(`${apiUrl}/api/health`, { method: 'GET', headers: { 'Content-Type': 'application/json', }, }); if (response.ok) { console.log('βœ… Backend server is awake and ready!'); } else { console.log('⚠️ Backend responded but may be starting up...'); } } catch (error) { console.log('⏳ Backend is starting up, this is normal on first load'); } }; // Wake up immediately wakeUpBackend(); // Also wake up after 30 seconds to ensure it's fully ready const wakeUpTimer = setTimeout(wakeUpBackend, 30000); return () => clearTimeout(wakeUpTimer); }, []); return (
{/* Header */}
{/* Brand Name + Logo */}

Crishirts Crishirts Logo

{/* Navigation Links */}
{/* Routes */}
{/* Left Side - T-shirt Mockup */}

Live Preview

See your design in real-time

Crishirt - FIBO AI T-shirt Design Platform
``` ### eslint.config.js ```javascript import js from '@eslint/js'; import globals from 'globals'; import reactHooks from 'eslint-plugin-react-hooks'; import reactRefresh from 'eslint-plugin-react-refresh'; import tseslint from 'typescript-eslint'; export default tseslint.config( { ignores: ['dist'] }, { extends: [js.configs.recommended, ...tseslint.configs.recommended], files: ['**/*.{ts,tsx}'], languageOptions: { ecmaVersion: 2020, globals: globals.browser, }, plugins: { 'react-hooks': reactHooks, 'react-refresh': reactRefresh, }, rules: { ...reactHooks.configs.recommended.rules, 'react-refresh/only-export-components': [ 'warn', { allowConstantExport: true }, ], }, } ); ``` [98 more indexed source files omitted to keep this export small. The full file list is in the Codebase structure section above.]