The latest articles on DEV Community by Dhairya Chheda (@dhairya_chheda). https://dev.to/dhairya_chheda https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1778434%2F78f638fa-c2a8-4982-8675-8eaa207411e0.png https://dev.to/dhairya_chheda en Dhairya Chheda Sun, 14 Jul 2024 11:00:43 +0000 https://dev.to/dhairya_chheda/printai-a-print-on-demand-e-com-website-powered-with-wix-and-ai-538l https://dev.to/dhairya_chheda/printai-a-print-on-demand-e-com-website-powered-with-wix-and-ai-538l <p><em>This is a submission for the <a href="https://dev.to/challenges/wix">Wix Studio Challenge </a>.</em></p> <h2> What I Built </h2> <p>We’ve innovatively combined print-on-demand with AI to create a custom product configurator. This advanced solution allows users to enter a prompt and choose from four design options for their t-shirts. Users can opt to remove the background and add designs to both the front and back of the shirt.</p> <p>Utilizing a custom element, we implemented a color picker, enabling users to select any t-shirt color they desire. Additionally, users have the option to upload their own images. Once satisfied with their selections, they can easily add the product to their cart.</p> <p>This integration of AI with print-on-demand showcases our commitment to providing a personalized and engaging user experience, leveraging cutting-edge technology to meet modern consumer demands.</p> <h2> Demo </h2> <p><a href="https://wixfreaks.wixstudio.io/printai" rel="noopener noreferrer">https://wixfreaks.wixstudio.io/printai</a><br> </p> <div> <iframe src="https://loom.com/embed/2d6dbb1c73bc44c884da23fac111fa9f"> </iframe> </div> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7cpgpx5au64ilq7knn76.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7cpgpx5au64ilq7knn76.png" alt="Image description" width="800" height="622"></a></p> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyowh861rsdrqm6jwbg5h.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyowh861rsdrqm6jwbg5h.png" alt="Image description" width="800" height="533"></a></p> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftf35ngwz9gcm9yaow9fk.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftf35ngwz9gcm9yaow9fk.png" alt="Image description" width="800" height="600"></a></p> <h2> Development Journey </h2> <p>Leveraging Wix Studio’s robust APIs has enabled us to develop an innovative and trendsetting solution in the age of AI. By utilizing backend file capabilities, we securely store and retrieve API keys, ensuring the utmost security. This infrastructure allows us to seamlessly call and test OpenAI and background removal APIs, enhancing our product’s functionality.</p> <p>Additionally, with the wix-ecomm API, we crafted a custom product integration that dynamically adjusts to user specifications. This ensures both the admin and the user receive precise order details, enhancing transparency and accuracy.</p> <p>The element API calls further enabled us to elevate the user experience, providing a seamless and intuitive interface. Wix Studio’s comprehensive API toolkit has been instrumental in creating this cutting-edge product, showcasing the platform’s potential to support advanced, AI-driven applications.</p> <h2> APIs and Library we utilised </h2> <ul> <li>We used the openAI API to generate Images</li> <li>Bg.remove API to remove the background from an Image</li> <li>wixEcom API to add the specifcations of the product to the cart using addToCart()</li> <li>We also have used a Custom Element, that acts as a color picker for the t-shirt. </li> <li>Wix Secrets Manager to store and get the API</li> <li>Wix-Fetch to call and get the API </li> </ul> devchallenge wixstudiochallenge webdev javascript