Demo Jump to heading #

Link: https://compassionate-wozniak-389864.netlify.app

Github: https://github.com/kamalarieff/svelte-tiktokcringe

Motivation Jump to heading #

I wanted to find a song from a post but I couldn't find it from Reddit's top posts because it was two months ago at the time of writing. You can only filter the top posts by day, week, month, year or all time. So I built this in order to filter by date range.

I also wanted to learn Svelte. So I figured this would be a good chance to do so.

If you're thinking that this project is unfinished, then you might be right. I only did this project to find a song. There's still some things that can be improved like not fetching on every date change, adding a previous button, handle edge cases where there could be empty posts, etc. But as long as it does what it is intended to do, then it is considered finished by me.

Tech stack Jump to heading #

As mentioned earlier, I'm using Svelte for building the UI. Other than that, I'm using tailwind for styling, axios for data fetching because I don't like dealing with native fetch and whirl for the loading icon.

Caveats Jump to heading #

Reddit's API doesn't have pagination filters so I had to be clever here. What they do have is a after query which corresponds to a post id.

So in order to get posts from two months ago, we need to get the posts from the year filter. Then we need to only filter posts where the created time is between the date range. Then we need to get the last post id to pass to the endpoint to mimic pagination.

That's why you'll see the number of posts are not the same as the page before when you click next. This is because of that hack.

I've tried to use the third party API redditsearch but the responses don't have the updated score.

The videos also don't have any sound. This is because Reddit splice their videos into separate video and audio files. I haven't found a way to fix this yet.

What I've learned Jump to heading #

I've only scratch the surface of Svelte but here's what I've learnt so far.

Svelte is really nice to use but it's not as fully featured as React. The reactive declarations is a step up from React's useState and useEffect. It makes the code concise.

The local style tags is way better than CSS modules.

The computed JavaScript files are also smaller due to Svelte not needing a virtual dom.

So did I find the song? Jump to heading #

No. The song is way too buried and I've also kinda forgotten the video.