How I Reverse Engineered Byte and Created My Own Byte Web App
By: Alec Garcia
Tags: API, JavaScript, Programming, Web Development, Social Media

How I Created My Own Byte Web App

I saw some comments from Byte users who were complaining they couldn’t share a link to their Byte and instead had to export and send the video.

These comments confirmed my decision to build a web experience for Byte, and I challenged myself to see how fast I could build it. Byte launched on a Friday, and I spent that weekend in a hackathon-style coffee-fueled isolation, coding as fast as I could with my faulty MacBook Pro butterfly keys.

The front end

I bootstrapped my web app using Create React App and used libraries such as React Slick to emulate the sliding vertical carousel that Byte/TikTok uses for their feed of videos.

I decompiled the Byte Android app and extracted some of the assets so the web app looked just like the mobile apps. Because of CORS policies, the browser’s Fetch API isn’t able to directly call Byte’s private APIs, so I had to create a back-end server to proxy the requests.

I created a simple Express server that proxies the API requests so my React app would make an API call to my Express server’s API — which, in turn, called Byte’s private API, returned the response to my Express server, and that returned the response to my React app.

The back end

All requests to Byte’s private APIs require authorization. You can’t make any requests without first passing a valid auth token. If I was to achieve my goal of allowing people to share links to their bytes, it’d have to work without anyone logging in.

Since I have my Express server up and running and it’s the middleman between my React app and Byte’s APIs, I realized I could just hardcode some valid auth tokens on the server to authenticate API requests on behalf of the users of my web app.

After creating a dummy account and obtaining its auth token, I hardcoded it in the headers config for each Axios request my Express server made to Byte’s APIs. At the time of this writing, Byte’s APIs have some pretty relaxed rate limiting, but there are some limits. I realized if my web app gets really popular or some malicious user decides to create a script that calls my proxy API directly, the rate limits for the user account that powers everything would quickly get hit and the app would break for everyone.

Load-balancing requests

I created a few extra accounts, got their auth tokens, and ended up implementing a round-robin approach that’d select a different auth token for each request to balance the load on Byte’s APIs so the likelihood of hitting the rate limits decreased.

I also implemented my own rate limiting on my Express server so if scripts continuously call my proxy API, they can’t quickly exhaust the rate limits on my supply of auth tokens.

Handling metadata for link sharing with Open Graph tags

The Express server also came in handy for implementing Open Graph tags. If users were to share a link to their bytes on social media, there needs to be some relevant info. Otherwise, every link would have the same title, description, and image.

In my Express server, I added handlers for the routes that people would be sharing links for such a /user/ and /post/. When those routes get hit, my Express server calls Byte’s API to retrieve the relevant information, such as the user’s name and profile picture or the post’s description, and it’ll read the static index.html file from my React build and dynamically replace the OG tags with the information I got from Byte’s API. The response will return the new index.html with the updated OG tags. For all other routes, my Express server will just serve the normal index.html file.

The launch

By the end of the weekend, I had most of it done. It was working quite well, and I wanted to launch it on Product Hunt on Monday morning, but it wasn’t quite polished yet so I held back.

After some cross-device testing, I discovered a few bugs I had to fix so the web app would be a good experience for people who decided to use it on the mobile web instead of using the official mobile app. I registered the domain www.byte.community because Byte’s website is www.byte.co , and I finally launched it on Product Hunt on Wednesday (January 29), five days after Byte launched publicly.

The Product Hunt launch flopped, and I only got five upvotes, so I posted some videos on Byte itself advertising it. Some people started to find out about it, and I started getting some users. Some Byters actually created their own bytes advertising it, and others started to use it how I intended and shared links to their bytes on the official Byte community forums.