TwitTok

Ever wanted to know what are the hottest items on TikTok shop? We bring to you TwitTok - TikTok Shop with a Twitter inspired feed for buyers and sellers.

Comment 1

TwitTok

For best user experience, please view the page in mobile view. (Chrome Devtools → Toggle Device Toolbar → Set to any mobile dimension (iPhone 12, SE, etc).

Team members

Kang Yue Hern (NUS Y3 cs) Jason Baek (NUS Y2 CS) Lee Si Yuan (NUS Y2 CS) Rayner Toh (NUS Y2 CS) Tan Gian Sen (NUS Y2 CS)

Inspiration

All of us have used many e-commerce platforms before, and sometimes when we are bored we browse such platforms in hopes of finding great deals or the hottest products. However, most suggestions are products related to the user’s search history. What if there was a way to suggest products in a twitter-like feed where consumers can rave about their latest purchases and sellers can advertise their latest products all in the same page?

We bring to you TwitTok.

What it does

TikTok, being a social media platform is a perfect medium to integrate a feed into its shop page. What better way is there to increase sales on platform than to utilize the social media aspect of TikTok? We decided to implement 3 tabs in total. A default shop page that is currently mimicked after TikTok’s e-commerce page, a “Feeds” page that displays the posts that users can “favourite”, and a listing page that displays posts created by the user. We will be going through the feeds page in more detail.

Feeds

The feeds page is a page where users can both post about a product, and see other posts. For posting, buyers are able to post about a product and a link to the product. Sellers can do the aforementioned, plus add a quantity button to indicate their stock.

Posts are displayed in a feed format, and each post have the name + description of the product, as well as an image of the product based on the link. A “Heart” button is available to “favourite” the post, which will garner more attention. TikTok is a social media platform after all, so these tools should be utilized. A “Reviews” button is available where once pressed, a review pop up will appear, with the list of reviews and users can input their review of the product. One interesting implementation is that we decided on a Sentiment Score as a rating system. Through Sentiment Analysis, the average rating of the product will be displayed. The higher the Sentiment Score, the more positive Sentiments the product has which can be a great indication for users to purchase the product. We will be discussing more on Sentiment Analysis next.

Sentiment Analysis

Sentiment Analysis is done using the AFINN-165 wordlist which detects valence. Valence specifies the intrinsic good-ness or badd-ness of a particular phrase. The AFINN-165 wordlist is often used for Natural Language Processing (NLP) applications to perform sentiment analysis on text data. AFINN uses a lexicon-based approach which relies on a predefined list of words and their associated scores. It determines sentiment, if a phrase is positive or negative by summing up the scores of words in a text. Given a particular phrase, it will be rated with an integer between -5 (negative) to 5 (positive).

Firstly, it is a relatively small dataset, therefore it will be computationally efficient as it does not require extensive training or processing. This way, scoring can be done relatively fast which is very important for our e-commerce application. Most reviews are relatively short, below 200 words, which makes it perfect for AFINN.

Some of the shortcomings of using the AFINN-165 wordlist is that it is limited to only English. Therefore if we want to expand to use different languages, we would have to select a different wordlist or dataset and implement it accordingly.

We also chose this wordlist for quick prototyping as this is a relatively short project and think it best suits our use-case.

Given that it is computationally efficient as it does not require a huge amount of computing power, we are hosting the inference on a serverless cloud function.

How we built it

Frontend

The web application was created using React, and visuals were made using TailwindCSS and shadcn components. We decided on a web application as making a mobile application was not feasible due to the lack of time and pre-built component libraries available for mobile frameworks. Therefore, we decided to built a web app but for a mobile view. Hence, the web page is best viewed in mobile dimensions.

(Chrome Devtools → Toggle Device Toolbar → Set to any mobile dimension (iPhone 12, SE, etc).

Backend

We decided on supabase as we wish to create our backend utility with ease and to allow us to focus on our other features. Supabase is a document based hosted service that allows us to scale with ease should we decide to make TwitTok a reality. Its integration with Postgresql also allows us the ease to query the data needed with ease, allowing us to draw relations between our various tables and enhancing our scalability. Using Supabase also allows us the freedom to use typescript, thus reducing our tech stack and allowing us to focus more on the project idea.

Whenever a product review is added, it gets sent to Supabase postgres Database. We created a trigger whereby whenever there is an insert into the ‘review’ database, our cloud function will be triggered to run the sentiment analysis on the submitted review. We then update the database with the result of the sentiment analysis to give the score on each individual review. We also provides the average sentiment score of all the reviews given on the individual product.

Challenges we ran into

All 5 of us are in our second or third year computing students, and we have had an extremely tight schedule to work with due to our high workload and the scale of the project. We also did not have much experience with ML and sentiment analysis, and it took quite a bit of trial and error to get our model to give accurate results.

We did not have much experience with Supabase before embarking this project, and it took us a while before we could get our project pipeline started.

Future improvements

Currently, there are no ways to differentiate between a user’s post and seller’s post. One future improvement we thought of is that the feed page should differentiate between a User’s post and Seller’s post, maybe through a small label at the side of their name indicating ‘Buyer’ or ‘Seller’, similar to current TikTok’s comment section that indicates ‘Creator’ for the Poster.

For best user experience, please view the page in mobile view. (Chrome Devtools → Toggle Device Toolbar → Set to any mobile dimension (iPhone 12, SE, etc).

Built With

+ 27 more
Share this project:

Updates