3D T-Shirt Design Tool & AI Generation

Web application built with React & Three.js (Frontend) + Node & Express (Backend) along with the OpenAI API. Preview different designs on a 3D rendered T-shirt, upload your own files and images, and get help from generative AI to experiment on new designs!

📋 Table of Contents

1. 🤖 Introduction
2. ⚙️ Tech Stack
3. 🔋 Features
4. 🔗 Links

🤖 Introduction

Experiment with different T-shirt designs. Pick colors, add logos and textures, and try AI designs to make your designs truly unique. Built using React.js, Three.js, and OpenAI with an attractive and dynamic layout, thanks to tools like Framer Motion and Tailwind. Deployed on Render using a Dockerfile that links the front + backend on the cloud.

Try it HERE!

⚙️ Tech Stack

• React.js
• Three.js
• React Three Fiber
• React Three Drei
• Vite
• Tailwind CSS
• Node.js
• Express.js
• OpenAI
• Framer Motion
• Valtio
• Docker

🔋 Features

• 3D TShirt Design: Generate unique 3D tshirts designs dynamically

• Color Customization: Apply any color to the 3D shirt for personalized styling.

• Logo Upload Functionality: Enable users to upload any file as a logo, integrating it seamlessly onto the 3D shirt.

• Texture Image Upload: Allow users to upload texture images to style the 3D shirt.

• AI-Generated Logo Integration: Utilize AI to generate logos and/or textures and intelligently apply them to the 3D shirt.

• AI-Generated Textures: Implement AI-generated textures for enhanced 3D shirt customization.

• Theme Change with Color Selection: Dynamically change the application theme based on the selected color, enhancing user experience

• Responsive 3D Application: Ensure the application is responsive, delivering a seamless experience across various devices.

🔗 Links

The website is deployed on Render. (Give it a few minutes to go live, it is deployed on a free plan after all 😅).