Salman

Posted on Jul 12 • Edited on Jul 14

Sharekart

#devchallenge #wixstudiochallenge #webdev #javascript

This is a submission for the Wix Studio Challenge .

The challenge was to create an innovative e-commerce site using Wix Studio and existing Wix API.

What I Built

TL;DR:
The best type of marketing is "Word-of-mouth." I built a site where buyers can post their purchases, allowing others to add all items to their cart and checkout with just one click.

Basically, it combines E-commerce with Social Media.

Once a user makes a purchase, they can post it in a newsfeed with all the line items. Other users can then add these products to their cart and easily check out.

This enhances product visibility. Users can follow others, and on the product page, they can see a list of users they follow who have also purchased the same product. This reassures users about the product's quality, especially if a big influencer has it, as their followers may also want it.

I've also added a comment section under each post so others can interact directly with the buyer and ask questions.

List of all core-system developed using Wix Database, Backend code, and Wix Studio.

System

Social Media system - Post / Comment / Follow
- Once a user makes a purchase, they can post their entire cart and write a comment, which will appear in the newsfeed.
- Ranking system based on posts, products, inventory, and user activity will rank higher or lower (Please check below for more info).
- Notifications are sent using the realtime feature to all other users on the Newsfeed page.
- Users can like / comment / follow on posts.
- Users can like / follow the commenter.
- Used Wix Studio's scrollable container to design for optimal UX on both desktop and mobile.
- Users can add the entire cart from a post instantly and continue to checkout as usual.
Rating and review system
- Users can rate and review any product.
- A helpful button allows users to upvote reviews, improving review visibility based on the number of people who find them helpful.
Wishlist system
- Created a custom label Wishlist and added one or many products to a Wishlist created on the product page.
- Shows the current user's Wishlist on a dynamic page for easy add-to-cart function later.
Follow system
- Follower Also Bought UI
- Shows a profile icon on the product page of all users following who bought that product.
Log system
- A global logging system that stores logs in the database and clears them every month to aid in debugging.
Account page
- Extended built-in account information for user's to upload their photo.

Demo

https://sharekart.salman2301.com

Newsfeed section

Newsfeed - Mobile view

Rating and review - Product page

Wishlist page

User also bought (People you follow)

Development Journey

I used Wix components like Repeater, Table, Grid Layout, Stack, and Store APIs to build the complex system with just ~1000 lines of Wix Velo code, including JSDoc types.

Modules used: date-fns npm package and a utils module file with necessary snippets for frontend and backend.

To improve performance, I used Database Indexing, Wix Data aggregates, and Wix Data hooks to manage database interactions efficiently.

Key Wix Studio Features Used

Complex grid layouts and scrollable elements for optimal UX on desktop and mobile.
JsDOC type system for better development experience.
Realtime API for notifications on new posts.
Dynamic pages for efficient content creation based on database entries.
Database indexing and normalization strategies for improved performance and developer experience.
Secure data transmission using .web.js, database permissions, and realtime permissions based on user roles.
WixStorev2 API to enhance functionality like Thank You page and addToCart.
WixMember API for user authentication and extending profile fields.
Intl library for text formatting based on global localization.
Custom logger with cron job for efficient database maintenance.
CSS width calculation for responsive design.
WixData Aggregate for calculating average ratings, follower counts, and other data for ranking system.
Backend events to monitor inventory changes and update product rankings.
Bulk saving with Wix to update multiple products' scores at once. bulkSave
Global.css to add custom animation css for all lightbox
Wix http-function, to get the number of followers, can be used to add as a badge sample

And lot more

Ranking Algorithm

Below is the weight-based ranking algorithm used for posts:

const WEIGHT = {
   // Section #1
    POST_LIKE: 30,
    POST_COMMENT_COUNT: 20,
    USER_FOLLOWER: 5, // User weight; in the future, adjust based on percentile for proper distribution.

   // Section #2
    POST_ADD_TO_CART: 50,

   // Section #3
    POST_CREATED: 500,

   // Section #4
    PER_PRODUCT: 5, // More products are better.

   // Section #5
    // For each product in the post
    PRODUCT_REBOUGHT: 20,
    PRODUCT_RATING_POSITIVE: 15, // Rating from 3-5.
    PRODUCT_RATING_NEGATIVE: -20, // Rating below 3.
    PRODUCT_REVIEW_COUNT: 0, // Impact to be calculated.
    PRODUCT_WISHLIST: 5,

    INVENTORY_INSTOCK: 50,
    INVENTORY_LABEL_ON_SALE: 50
  }

section #1

Likes, number of comments, and number of followers increase the rank based on the above weights per unit.

Currently, follower numbers are multiplied directly by weights, but in the future, consider calculating based on percentiles to account for users with a large number of followers.

section #2

Add to cart weight: based on the number of times other users click on a post to add all items to their cart. This indicates user interest in the post, tracked through events to adjust ranking.

section #3

Post created weight: uses a mathematical formula to calculate post ranking based on recency. Newer posts receive a higher score, decreasing exponentially with time. For example, a post created just now might score 500, while one created an hour ago scores 491.74, reducing by about 9 points.


function getLatestScore(date) {
    const currentTime = new Date();
    const inputDate = new Date(date);
    const initialScore = 500;
    const decayRate = 0.4 / (24 * 60 * 60); // Adjust decay rate for seconds.
    const secondsDifference = differenceInSeconds(currentTime, inputDate);
    const score = initialScore * Math.exp(-decayRate * secondsDifference);
    return round(score);
}

section #4

Per product weight: adjusts based on the number of line items in the cart. More items increase ranking.

section #5

Product and inventory weight: complex algorithm incorporating ratings, wishlist additions, and inventory status (in stock, on sale). Ratings below 3 negatively impact product rank, while 3-5 ratings positively influence it.

Notably, I separated product and post rankings, stored in separate databases to avoid Wix rate limits.

Open in GitHub

Database structure

global_post_rank
- Title (string)
- user_post (ref)
- Score (number)
- Scoreinfo (object)
log
- Mainmessage (string)
- Trace (string)
- Message (string[])
- Place (string)
- Type (string)
product_rank
- Title (string)
- Score (number)
- Scoreinfo (object)
user_follow
- Title (string)
- follower (string - user_id)
- followee (string - user_id)
user_info
- Title (string)
- displayName (string)
- Image (string)
- followerCount (number)
user_post
- post (string)
- fullname (string)
- orderId (string)
- Lineitems (array)
- Total (number)
- Raw (object)
- Currency (string)
- Totalprice (number)
user_post_comment
- Title (string)
- comment (string)
- post (string)
- likeCount (number)
user_post_comment_like
- Title (string)
- comment_like (number)
user_post_event
- Title (string)
- type (string)
- Postid (string)
user_post_like
- Title (string)
- user_post (ref - user_post)
user_review
- Title (string)
- rating (number)
- review (string)
- tag (string[])
- helpful (number)
- name (string)
- productId (string)
user_review_helpful
- Title (string)
- review (string)
user_wishlist
- Title (string)
user_wishlist_product
- Title (string)
- wishlist (ref - user_wishlist)
- product_id (ref stores/Product)
- Owner (string - user_id)

Future development ideas

Given more time, I would build essential features like:

Personalized Social Media Algorithms: Implement algorithms that personalize the newsfeed based on each user's purchase history and product preferences. This would enhance user engagement by showing relevant content tailored to their interests and locality.
Loyalty Program: Introduce a built-in loyalty program where users whose posts receive significant likes can be rewarded with discounts. This approach incentivizes users to generate more engagement and sales, similar to an affiliate program.

These features would not only enhance user experience but also drive more active participation and sales through the platform.

About Me

I'm a freelance developer, part-time and building a Saas live streaming app during free-time. Checkout my Github Profile and my Site https://salman2301.com

If you're interested in this app or want to collaborate on similar projects, reach out via:

Email: admin@salman2301.com
GitHub: salman2301
Twitter: salman2301
LinkedIn: asalman2301

Thanks to Wix for this opportunity and for positively impacting the tech industry!

Feel free to explore the demo at https://sharekart.salman2301.com. Add a product to your cart and use the promo code ALL to experience the functionality.