This is a submission for the Wix Studio Challenge.

What I Built

Imagine an online store that completely transforms the shopping experience. This is Mood Commerce, an innovative platform where the shopping journey is personalized and optimized by artificial intelligence (AI). Instead of browsing through pages and pages of looks, our customers simply indicate their preferences, and the AI prepares up to three perfect looks for them. Users start by selecting their gender, occasion, preferred colors, season, and desired accessories. The AI then creates personalized looks that can be purchased immediately. Mood Commerce is not just a store; it’s a unique and intuitive fashion experience.

Demo

https://.wixstudio.io/

Development Journey

When I embarked on the journey of creating Mood Commerce, I started by envisioning the layout in Figma. After refining my ideas there, I transitioned to Wix Studio to bring my vision to life. It was my first time using Wix Studio, and I was both excited and a bit apprehensive, not knowing what to expect. Delving into the Velo documentation and finding valuable insights on the Wix Studio YouTube channel helped me gain confidence navigating the platform.

As I began exploring, my initial excitement quickly turned to amazement at the freedom Wix Studio offers developers. Discovering that I could install NPM packages like axios, uuid, and the openai package was a game-changer. The Wix IDE provided a seamless environment for development, allowing me to focus on integrating backend processes and ensuring smooth communication between frontend and backend systems.

Implementing the Selection Tags component at each stage of user input was crucial for enabling users to specify their preferences effortlessly. Each stage featured a Selection Tags component, and in some stages, the component was customized to allow users to select more than one option. This customization ensured a user-friendly experience from start to finish.

The real magic happened when connecting the frontend with the backend using the wix-web-module. The entire process, from requesting prompts based on user preferences to generating images asynchronously, was designed to prevent potential timeouts if backend processes took too long. Initially, the frontend initiated the request to generate a prompt based on user inputs and asked the AI to estimate a value for the look, which was sent to OpenAI. The backend received a creative prompt from OpenAI and continued asynchronously to generate an image using DreamStudio's API. Upon receiving the image as a buffer, the backend utilized the wix-media.v2 package to securely store it on Wix's servers. With the images stored on Wix's servers, it was time to create the product in the catalog, set the AI-estimated value for the look, and link the image to the product using the wix-stores.v2 package. Since using the catalog requires elevated privileges, wix-auth was used for privilege escalation. Then, with the looks formed, users can add the look to their cart with the help of the wix-stores-frontend package and proceed with the purchase.

Throughout this journey, I marveled at Wix Studio's capabilities and flexibility, transforming what could have been complex into a manageable and rewarding experience. Mood Commerce is a "living" virtual store that doesn't rely on administrators but is crafted according to users' desires. Thank you for considering my submission; I hope you find inspiration in Mood Commerce!

Which APIs and Libraries did you utilize?

For this project, I utilized several NPM packages and Velo APIs to bring Mood Commerce to life:

NPM Packages:

• openai: For generating creative prompts based on user preferences.
• uuid: For generating unique identifiers to identify the user's session.
• axios: For connecting with DreamStudio's API.

Velo APIs:

• $w: For manipulating elements and handling events.
• wix-storage-frontend: For storing user preferences.
• wix-secrets-backend: For securely storing API keys for OpenAI and DreamStudio.
• wix-media.v2: For uploading the look images to Wix servers.
• wix-ecom-backend: For adding the look to the shopping cart.
• wix-web-module: For smooth communication between the backend and frontend.
• wix-stores.v2: For creating products in the catalog and linking images to them.
• wix-auth: For elevating privileges needed for catalog operations.

@asyncerror