Play Game 🎮 Earn Coupon | Wix Studio eCommerce Engagement 📈 Tool
Tags: devchallenge, wixstudiochallenge, webdev, javascript
Published: 2024-07-15 02:58:36

*This is a submission for the [Wix Studio Challenge ](https://dev.to/challenges/wix).*


## What I Built
A game to increase user engagement 📈 on your eCommerce website. By allowing them to play a crazy math 🧠 game and win 🎖️ Coupons.

---

## Demo
🔴 Live Demo: [https://rajeshj3.wixstudio.io/ecom](https://rajeshj3.wixstudio.io/ecom)

|                                                                    <center>Screens</center>                                                                    |                                         <center>Zoomed Component</center>                                         |
| :------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------: |
| <img width="1604" alt="" src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lzalzvcjfv7sfow9cm8d.png"> <center><small>Landing Page</small></center> | <img width="1604" alt="" src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/malkqltwnbwod4mr4udm.png"> |
|         <img width="1604" alt="" src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sz9qo2kn75z10wudoh0c.png"> <center><small>Game Preview          | <img width="1604" alt="" src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gdccbxl0gfpxuwv3ltdj.png"> |
|          <img width="1604" alt="" src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hf46qlvur4wjlkg3le10.png"> <center><small>Game Screen          | <img width="1604" alt="" src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7npzwv9g5cj7bwirnmh1.png"> |
|         <img width="1604" alt="" src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pydx11uo309x0fm2wd8x.png"> <center><small>Coupon Screen         | <img width="1604" alt="" src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oxpps1woeodvh9le3c4k.png"> |
|          <img width="1604" alt="" src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qj4wi925riovgq0956qw.png"> <center><small>Cart Screen          | <img width="1604" alt="" src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/02sf54mpohgih70xgua5.png"> |

---

## How it works

- Go to [https://rajeshj3.wixstudio.io/ecom](https://rajeshj3.wixstudio.io/ecom) 🔗

- You'll see a button **"Play and Get Discount"**.

- Click on that button to play the game. ▶️ 

- Now, you have to solve the provided simple math equation. 🧠

- Once you solve the equation, you'll earn a **20% off Coupon Code**. 🤑

- Add items to your cart and apply the coupon. 🤩

- Enjoy! 🚀

---

## Development Journey

Wix provides amazing [Velo documentation](https://dev.wix.com/docs/velo/articles/api-overview/introduction). With this project, I explored Wix Studio for the 1st time, and I must say it's pretty straight forward to get started with.


### APIs and Libraries I utilize?

- **wix-marketing.v2**

    Used `createCoupon` API to generate a new and unique coupon for the winner, this coupon is valid for next 24 hours only. Utilized `getCoupon` API to retrieve the newly created coupon to show on the UI.

- **wix-auth**

    To create and retrieve a coupon, the requesting user must have necessary permissions. But, in case of an anonymous user, one needs to elevate the request. For this, I used the `elevate` API with `Anyone` permission.

- **wix-web-module**

    Used `Permissions` API from wix-web-module to created and retrieve coupons.

---

### Code on GitHub

Core logic for the game lives in `src/pages/masterPage.js`.

{% embed https://github.com/RajeshJ3/wix-ecom %}

---

## Follow Me

Twitter [@rajesh_j3](https://twitter.com/rajesh_j3)

LinkedIn [@rajeshj3](https://www.linkedin.com/in/rajeshj3/)

---

Thanks,

Happy Coding 👨‍💻

---