Relevant Links

Overview

Citrus Hack is UC Riverside's engineering student organization in charge of planning a large scale collegiate hackathon series of the same name, Citrus Hack. The organization is broken up into smaller committees in charge of operations and logistics, design and marketing, web development, and sponsorship outreach.

Each year, Citrus Hack plans two hackathons: Cutie Hack and Citrus Hack. Cutie Hack is a 12 hour event open only to UC Riverside students that aims to help beginner hackers with the learning and time crunch process. Citrus Hack is a multi-day event open to students all over the country that aims to foster creativity, collaboration, and learning amongst students interested in the tech industry.

For the 2018-2019 school year, I was the co-lead of Citrus Hack's web development committee. I helped build the websites for both Citrus Hack and Cutie Hack. I was mainly in charge of front-end development, while my colleague and good friend, Ji Hwan Kim, was in charge on the back-end.

I designed the user interface for the Citrus Hack 2019 website and coded it up in HTML, CSS, and JQuery. During the planning phase, I met weekly with committee leaders to update sponsorship and operations details, art assets from the marketing team, and reported website traffic and user analytics to the hackathon directors.

Landing page, login, and user profile.

Application/Account creation page.

Live page. Used to give hackathon attendees important "day of" information.

Design

Early on, the marketing committee decided that "Cyberpunk" would be the theme for the hackathon. After grabbing some inspiration photos, I made my initial designs.

Later into the development process, the marketing and design team made their own unique art assets which looked really good. I reworked my previous designs to match more with the pink neon aesthetic they were pushing for. This iteration was more or less the same as the version that was published.

The marketing team made the art assets on the page, including the hero graphic, the lantern graphic, and the robot mascot.

The icons for the hacker "tracks" and the "Lend a Hand" section I borrowed from Flaticon.

The website launched beginning of March 2019 so that interested hackers could get information and apply to compete in the hackathon. This version of the website launched without the live page since it wasn't necessary yet.

Just before the event, I designed the live page. This page contained important "day of" information about the sequence of events and procedures for the hackathon.

Since most people who saw this page were trying to beat that 36 hour deadline, I made the conscious decision to keep the navbar and timer on the left. Since most western language speakers naturally scan their eyes from left to right, users would naturally see the navbar and timer first whenever they looked at this page.

Though the design layout for the live page is nearly identical to the draft I made in Figma, the color scheme for the live page ended up looking drastically different to what the published website looked like.

I also designed some custom icons like the home and toolbox icons to go on a mobile version of the live page. I made sure that this view of the website resembled common social media apps like Twitter and Instagram by having the navbar at the bottom.

Live page mobile view.

Implementation

The Citrus Hack website was a Django app hosted on pythonanywhere.com. Django allows the page/path hierarchy to be explicitly defined in a separate file. Each path points to one specific HTML file.

Since each HTML file is static by default, we used a package called Jinja that allows the variables from the python backend to be injected directly into the HTML dynamically.

The animation on the main title on the hero graphic was custom made by me in CSS Key frame animation.

The pink neon accents that animate as the user scrolls down the page were animated using a library called CSS Animate On Scroll.

Lessons Learned

Citrus Hack was my first big project. I learned that collaborating with a large team is a lot easier said than done. It felt really good to see that the work that I did was just one small piece of the puzzle that was Citrus Hack.

In terms of building the front-end, I am very proud of the final product. Using HTML/CSS/JQuery was fine, but very tedious in hindsight. There were a lot of development things that I could have saved a lot of time on if I had used a front-end framework like React or Vue.

If I had used React, a lot of code could have compartmentalized and reused. Also using something like React Router would have made making the live page a lot easier as well.