Building the Mediapop Website with Sveltekit

It was 2023 and the Mediapop website while good, was getting a little bit stale. Sure, we could update projects and add new sections, but it all felt a little bit like putting lipstick on a pig, if you'll excuse the expression. We could have leveraged Wordpress Themes again for a new design and we tried out Webflow, but there was a customization factor that just wasn't there and frankly another subscription was just exhausting. So we looked around at modern frameworks, React, Angular, Next.js, Vue, and Ruby on Rails, but the learning curve seemed to steep. This wouldn't seem steep for a seasoned developer, but hey we're pretty green and we'd be learning a launguage from the ground up.

That's when we found Svelte and Sveltekit and everything changed. It was fast, intuitive, and the support community was growing. Now don't expect us to be Svelte experts - we are by no means experts in Svelte - but we started building and leveraging Svelte’s prerendering of pages, server-side rendering, almost instant client-side routing that doesn't require a page reload (which reloads all your header scripts, layouts, etc.) The result was a whole different experience coming from Wordpress.

But then something happened along the way.

We quickly realized that creating a video page for each project by hand coding wasn’t efficient. In fact, it was laborious and we might as well have stayed in Wordpress. We knew that Wordpress was using databases so we took a crash course in database creation and management and chose Supabase to house our databases, storage, edge functions and so on.

Then things got even more complicated.

Instead of directly updating columns and uploading images directly to storage buckets for a new project it dawned on us that we needed a backend. That backend would allow us to create new projects, update existing projects, delete projects - so what you seer is not necessarily what you get. There’s a whole other side to the Mediapop website for management of everything.

Sure enough that extended to The Feed. 

The Feed is our place to share news, write posts like this, and share things that we’re inspired by. But of course, we need to house the data somewhere. The content, the images, the author of the post…and that’s when the backend for projects expanded to become a Feed and user management system. We can create and update posts, authors, images…the list goes on. The beautiful part of the backend is we have complete control over the design, content, and functionality of the site with minimal hard coding required. We set ourselves up for future success and it’s been a joy to navigate and use.

Vimeo has lost its way. 

Previously we were working with Vimeo as our video hosting platform to show off our projects, but sadly over time, Vimeo has changed from being a filmmaker platform to a platform that doesn’t know what it wants to be. YouTube? Maybe. Video Podcast Host? I guess. Canva? Looks like it. Vimeo is creating functionalities that go directly against its users….video production companies, filmmakers, etc. While this might be useful for businesses with small budgets, it shows that its core offering are no longer geared towards the people who made it. Plus, the subscriptions were getting to be expensive and there’s some sneaky tracking code in their player which we didn’t love.

So, we searched and searched and really loved what we were seeing from Mux. A cost to be sure, but in the end we knew we’d get a solid platform to host project videos for the website. The videos you see spread around the site are streamed via Mux.

The new website is yours to enjoy, the videos are yours to entertain yourself with and get an idea of oaf the kind of work we do in production and post-production. We’ll keep building on it with other features and highlights, but for the time being we are so proud of what we’ve created with the help of Svelte, Supabase, Mux, and more.

Oh and if you see any bugs…let us know! Email us at media [at] mediapop.ca to let us know about it.