This is a submission for the Wix Studio Challenge .
What I Built
Have you seen those long lines in front of stores before a sale is about to begin? That's exactly what I've built using Wix Studio.
The website showcases a landing page where the upcoming product is revealed. In this case, The iPhone 16 Pro. You can join the queue, you'll be assigned a position in the queue.
When the sale begins, you'll be emailed that its your turn to purchase.
Then you can access the website and make the purchase.
I've also added multiplayer cursors on the landing page for a sense of 'crowd'. I couldn't implement real-time cursors because I would need to use custom elements to make it work which was against the rules, so I had to compromise and just make some fake ones 😅.
Demo
Here's the link to the website
Development Journey
I was thinking of innovation on e-commerce websites, things that came to mind were 3D experiences within the website, or maybe Augmented Reality. I also thought of building a fancy landing page full of animations, but that wouldn't be something innovative in the shopping experience, that would just be a fancy landing page from which you click "Buy Now" and then its a standard checkout process.
So I thought of making an online store-front for a product launch. People can see each other's cursors moving around and they can reserve their spot in the queue.
This was my first time using Wix, or any low-code website builder.
I spent a few days consuming wix tutorials and blogs. Exploring Velo documentation to see what all possibilities are there. The tutorials were really helpful.
Took me a few days to get the hang of it. It was a nice challenge to accomplish everything "The Wix Way". Using $w instead of the JavaScript window.
After the user is authenticated, I save their position in the queue in a Velo Database
APIs
- Velo Members API
- Velo Databases and Permissions
- Velo Products
- Velo DOM apis to manipulate DOM elements
Some feedback for Wix
- This was my first time using Wix Studio. The tutorial videos were really helpful, I didn't have to search for the tutorials for each thing I needed to do. They were right there in the platform itself. I loved that.
- The tutorials were well made and covered decent variety of use cases
- Managing store listings is really convenient. Adding products, managing inventory is really intuitive.
- Keyboard shortcuts for hiding/revealing the code editor. Much needed.
- There's no 'onMouseMove' event listener built-in to Velo. It prevented me from implementing real-time multiplayer cursors which I was really excited about. There is a workaround but it requires custom elements.
Top comments (0)