Building Gamewave: An AI-Powered Game Store with Wix Studio

#devchallenge #wixstudiochallenge #webdev #javascript

This is a submission for the Wix Studio Challenge.

What I Built

For the Wix Studio Challenge, I developed an innovative game store eCommerce website with AI-powered recommendation system, chatbot assistance and live activity tracking. The website offers a seamless, mobile-friendly and personalized shopping experience with AI-driven user engagement features, making it a unique platform for gamers to purchase their favorite games.

Demo

Ecommerce Site: https://molaycule.wixstudio.io/gamewave

Demo Link Part 1:

Demo Link Part 2:

Development Journey

Diving into Wix Studio's robust JavaScript ecosystem was both challenging and rewarding. This project pushed me to explore the platform's full potential, combining its powerful eCommerce capabilities with cutting-edge AI features to create a unique gaming marketplace.

Initial Setup and Planning

The project began with extensive planning and wireframing. I designed the user interface to ensure a smooth and engaging user experience that is also desktop, tablet and mobile friendly across various window sizes. The primary goal was to make the website not just a store but a vibrant community space for gamers.

Wix APIs:

wix-ecom.v2 - Catalog Service Plugin: Used for managing custom catalog.
wix-ecom.v2 - Custom Discount Trigger Service Plugin: Used for handling automatic discount triggers.
wix-data: Used for managing and querying the site’s collections, allowing for efficient data retrieval and storage.
wix-ecom-backend: Used for managing user cart, checkout and orders.
wix-secrets-backend: Used for managing API keys and secrets.
wix-web-module: Used for defining backend functions that are called from the frontend.
wix-chat-backend: Used for sending ai response back to the user in the chat window.
wix-crm-backend: Used for managing customer relationships and interactions, ensuring personalized user experiences.
wix-realtime-backend: Used for publishing live activities updates to users.
wix-realtime-frontend: Used for subscribing to live activities updates on the eCommerce site.
wix-window: Used for interacting with the browser window, opening lightbox and scrolling back to top.
wix-location-frontend: Used to manage URL changes and navigation within the ecommerce site.
wix-members-frontend: Used for managing member access as well as view and manage the currently logged-in member.
wix-seo-frontend: Used for enhancing the eCommerce site’s SEO, making it more discoverable through search engines by managing dynamic page title and optimizing content.
wix-storage: Used for storing session data, such as user preferences (grid or list style view).
wix-animations-frontend: Used for banner slideshow timeline animation.
wix-fetch: Used for making HTTP requests to prefetch and cache pages and resources ahead of time.
wix-reviews.v2: Used for managing user reviews.

Other Libraries:

remove-markdown: Sanitizes ai response by removing markdown syntax, ensuring clean content is displayed to the user.
stripe: Handles payment processing, providing a secure and reliable way for users to purchase games.
openai: Implements AI-powered features, such as answering game related inquiries from the user and generating real-time game recommendations based on user preferences.
html-to-text: Converts HTML content to plain text, facilitating better content processing and display.

Conclusion and Key Takeaways

Developing this AI-enhanced game store using Wix Studio has been an incredible learning experience. It allowed me to push the boundaries of what's possible in eCommerce web development, blending traditional online shopping with innovative AI-driven features.

Key takeaways from this project include:

The versatility of Wix Studio for complex, feature-rich web applications.
The power of integrating AI to create personalized user experiences.
The importance of real-time features in engaging modern web users.
The challenge and reward of balancing functionality with user-friendly design.

Attributions:

https://molaycule.wixstudio.io/gamewave/attributions

Top comments (8)

ogbotemi-2000 • Jul 16

Well done, your submission stretched the idiosyncrasy that e-commerce websites are for physical items worn or used by people: apparel, equipment, clothing, footwear...