Sticker Bot

I wanted to make it easier for users to see the link between the Slack channel and the website, so I added a button to the website's homepage that links to the channel. I also made a few changes to the code and README :D

I added a search bar to the website, so now you can quickly find the sticker you are looking for in the sticker gallery!

I implemented the 'like' functionality! Now you can click on the like button in the sticker gallery and it will be added to the list on the dashboard for quick access. I also fixed a few bugs here and there.

There was a big problem with the Sticker Gallery that has just been fixed! Previously, the gallery would load each emoji of each sticker from cachet.dunkirk.sh, but there were many problems with this approach. For example, each emoji request would need to go to cachet, and then cachet would redirect to the URL of the emoji on Slack's servers, causing lots of latency. Also, when a new sticker was created, it wouldn't load properly on the gallery because cachet takes time to update its internal emoji index. To solve this, I created a relatively basic caching layer that allows the emoji index to be refreshed by my code. The code of the caching layer is available at https://www.val.town/x/webdev03/emojicache and it's hosted on val.town because it's quite easy to use. Now the sticker gallery is super speedy!! (it's not perfect in the video but it's much better than it was before)

I added a button that allows the user to copy the sticker to their clipboard from the website! Then they can paste it in Slack and it will appear. I also changed the theme of the website (again) using the tweakcn.com tool.

I noticed that the animated images on the Sticker Gallery weren't synchronised, so I added some code that waits for all of the images to load and then starts them all at the same time! Now they are properly synchronised.

After quite a bit of trial and error, it deploys again! I also made a few more changes in this session.

I added a command that allows users to search for stickers in the database!

I added a sticker gallery! Now the website shows a gallery of all stickers, sorted in reverse-chronological order with infinite scroll!

I set up the Slack OAuth for the website! Now, you can sign in with your Slack account and use it to access the website, but it doesn't have much on it yet. This took a while because I tried (and failed) to use another JS authentication library and had to resort to taking the implementation from a project I made before. Then I encountered many weird errors because I got mixed up between the API secrets :heavysob: Also, I made a basic navbar with shadcn-svelte components to show the authentication state shown in the attached image.

@techwithanirudh told me about a really cool technology called Turborepo, so I learned how to use it and migrated the whole repository to use it! This is because I need to have the Slack bot and the bot's website (which I am about to start working on) in the same repository and Turborepo helps a lot with that.

I set up a database! It uses the Drizzle ORM and Neon for hosting.

Hi everyone! I originally created this project for the #journey event, but I'm now continuing it to add many new features! I have been working on it for the past few days which is why this devlog has nearly 4 hours logged, so here's the summary of what I did since SoM started: I added progress updates when users create stickers, improved the image compression system (especially for animated stickers), added support for WebP, and a few more features to improve the quality of the bot for users. I have attached an image showing an example of the bot in use.