AI Product Recommendations for E-Commerce
Tags: devchallenge, wixstudiochallenge, webdev, javascript
Published: 2024-07-12 11:13:50

#What I Built
I developed a custom solution using velo that customizes the user's shopping experience, by allowing them to answer some questions about their prefernces, and based on their responses to the tailored questionnaires, the AI suggest them products they could buy based on their preferences. 

This integration can also be applied across various industries, offering a personalized touch to services and products. For example:

{% embed https://www.youtube.com/watch?v=Ny1a2-tzWkM %}

- **Gym/Fitness Industry**: Users answer questions about their fitness goals, preferred workout types, and available plans, and the AI suggests suitable workout routines and membership plans.
- **Online Fashion Stores**: Users specify their preferences for fabrics, colors, and styles, and the AI curates personalized fashion recommendations.
- **Travel and Tourism**: Users provide information about their travel preferences, such as desired destinations, budget, and preferred activities. The AI then suggests personalized travel itineraries, accommodation options, and sightseeing activities.
- **Healthcare and Wellness**: Users input details about their health goals, dietary preferences, and current physical condition. The AI offers tailored wellness plans, including diet recommendations, exercise routines, and mental health resources.
- **E-Learning Platforms**: Users indicate their learning interests, preferred learning methods, and skill levels. The AI recommends personalized courses, study plans, and resources to enhance their learning experience.

The development features an intuitive dashboard for administrators to effortlessly create and edit questions and possible answers. Additionally, the AI can autonomously generate quizzes for admins, streamlining the setup process.

#Demo
Check out the live demo of the website here:
https://futurevisionweb.wixstudio.io/wix-studio-challenge

**Screenshots from the AI Recommendation:**
![Image 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sqhkdpdv2uaxm83puzew.png)

![Image 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vqwtvn9wqh5sskkactaw.png)

![Image 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5qmrxlbovfpn4bhtzyag.png)

![Image 4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hno1d9m91v9gp7kc5u3d.png)

![Image 5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hsoup6v9lq0oqfprb54u.png)

**Screenshots from the Admin Dashboard:**

![Image 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6gir7fhucfspiwag9by0.png)

![Image 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dzog9npd6xjue54mdcxa.png)

![Image 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n507f1fqt01yc0od7djb.png)

#Key Features:

**Customizable Questionnaires:**
Admins can create and modify questions and answer options through a user-friendly dashboard. Real-time updates ensure users always interact with the most current questions.

**AI-Driven Recommendations:**
The AI analyzes user responses to provide personalized suggestions.
This feature enhances user engagement by offering tailored content, whether it's workout plans or fashion items.

**AI-Generated Quizzes:**
Admins can opt for the AI to generate quizzes, saving time and ensuring diversity in question sets. The AI uses previous user interaction data to formulate relevant and engaging questions.


#Technical Stack:

- Various Velo APIs

- Wix Blocks 

- Google's Gemini API


**Velo:**
I developed this application using Wix Blocks and Velo, which allowed me to create a modular and reusable structure. By leveraging Velo's capabilities, I ensured that the app's components and functionalities could be easily replicated and adapted for future use cases.

One of the key features I implemented was the dynamic population of quiz steps based on user responses. Each step of the quiz is populated dynamically according to the questions set by the admin. This dynamic logic ensures that users have a seamless and personalized experience as they progress through the quiz.

**Implementation Details:**
Wix Blocks and Velo Integration: Utilized Wix Blocks to design and structure the user interface components. Velo provided the backend logic and data handling capabilities necessary for dynamic content generation.

**Modular Design:** 
Adopted a modular design approach, allowing individual quiz steps to be easily reused and customized. This modular architecture not only enhances maintainability but also facilitates scalability for future enhancements and feature additions.

**Dynamic Content Generation:** 
Implemented logic to dynamically fetch and display quiz questions and corresponding options. This functionality ensures that the quiz adapts in real-time based on user input, providing a responsive and engaging user experience.

**Advantages of Using Wix Blocks and Velo:**
Ease of Reusability: Components developed using Wix Blocks can be reused across different parts of the application or even in future projects, saving development time and effort.

**Scalability:**
The scalability of Wix Blocks and Velo enables the application to grow alongside user needs and business requirements. New quiz formats or additional functionalities can be seamlessly integrated as the app evolves.

By leveraging Wix Blocks and Velo, I created a robust and flexible quiz application that meets the dynamic needs of administrators and provides an intuitive and personalized experience for users.

#AI Integration:
Integrated Google's Gemini API to analyze user responses and generate personalized recommendations. Enabled AI to create quizzes based on admin-defined parameters.