Who I Am

About

university of waterloo logo
carats used while coding

What I Love

Hobbies

curling rock
guitar
hockey stick and puck
frisbee flying through the air
chess queen

What I've Done

Experience

Toronto District School Board logo
Creature world logo
Vivid Seats logo
Tradable Bits logo
Front Rush logo
Internet Art Club logo

Internet Art Club

E-commerce Website

Built a clean and unique e-commerce site for Internet Art Club - the one stop shop for interesting art and fashion.

Byline

Online Magazine

Built a unique and customizable online magazine that hosts creative writing from all demographics and subject-areas.

Martha Rave Cookies logo

Martha Rave Cookies

POS & Order Management System

Built a platform designed to minimize time spent on emails, reading spreadsheets, and organizing stacks of paper while minimizing operating costs.

Swinging creature Swinging creature

creature.world

Artist Portfolio Website

Created creature.world, the main hub for New York-based artist Danny Cole's Creature World series.

Vivid Seats logo

Vivid Seats

Software Engineer

Ported entire checkout flow from legacy to modern tech stack.

Built other cool features on the side.

Tradable Bits logo

Tradable Bits

Full-Stack Web Developer

Overhauled the UI & UX of 20+ client-facing pages.

Organized a successful company-wide Chess tournament!

Front Rush logo

Front Rush

Technical Implementation Specialist

Created Python scripts to automate manual inventory data entry.

Added a page to integrate B2C sales of Henry Schein goods.

The homepage of christopheroka.com

This Website

Woah, that's meta

Decided to challenge myself and build my own website using pure HTML, CSS, and JavaScript.

Why not learn how they used to do it back in the olden days?

Dogs on Google Images

Model Generator

ML Image Recognition

Scrapes images from the web based on inputted words, then trains a model to recognize them.

Byline logo

Byline

Online Magazine

Tools

Next.js logo Next.js
JavaScript logo JavaScript
HTML logo HTML
CSS logo CSS
GitHub logo GitHub
Heroku logo Heroku
Vercel logo Vercel
Figma
Strapi logo Strapi
AWS S3 logo AWS S3

Synopsis

After creating a physical newspaper-style magazine called “The Drunken Canal”, one of the co-founders and a writer for the New York Times decided to bring their creation to the web under the name “Byline”.

This would be a space for creatives of all demographics to submit their writing for a chance to appear on the site.

I took on the challenge and built bylinebyline.com from the ground up, making a platform that's blazingly fast and easily modified by non-technical editors.

Here’s what the finished site looks like:

Infrastructure

They needed a website, and they needed it quick. They also needed to be scrappy, considering there was currently no monetization scheme in place. I had to think of solutions that were consistent, performant, quick to build with, and most of all cheap.

First was the language/framework of choice. I’m familiar with Next.js, but had only used the pages directory before. With all the new features that Next.js 13 and the app router were boasting, I had to give it a shot. I wanted this site to be as fast as humanly possible, and the app router with server components seemed like it could get me there.

I chose Vercel to host the site. From using Vercel before, I knew the free tier was quite lenient and the pro tier was on the cheaper side as well. Since I was aiming for fast development, using a tool I’m familiar with would also speed up the process.

I needed a CMS for the editors to manage site content without touching the code. I decided to go with Strapi because I’d used it before and because the “Dynamic Zones” were a perfect solution for creating customizable articles with hot-swappable components. I’d host all of this on Heroku, which provides an intuitive UI and minimal setup and maintenance.

Finally to host images, videos, and other files, I decided to use AWS S3 because of the pay-as-you-use price model which seems to be one of the cheapest file storage solutions out there. I was also aware of the ability to create replicas to serve content in other regions should we need to decrease latency in the future.

Here’s a diagram I drew up to visualize the infrastructure of the site:

Building

This process was relatively straight-forward. Since this was my third major project, I’d gotten the hang of working with a team and working with deadlines in place. I noticed I would hit less roadblocks because I’ve experienced many of these problems already.

I was fortunate to work with an experienced graphic designer on the project, allowing us to move quickly. She would make a design, we’d discuss as a team, and I’d implement it shortly after.

Although most of the project was smooth-sailing, there was one continuous and unique challenge that we had to work through. The graphic designer on the project specialized in creating designs for print media like Bloomberg and the New York Times, and this was the first website they’d ever designed. This meant I had to familiarize them with web-specific considerations like screen size responsiveness, interaction design, and accessibility.

Luckily, they were quick to learn and were able to crank out designs like no tomorrow once they got the hang of designing for mobile and desktop simultaneously, and other considerations like placement, colour, and size of text and buttons.

After some hard work and a few ideas from me as well (like the colour-changing button on the homepage), we finished the site within the initial 12 week timeline!

Takeaways and Areas of Personal Growth

  • It’s a lot easier to enjoy the work you’re doing when you like the people you’re doing it with!
  • I learned how to optimize a website for speed (static site generation, incremental site regeneration) and SEO (meta tags, structured data)
  • I learned how to use AWS and realized how many different services they offer (I also learned how difficult it is to navigate their UI)
  • I got a deeper insight into the world of graphic design and print media. I learned cool industry terms like “hed” (title), “dek” (description), “TK” (To come), “rules” (borders), “kerning” (spacing between letters), “leading” (line height), and many more

Christopher
Oka