dev.to staff for The DEV Team

Posted on Jun 26 • Updated on Jul 5

Join us for the Wix Studio Challenge with Special Guest Judge Ania Kubów: $3,000 in Prizes!

#devchallenge #wixstudiochallenge #webdev #javascript

We are so excited to announce our first partnered challenge with Wix.

Running through ~~July 07~~ July 14, the Wix Studio Challenge provides an opportunity to develop with one of the most popular and in-demand website building solutions the internet has to offer. There is one prompt for this challenge, and one way to win the entire $3,000 prize pool. 🙀

Flex your JavaScript skills while leveraging the Wix Studio low-code environment to create a slick user experience. Your submission will be a demonstration of real-world product development you’ll want to add to your portfolio!

Our Prompt

For this challenge, your mandate is to build an innovative eCommerce experience with Wix Studio. Wix offers a powerful visual builder as well as a JavaScript-based development platform that enables you to create dynamic and interactive web experiences. You have full control of your site, from frontend design to backend functionality.

We just have one requirement for this challenge: You should leverage Wix’s set of APIs and libraries to enhance your users’ shopping experience. The more features, the merrier.

Heads up

Incorporating Service Plugins in your app is a powerful way to enable further customization of your shopping experience. However, these will be at the center of a future challenge 😉. So you are advised to build primarily around the other APIs at your disposal for this challenge.

Of course, we hope to see you participate in this and all future Wix Challenges!

Judging and Prizes

For the first time ever, we will have a special guest judge joining us for this challenge! With over 400,000 subscribers on YouTube, Ania Kubów is a prolific software developer, educator, and course creator. Ania has taught tens of thousands of people how to code, from the comforts of their home.

Ania Kubow

Software Developer and Coding Course Creator on YouTube | Beginner JS Tutorials here: youtube.com/aniakubow

Not only will our winner receive our biggest cash prize to date, but they'll also walk away knowing they have Ania's seal of approval. Talk about bragging rights!

Submissions will be judged on the following:

Use of underlying technology
Usability and User Experience
Accessibility
Creativity

The winner of our prompt will receive:

$3,000 USD
Exclusive DEV Badge
A gift from the DEV Shop

All Participants with a valid submission will receive a completion badge on their DEV profile.

How To Participate

In order to participate, you will need to build a Wix Studio site (not just any Wix editor site!) and publish a post using the submission template below.

All submissions must include original code and should not contain custom elements or iFrames. You may use any App on the Wix App Market including those made by Wix (ie. Wix Apps), but you must start your project from a blank template. Please do not use any pre-built visual design templates.

Steps to Creating a Wix Studio Site For New Users(VERY IMPORTANT)

Navigate to the Wix Studio page
Click "Start Creating"
Create an account
Select "For a client, as a freelancer or an agency" and click continue
Click "Go to Wix Studio"
Click "As a freelancer"
Select "Web Development" and click continue
Click "Start Creating"

Wix offers a free tier for Wix Studio and you do not need a credit card to sign up.

Please review our full rules, guidelines, and FAQ page before submitting so you understand our participation guidelines and official contests rules such as eligibility requirements.

Wix Studio Challenge Submission Template

Community and Resources

We encourage everyone who’s curious about the challenge to join the Devs on Wix Community Discord and hop into their #code-challenges channel. This will be the place to ask for technical help and meet community members building with Wix.

Since our prompt is about creating an eCommerce experience, we’d like to point everyone to their eCommerce API documentation as well as a tutorial on building a shopping wishlist on Wix. 😉

Additional Resources

Important Dates

June 26: Wix Studio Challenge begins!
~~July 07~~ July 14: Submissions due at 11:59 PM PDT
~~July 09~~ July 16: Winner Announced

We hope you enjoy building with Wix’s flexible dev tools, and we can’t wait to see what you build! Questions about the challenge? Ask them below.

Good luck and happy coding!

Top comments (44)

Paulo Henrique • Jun 26

Ania will be a judge????

(sorry...)

Karan Gandhi • Jun 27

Jenna • Jun 27

Waku Waku! 😄

I thought of that too. You beat me to the comment. 🤣

I see some Spy x Family fans here. 🕵️‍♂️

EHSAN. • Jun 27

Ania 🤣

Jess Lee • Jun 26

Good luck to everyone participating!!

Aditya Gupta • Jun 26

Will there be 3 winners like previous challenges or only 1 winner for this project because having only 1 winner doesn't seem fair.. 🙏

Jess Lee • Jun 26

@dailydev there will only be one winner for this Wix Challenge 😉

Isaiah • Jun 27

Aditya Gupta • Jun 27

ok :) Thanks for clarifying!

Anthony L • Jun 26

Looking forward to seeing what people come up with!!

Aditya Gupta • Jul 3 • Edited

Hey @anthonywix ,

I'm facing an issue with my Wix custom cart implementation. Specifically, I'm getting the error:
(0 , backend_cart_web_js_WEBPACK_IMPORTED_MODULE_0_.getCart) is not a function
this is my code->
Backend (cart.web.js):

import { currentCart } from "wix-ecom-backend";

export async function getCart() {
  try {
      const myCurrentCart = await currentCart.getCurrentCart();
      console.log("Success! Retrieved current cart:", myCurrentCart);
      return myCurrentCart;
    } catch (error) {
      console.error(error);

    }
};

Frontend (CustomCart.jofsl.js):

import { getCart } from "backend/cart.web.js";
$w.onReady(function () {
populateCartItems();
});

async function populateCartItems(){
    const cart = await getCart();
    const {lineItems} = cart;

    $w("#lineItemsRepeater").onItemReady(($item,itemData) =>{
        $item("#productName").text = itemData.productName.original;
        $item("#image").src = itemData.image;
        $item("#price").text = itemData.price.formattedAmount;
    }
    )
    $w('#lineItemsRepeater').data = lineItems;
}

Could you help me identify why getCart is not being recognized as a function? I also use wix AI assistant but nothing came up.

Anthony L • Jul 3

Functions exported in web modules need to be constructed with a call to webMethod. For example:

import { Permissions, webMethod } from "wix-web-module";

export const multiply = webMethod(
  Permissions.Anyone, 
  () => { 
    const test = "test";
    return test;
  }
);

You can learn more about this here: dev.wix.com/docs/develop-websites/...

Aditya Gupta • Jul 3

Ohh Thanks a lot.. :) resolved this error but got a new one will try to fix this now 😂

Lens • Jun 26

Looks like a great way to practice web design and JS!

sahra 💫 • Jun 26

Sounds interesting 🌟. Good luck to all the participants 💪💥

Aditya Gupta • Jul 7 • Edited

Heyy @anthonywix I was kinda setting up Reset Password Feature for my Login Form using this link But this only works for site members Is there any other way in using velo through which I can reset password if I am non member ?

Anthony L • Jul 8

If a user is a non-member then they wouldn't have an account to reset a password for. Perhaps direct them to a signup page instead?

The wix-members-backend API will contain all the functionality for managing user logins including the ability to send them a set password link although this will only work on members. dev.wix.com/docs/velo/api-referenc...

You're free to use the Wix Members app on your website.

Aditya Gupta • Jul 8

Yeah I spelled it wrong Instead I wanted to send the email to reset password for a User who forgot his password for login and he is already a site member as he had already registered in the site and it stores its password. Ig there is no api to implement this feature for now still Thanks for the help ;) !

Anthony L • Jul 8 • Edited

That is what the sendSetPasswordEmail() function does. It'll send an email like this:

Aditya Gupta • Jul 8

ok 👍

Aditya Gupta • Jun 29

Hi @anthonywix @jess I had a doubt regarding wix stores I was using it to display data onto my custom product page using its store->Product collection and I am not using its templates so do we have to build our own collection or can we use its prexisting collection for contest.

Anthony L • Jul 1 • Edited

Hey @dailydev you can still use Wix Apps and all their collections and pre-configuration. By not being able to use templates we mean only the visual design templates presented when you first start a new site.