This repository provides the code for a 3D Swag Customization App, enabling users to design unique virtual merchandise. It targets developers and designers interested in integrating 3D web experiences with AI capabilities, offering a hands-on tutorial for building such applications.

How It Works

The application leverages React.js for the frontend, Three.js (via React Three Fiber and Drei) for 3D rendering, and Vite for build tooling. It integrates with Node.js and Express.js for the backend. Key features include dynamic 3D model generation, color and logo customization, texture uploads, and AI-powered logo and texture generation using OpenAI. Framer Motion is used for animations, and Valtio for state management.

Quick Start & Requirements

• Install: Clone the repository, then run npm install in both client and server directories.
• Prerequisites: Git, Node.js, npm. Requires an OpenAI API key set in a .env file (OPENAI_API_KEY=your_key).
• Run: Start the server with npm start and the client with npm run dev. Access at http://localhost:5173.
• Docs: Tutorial available on the JavaScript Mastery YouTube channel.

Highlighted Details

• AI-driven logo and texture generation for 3D swag.
• Seamless integration of user-uploaded logos and textures.
• Responsive 3D application design with Framer Motion animations.
• Full customization of 3D items, including colors and applied assets.

Maintenance & Community

The project is associated with the JavaScript Mastery YouTube channel and Discord community (27k+ members) for support.

Licensing & Compatibility

The repository does not explicitly state a license in the README.

Limitations & Caveats

The project requires an OpenAI API key, incurring potential costs for AI features. The README does not specify compatibility with different operating systems beyond general Node.js requirements.