DEV Community: Mohammed Agboola

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

Mohammed Agboola — Mon, 15 Jul 2024 06:45:45 +0000

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

Mastering Chess with Twilio and OpenAI: An Interactive AI-Powered Chess Experience

Mohammed Agboola — Mon, 24 Jun 2024 06:55:21 +0000

This is a submission for Twilio Challenge v24.06.12

What I Built

In this project, I created an interactive chess application that leverages AI and Twilio's communication APIs to enhance the user experience. This application allows users to play chess against an AI opponent with various engaging features. The AI opponent generates chess moves and commentary using OpenAI's GPT, providing an immersive and interactive gameplay experience. The project also integrates Twilio's WhatsApp API, Facebook Messenger API, and Conversational API to offer multi-channel communication and notifications.

Demo

Join the Twilio Sandbox WhatsApp Number +14155238886 by sending join powder-hurt
You can try the app here and you can view the code at this link

Screenshots

Homepage of the chess application

Chat interface showing interaction via Twilio APIs

Gameplay interface where users play chess against the AI

Twilio and AI

This project harnesses the power of both Twilio and OpenAI to create a seamless and engaging user experience. Here's a detailed breakdown of how these technologies are utilized:

Twilio Capabilities

Twilio WhatsApp API: The application sends game updates and notifications through WhatsApp, keeping users engaged and informed about their game status, AI moves, and other relevant information.
Twilio Facebook Messenger API: Similar to WhatsApp, Facebook Messenger is used to deliver game updates, allowing users to interact with the chess application through another popular messaging platform.
Twilio Conversational API: This API handles multi-channel conversations, ensuring smooth and consistent communication regardless of the platform (WhatsApp or Facebook Messenger).

AI Integration

OpenAI GPT for Chess Moves: The AI opponent in the chess game uses OpenAI's GPT to generate intelligent and strategic chess moves, creating a challenging and exciting gameplay experience for users.
Commentary on Player Moves: GPT also generates commentary on the player's moves, adding a layer of interactivity and engagement by providing insights and reactions to each move made by the player.
Random Starting Positions: To add variety and balance to the game, the AI generates random starting positions in FEN (Forsyth-Edwards Notation), ensuring equal opportunities for both the player and the AI to win.
Congratulatory Messages: Upon the conclusion of a game, whether the player wins or the AI wins, GPT generates appropriate congratulatory or endgame messages, enhancing the overall user experience.

Additional Prize Categories

This submission qualifies for several additional prize categories:

Twilio Times Two: By leveraging multiple Twilio APIs (WhatsApp, Facebook Messenger, and Conversational API), this project showcases the power and versatility of Twilio's communication solutions.
Impactful Innovators: The integration of AI to provide a unique and engaging chess-playing experience demonstrates innovation and a significant impact on how traditional games can be enhanced with modern technology.
Entertaining Endeavors: The combination of AI-generated moves and commentary, along with multi-channel communication, creates an entertaining and immersive experience for users, making the game more enjoyable and engaging.

In conclusion, this project not only highlights the capabilities of Twilio and OpenAI but also showcases how these technologies can be seamlessly integrated to create a sophisticated and engaging user experience in a classic game like chess.

Encryption - The One Byte Explainer Secret

Mohammed Agboola — Tue, 18 Jun 2024 07:40:54 +0000

This is a submission for DEV Computer Science Challenge v24.06.12: One Byte Explainer.

Explainer

ENCRYPTION can be expanded to explain the concept:

Ensuring Network Confidentiality Requires Your Private Text Is Obscured Neatly.

Additional Context

This explainer not only defines the term but also outlines its purpose and process:

Ensuring confidentiality in networks.
Requiring that private text is neatly obscured, i.e., converted into a secure format.