Made with Supabase

Supabase Launch Week 5 Hackathon

Most Viewed

Swappy.one

🌟 Swap your Twitter image based on interest/season temporarily or forever! About This project is inspired by Facebook's Temporary Profile Picture, as well as the Twitter Space's logo when someone is joining a Space. Thus, I've created this apps to swap your plain Twitter picture to fit the season/event/anything that you want your follower to notice! After a certain amount of period (you can configure on the app), it will automatically swap back (hence, Swappy) to your original image. And you can revisit the app when you feel like putting on another badges in the future. Powered by Supabase Supabase Auth As this project revolves around Twitter, it is obviously make sense to use Supabase Auth. But I had to work around, and store the user's oauthtoken and oauthtokensecret to invoke User-based API because currently Supabase only return providertoken, and not secret. This issue has been raised on [supabase/gotrue-js#105]( Supabase Database Capture the oldimagekey, and newimagekey, and get the images from Supabase Storage. It also capture the period of when to change the user's image back to old one. Supabase Storage Save all the user's old image, and new image, so that it can be easily retrieve to change into, or back original image. Supabase Realtime Show realtime toast notification when a user publishes a new image. It is using RLS that allow all users to SELECT. Postgres Function pgcron and pgnet makes this app possible. It change back the user's old image when the time is up. CRON was set to hourly based, and triggers serverless function hosted on Vercel.

#Holiday Hackdays

#Vuejs

#Open Source

#Twitter

498

CourseBuddy App

💻 Project CourseBuddy is an Open Source Library for students, create Course/Topic threads and link your notes to it! Using Supabase( a nice Database integration using supabase-js library and enjoying his tools; (please able us to search through multiple columns as well haha). We believe that every student is a potential content producer, and if their content requires a place to be published to the world wide community, here we are. Like what Youtube does somehow, but we think with less barriers cause there's no need to know edit, or record videos to publish your great content, just write it well, bring this together and link it to the platform.😎🌹 And living in Brazil, with high social inequality indices, we hope we can make easy to people share their learning, to they learn more, and more learning be available to who can't afford as well. More about CB [here]( 👨‍💻 Team Just me🙂🥀

#Hacktoberfest

#Open Source

#Hackathon

#Web Apps

#React

#Courses

414

Techswag

Techswag \_Styling beyond your CSS Techswag aims to be the one place where tech lovers can find all their favourite swag available for sale. Granted, some swag such as Vercel's cup with a cork base are for employees only, while others such as Supabase's hackathon gold t-shirt can only be won if you attain the honorific title as their hackathon winner (or maybe you just have $1,000,000 to spare). However, many of them are for sale, and we aim to showcase (and link you there) on Techswag. Live site techswag.io (Yes, we are so committed to the cause—and we love tech swag that much—that we got an .io domain just for this 🔥 ) All Star Team Built with Next.js. Deployed on Vercel. Powered by Supabase. Usage of Supabase Database Brands, swag and categories are stored on separate tables. Could have taken normalisation a little further, but at this stage, it felt like an overkill. Logged in users can post new brands and swag on a protected route—that directly updates these tables. While we love the Supabase platform UI, building a submission form speeds up the process as we do not need to recall how Netflix is brand_id: 18. Realtime updates The feature really shines on the product/brand submission forms. When a user makes a submission under 'Add Brands', the dropdown selector for brands in the 'Add Products' detects the change and updates in a flash. Or, as they say, in realtime. This subscription feature is simple, but saves an unnecessary refresh, which speeds up the uploading process. Authentication I needed a log in for admins to post information. The initial idea was to prevent sign-ups with email/password, but I really wanted to play with Supabase's magic links, so a decision was made. Storage We needed to store swag images in our storage as tech firms have a habit of unlisting dated swag, which wouldn't work well for us. Every image posted goes through the storage first for the public URL it is submitted as a datbase entry. Life after Hackathon Upserting Instead of having to add new brands and products seperately, upserting would make the process smoother. Sorting by Brands Currently, products are sorted by categories. Let's bring in the big boys, shall we? Revamp The UI has some way to go. We aim to do a full frontend revamp before bringing this site to more tech swag lovers. Motivations The objective of this hackathon was to let us play with the best of what Supabase and Next.js has to offer—that was key. Coming in late into the hackathon, the idea has to be something that we were deeply interested in—yes, our deep interest lies in tech swags—but is something that can be completed on time while allowing us to test out the various features of Supabase. Working on this has increased our confidence in taking on this All-Star stack for an upcoming product. Well, this was fun—we hope you enjoyed it too.

#Hacktoberfest

#React

#NextJS

#Web Apps

#Open Source

#Figma

379

# madewithsupabase

Collection of projects made with Supabase

I made this to showcase the ⚡ Power of Supabase.
If your app/project is using Supabase and want to show off to the world,
Feel free to submit your project ya!

Join us! Submit a Project 🚀