DEV Community

Cover image for Reviving a 2010 Project When the Code Is Broken: A 15-Year Tech Time Capsule with Svelte, Supabase, Vercel
abigail armijo
abigail armijo

Posted on

Reviving a 2010 Project When the Code Is Broken: A 15-Year Tech Time Capsule with Svelte, Supabase, Vercel

#devchallenge #githubchallenge

GitHub “Finish-Up-A-Thon” Challenge Submission

This is a submission for the GitHub Finish-Up-A-Thon Challenge

What I Built

I created Zinemash, a web site to create a short comic in easy steps:

  1. Choose your predefined comic template

Choose your template

  1. Drop in your images

Drop your images

  1. Add speech bubbles

Add speech bubbles

Everything autosaves, and when you're done you can publish the comic to a public section

Tech stack:

  • Svelte: Front end
  • Vercel: Deploys
  • Supabase: Auth, image storage and save
  • Resend: To send the email to the users for login
  • Gemini: All imagen were generated with gemini
  • Opensilver: To convert the old silverlight project

Name Breakdown

  • "Zine" (from fanzine): Represents the independent, creative, and artistic culture of self-publishing multi-page booklets and magazines.
  • "Mash" (from mashup): Signals the core drag-and-drop experience. Users can mash together layout templates, speech bubbles, text, and their own uploaded images.

Try and create your comic: zinemash

Github: https://github.com/apis3445/webcomic

Demo

See the demo and the old presentation (in Spanish)

The Comeback Story

One of my favorite hobbies is drawing, so over the years I've built several apps related to it. While studying, I developed an app to add predefined figures and text in a 2D & 3D application for my Computer Graphics course. During my internship, I created a shared chalkboard using Macromedia Flash Communication Server for online classes.

In 2010, I joined a Microsoft competition. I had just bought an HP 2-in-1 tablet laptop to keep drawing, but a manufacturing defect that wasn't covered by the warranty left it unusable after only two years. First place was a laptop. I didn't win the laptop, but I created the app.

Winners of the competition

I submitted a project titled "Silverlight Web Comic." My goals were:

  • Learn Silverlight. I hadn't used it before (I'd only used Macromedia Flash).
  • Create a webpage to help anyone build simple comics.
  • Make it an open source project.

I used my previous experience to build a comic generator: you could drag and drop images and add speech bubbles from a defined set. I built it as a proof of concept, and this was a preview. Remember, this was 2010, so I created a very colorful app :D

Then I changed to a more demanding job, and the project stayed unfinished.

When I saw this challenge, I remembered it. But getting the code back wasn't easy. I had uploaded it to CodePlex and CodeProject (both gone now) and another website whose name I've forgotten. After searching, I found it on SourceForge, but the zip file was damaged, and I could only extract some of the files.

The next challenge: I have a Mac M1, and Silverlight is discontinued. After more searching, I found OpenSilver, which runs Silverlight in modern browsers. With Copilot's help, I converted the project from Silverlight to OpenSilver and decompiled the code for the missing files. Seeing my 2010 project run again gave me the screenshots I never had, since the original demo video lived on CodePlex, which no longer exists.

OpenSilver brought the old project back to life, but to truly finish it the way I imagined in 2010, I decided to rebuild it from scratch with Svelte, Supabase, and Vercel.

My Experience with GitHub Copilot

I have limitations because I only have the free Copilot subscription, since I have Copilot Pro at my job and I couldn't bought one month so I had to use carefully.

I used Copilot to create a plan for my project, and ask if was feasible to implement using Svelte and Supabase and some suggestions for the canvas and images, bubbles. Copilot defined a detailed plan.

I asked for help converting to OpenSilver, suggested how to help, and asked for help with the decompile option for the missing files and to fix some of the decompilation. I once decompiled a hard drive when it stopped working without a backup at my second job (before Git existed). After a few days, the hard drive worked again. Decompile is not easy, but Copilot helps me to decompile and with the autocomplete helped to translate to English the code and remove all the extra code added by decompiler.

Also I requested Copilot on Microsoft Power Point to translate my old presentation to English and modernize.

I used another AI tools like lovable to help me with the design of the UI, qodo for PR reviews.

I tried Copilot cli to help me with the integration to supabase, Vercel and how to deploy. When I finished the implementation I created the images of the soccer comic with Gemini and I requested one friend to help me with some testing and I fixed some of the errors that my friend shared with me.

I have been in QA for the last 6 years now, but I still enjoy coding and I learned a lot in a short time.

Top comments (0)