{"id":49539130,"url":"https://github.com/shubhojit-mitra-dev/tshirt-customizer","last_synced_at":"2026-05-02T13:35:45.622Z","repository":{"id":334977357,"uuid":"1143624457","full_name":"shubhojit-mitra-dev/tshirt-customizer","owner":"shubhojit-mitra-dev","description":"A 3D Tshirt customization website using ThreeJS and UV Mapping for real time color changes and Custom logo mapping on Tshirt. AI features to generate tshirt textures and logo with user prompt.","archived":false,"fork":false,"pushed_at":"2026-01-27T22:42:25.000Z","size":1419,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2026-01-28T07:32:54.076Z","etag":null,"topics":["express","react-18","tailwindcss","threejs"],"latest_commit_sha":null,"homepage":"https://tshirt-customizer-project.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shubhojit-mitra-dev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-01-27T20:07:16.000Z","updated_at":"2026-01-27T22:45:11.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/shubhojit-mitra-dev/tshirt-customizer","commit_stats":null,"previous_names":["shubhojit-mitra-dev/tshirt-customizer"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/shubhojit-mitra-dev/tshirt-customizer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shubhojit-mitra-dev%2Ftshirt-customizer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shubhojit-mitra-dev%2Ftshirt-customizer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shubhojit-mitra-dev%2Ftshirt-customizer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shubhojit-mitra-dev%2Ftshirt-customizer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shubhojit-mitra-dev","download_url":"https://codeload.github.com/shubhojit-mitra-dev/tshirt-customizer/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shubhojit-mitra-dev%2Ftshirt-customizer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32536580,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-02T12:25:33.646Z","status":"ssl_error","status_checked_at":"2026-05-02T12:24:51.733Z","response_time":132,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["express","react-18","tailwindcss","threejs"],"created_at":"2026-05-02T13:35:44.950Z","updated_at":"2026-05-02T13:35:45.610Z","avatar_url":"https://github.com/shubhojit-mitra-dev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🎨 3D T-Shirt Customizer\n\nA modern, interactive 3D t-shirt customization platform built with React Three Fiber and AI-powered design generation. Create unique, personalized t-shirts with real-time 3D visualization and AI-generated designs.\n\n![T-Shirt Customizer](./client/public/image.png)\n\n## ✨ Features\n\n### 🎯 Core Features\n- **3D Real-time Visualization**: Interactive 3D t-shirt model with realistic lighting and shadows\n- **AI-Powered Design Generation**: Generate unique designs using Pollinations AI\n- **Color Customization**: Choose from unlimited colors for your t-shirt base\n- **Logo \u0026 Pattern Placement**: Add logos or full-texture patterns to your t-shirt\n- **File Upload Support**: Upload your own images for custom designs\n- **Responsive Design**: Works seamlessly across desktop and mobile devices\n\n### 🛠️ Technical Features\n- **WebGL Rendering**: Powered by Three.js for smooth 3D graphics\n- **Real-time State Management**: Using Valtio for reactive state updates\n- **Smooth Animations**: Framer Motion animations for enhanced UX\n- **Modern UI/UX**: Clean, intuitive interface with Tailwind CSS\n- **RESTful API**: Backend API for AI image generation\n- **Cloud Deployment**: Ready for production deployment\n\n## 📋 Prerequisites\n\nBefore you begin, ensure you have the following installed:\n- **Node.js** (v16 or higher)\n- **npm** or **yarn**\n- **Git**\n\n## 🔧 Installation\n\n### 1. Clone the Repository\n\n```bash\ngit clone https://github.com/yourusername/tshirt-customizer.git\ncd tshirt-customizer\n```\n\n### 2. Backend Setup\n\n```bash\ncd server\nnpm install\n```\n\n#### Environment Variables\n\nCreate a `.env` file in the server directory:\n\n```env\nPORT=8080\nNODE_ENV=development\n```\n\n#### Start Backend Server\n\n```bash\n# Development\nnpm run dev\n\n# Production\nnpm start\n```\n\nThe backend will run on `http://localhost:8080`\n\n### 3. Frontend Setup\n\n```bash\ncd ../client\nnpm install\n```\n\n#### Environment Variables\n\nCreate a `.env` file in the client directory:\n\n```env\nVITE_BACKEND_URL=http://localhost:8080/api/v1/ai-image\n```\n\nFor production, create `.env.production`:\n\n```env\nVITE_BACKEND_URL=https://your-backend-url.vercel.app/api/v1/ai-image\n```\n\n#### Start Frontend Development Server\n\n```bash\nnpm run dev\n```\n\nThe frontend will run on `http://localhost:5173`\n\n## 🏗️ Project Structure\n\n```\ntshirt-customizer/\n├── client/                          # Frontend React application\n│   ├── public/\n│   │   ├── shirt_baked.glb         # 3D T-shirt model\n│   │   ├── threejs.png             # Default logo\n│   │   └── image.png               # Preview image\n│   ├── src/\n│   │   ├── assets/                 # Static assets\n│   │   ├── canvas/                 # 3D Canvas components\n│   │   │   ├── Backdrop.jsx        # Shadow/lighting setup\n│   │   │   ├── CameraRig.jsx       # Camera controls\n│   │   │   ├── Shirt.jsx           # 3D T-shirt component\n│   │   │   └── index.jsx           # Main canvas\n│   │   ├── components/             # Reusable components\n│   │   │   ├── AIPicker.jsx        # AI prompt interface\n│   │   │   ├── ColorPicker.jsx     # Color selection\n│   │   │   ├── CustomButton.jsx    # Custom button component\n│   │   │   ├── FilePicker.jsx      # File upload component\n│   │   │   └── Tab.jsx             # Tab component\n│   │   ├── config/                 # Configuration files\n│   │   │   ├── config.js           # Environment config\n│   │   │   ├── constants.js        # App constants\n│   │   │   ├── helpers.js          # Helper functions\n│   │   │   └── motion.js           # Animation configs\n│   │   ├── pages/                  # Main pages\n│   │   │   ├── Customizer.jsx      # Customization interface\n│   │   │   └── Home.jsx            # Landing page\n│   │   ├── store/                  # State management\n│   │   │   └── index.js            # Valtio store\n│   │   └── styles/                 # Global styles\n│   ├── package.json\n│   └── vite.config.js\n├── server/                         # Backend Node.js application\n│   ├── controllers/\n│   │   └── ai-image.controllers.js # AI image generation logic\n│   ├── routes/\n│   │   └── ai-image.routes.js      # API routes\n│   ├── index.js                    # Express server\n│   ├── package.json\n│   └── vercel.json                 # Vercel deployment config\n└── README.md\n```\n\n## 🎮 Usage\n\n### Getting Started\n\n1. **Launch the Application**: Navigate to `http://localhost:5173`\n2. **Click \"Customize It\"**: Enter the 3D customization mode\n3. **Choose Your Style**: Use the sidebar tools to customize your t-shirt\n\n### Customization Options\n\n#### 🎨 Color Picker\n- Select any color for your t-shirt base\n- Real-time color updates on the 3D model\n- Smooth color transitions with easing animations\n\n#### 🖼️ File Upload\n- Upload PNG, JPG, or other image formats\n- Automatically converts images for 3D texture mapping\n- Supports both logo and full-texture modes\n\n#### 🤖 AI Design Generator\n- Enter descriptive prompts (e.g., \"futuristic geometric pattern\")\n- AI generates unique designs based on your description using Pollinations AI\n- Instantly applies generated images to your t-shirt\n\n#### 👕 Display Options\n- **Logo Mode**: Places design as a small logo on the chest\n- **Full Texture**: Applies design across the entire t-shirt\n- Toggle between modes for different looks\n\n## 🔌 API Documentation\n\n### Base URL\n```\nDevelopment: http://localhost:8080/api/v1\nProduction: https://your-backend-url.vercel.app/api/v1\n```\n\n### Endpoints\n\n#### Health Check\n```http\nGET /\n```\n**Response:**\n```json\n{\n  \"message\": \"health check\"\n}\n```\n\n#### AI Image Route Info\n```http\nGET /ai-image\n```\n**Response:**\n```json\n{\n  \"message\": \"Hello from AI Image Route\"\n}\n```\n\n#### Generate AI Image\n```http\nPOST /ai-image\n```\n\n**Request Body:**\n```json\n{\n  \"prompt\": \"create a tiger skin pattern texture design for a t-shirt\"\n}\n```\n\n**Response:**\n```json\n{\n  \"photo\": \"base64_encoded_image_data\"\n}\n```\n\n**Error Response:**\n```json\n{\n  \"message\": \"Something went wrong\"\n}\n```\n\n## 🛠️ Tech Stack\n\n### Frontend\n- **React 18** - Modern React with hooks\n- **Vite** - Fast build tool and dev server\n- **Three.js** - 3D graphics library\n- **@react-three/fiber** - React renderer for Three.js\n- **@react-three/drei** - Useful helpers for R3F\n- **Valtio** - Proxy-state library for React\n- **Framer Motion** - Animation library\n- **Tailwind CSS** - Utility-first CSS framework\n\n### Backend\n- **Node.js** - JavaScript runtime\n- **Express.js** - Web application framework\n- **Pollinations AI** - AI image generation service\n- **node-fetch** - HTTP client for API requests\n- **CORS** - Cross-origin resource sharing\n- **dotenv** - Environment variable management\n\n### Development Tools\n- **ESLint** - Code linting\n- **PostCSS** - CSS processing\n- **Nodemon** - Auto-restart server during development\n\n## 🚀 Deployment\n\n### Frontend Deployment (Vercel)\n\n1. **Build the project:**\n   ```bash\n   cd client\n   npm run build\n   ```\n\n2. **Deploy to Vercel:**\n   ```bash\n   npm i -g vercel\n   vercel --prod\n   ```\n\n3. **Set environment variables** in Vercel dashboard:\n   - `VITE_BACKEND_URL`: Your backend API URL\n\n### Backend Deployment (Vercel)\n\n1. **Configure `vercel.json`** (already included):\n   ```json\n   {\n     \"version\": 2,\n     \"builds\": [{ \"src\": \"index.js\", \"use\": \"@vercel/node\" }],\n     \"routes\": [{ \"src\": \"/(.*)\", \"dest\": \"index.js\" }]\n   }\n   ```\n\n2. **Deploy:**\n   ```bash\n   cd server\n   vercel --prod\n   ```\n\n3. **Set environment variables** in Vercel dashboard:\n   - `NODE_ENV`: production\n\n### Alternative Deployment Options\n\n#### Frontend\n- **Netlify**: Connect your GitHub repo and deploy automatically\n- **GitHub Pages**: For static hosting\n- **Firebase Hosting**: Google's hosting service\n\n#### Backend\n- **Heroku**: Traditional PaaS platform\n- **Railway**: Modern deployment platform\n- **DigitalOcean App Platform**: Scalable hosting\n\n## 🔧 Configuration\n\n### Environment Variables\n\n#### Client (.env)\n```env\nVITE_BACKEND_URL=http://localhost:8080/api/v1/ai-image\n```\n\n#### Server (.env)\n```env\nPORT=8080\nNODE_ENV=development\n```\n\n### Vite Configuration\nThe project uses Vite for fast development and optimized production builds. Key configurations:\n- **Hot Module Replacement (HMR)** for instant updates\n- **ESM support** for modern JavaScript\n- **Optimized builds** with code splitting\n- **CSS processing** with PostCSS and Tailwind\n\n## 📱 Browser Support\n\n- **Chrome** 90+\n- **Firefox** 88+\n- **Safari** 14+\n- **Edge** 90+\n\n*WebGL support required for 3D functionality*\n\n## 🐛 Troubleshooting\n\n### Common Issues\n\n#### 3D Model Not Loading\n- Ensure `shirt_baked.glb` is in the `client/public/` directory\n- Check browser console for WebGL errors\n- Verify browser supports WebGL\n\n#### AI Image Generation Failing\n- Check if backend server is running\n- Verify `VITE_BACKEND_URL` is correctly set\n- Check network connectivity\n- Ensure Pollinations AI service is accessible\n\n#### Build Errors\n- Clear node_modules and reinstall: `rm -rf node_modules \u0026\u0026 npm install`\n- Check Node.js version compatibility\n- Verify all environment variables are set\n\n#### CORS Issues\n- Ensure backend CORS is properly configured\n- Check if frontend and backend URLs match\n- Verify environment variables are correct\n\n## 🔥 Performance Optimization\n\n### Frontend Optimizations\n- **Lazy Loading**: Components load only when needed\n- **Texture Compression**: Optimized 3D model textures\n- **Code Splitting**: Automatic bundle optimization\n- **Asset Caching**: Browser caching for static assets\n\n### Backend Optimizations\n- **Response Compression**: Gzip compression enabled\n- **Request Validation**: Input validation and sanitization\n- **Error Handling**: Comprehensive error management\n- **API Rate Limiting**: Protection against abuse\n\n## 📊 Features in Detail\n\n### 3D Rendering Engine\n- **Real-time Lighting**: Dynamic shadow casting and ambient lighting\n- **Material Shaders**: Realistic fabric material with proper roughness and metalness\n- **Camera Controls**: Smooth camera movements and responsive controls\n- **Texture Mapping**: High-quality texture application and UV mapping\n\n### State Management\n- **Valtio Integration**: Proxy-based state with automatic reactivity\n- **Persistent State**: State preservation across navigation\n- **Optimistic Updates**: Instant UI feedback for better UX\n- **State Synchronization**: Real-time 3D model updates\n\n### AI Integration\n- **Pollinations AI**: Free, unlimited image generation\n- **Prompt Processing**: Natural language to image conversion\n- **Base64 Encoding**: Efficient image data transfer\n- **Error Handling**: Robust error management and user feedback\n\n---\n\n**Made with ❤️ for the 3D web community**\n\n*Unleash your imagination and define your own style!*","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshubhojit-mitra-dev%2Ftshirt-customizer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshubhojit-mitra-dev%2Ftshirt-customizer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshubhojit-mitra-dev%2Ftshirt-customizer/lists"}