Shoutout to Codédex for hosting the Summer 2024 Hackathon.
Wanna skip to just viewing my website? Scroll to bottom.
Despite having a 9-5 internship at the moment, I really wanted to get out of my comfort zone this summer. Networking more than I ever have and coding more than I ever have.
I decided to take on a frontend project for the Hackathon. The last time I touched frontend was back in mid-April so the night before the hackathon, I brushed up on trying to remember how to create a React Vite project and practicing deploying my site on Vercel, which I have never done before.
Since I recently completed a web design and development internship in WordPress, I knew that I could use what I learned in terms of UI/UX strategies to gain more leads such as funnels to my advantage for the project. My project is a single webpage, nothing too technically advanced. However, at a business perspective and with consideration of what the “clients” needed and their priorities, I decided to leverage my skills from that internship to complete the project.
One great thing about Hackathons are the unlimited online resources available to you. I utilized every template, API, import library resource that I could use. To me, the purpose of a hackathon isn’t to complete the most technically/functionality-wise advanced project; that’s for personal project. To me, a hackathon is to complete what is asked of me in the most efficient way. I didn’t spend all 24 hours coding. I got 8 hours of sleep. However, I think what set me apart were my goals. I created a checklist and set the bar low. I didn’t need to create a multi-page website for the project and I only needed to complete what was asked of me.
The criteria of the project were as follows:
Date and Time
For this criterion, I decided to create a Google Calendar event and allow users to RSVP for the event. Since I’m utilizing Google Calendar, it can send them the event notifications and also let the host of the event know who and how many people will show up to the event.
Map API/Visual
API’s are confusing. API Keys and payment, yada yada. They’re especially inefficient if you’re unfamiliar with them. Although I know how to use APIs in frontend, I didn’t wanna pay for anything so I resorted to using embeds of Google Maps. It’s actually pretty easy since many platforms offer embeds when you click to share something. Not only that, Google Maps embeds are interactive since you can zoom in and out and also click a button that takes you straight to directions.
Interactive
Besides the Map Embed and Google Calendar feature, I created an FAQ section on the webpage. I created an accordion menu version of an FAQ page. This allowed for extra user interactions. In addition, I added an image slider that gave visitors a sneak peek at what the event was going to sell/provide and what the surrounding area looked like.
This was where I essentially justified why my webpage was a single page and so simple. Funnels are a type of webpage where the sole reason for them existing is for a user to click a business’s call-to-action button. Knowing this and how the “clients” wanted as many people in the neighborhood to show up to the event, I knew that this website had to simple and something anyone could use.
I made sure this webpage was mobile friendly. Since I was utilizing a few imports and template code, I had to create extra media queries to ensure that it would work on mobile. I also made sure all the images/assets on the webpage were under 300kb (exception to header image at 600kb) so that the webpage wouldn’t take too long to load for legacy platform users.
Good Vibes
I personally think this is the most vague criteria… It’s hard to know what “good vibes” are since “good vibes” are subjective. However, I tried my best by watching the project video and color schemes and looked up the neighborhood where the event was going to be held. I used this information to set the color palette of my webpage to beige and images of Brooklyn, NY. I also chose two fonts, one is Times New Roman to give off New York Times newspaper vibes and one is Courier New so typewriter vibes. I think those two fonts blend well together in my page.
Will I win anything? I don’t know… but I enjoyed the experience and put a lot of skills to good use.
Check out my website!
Live Demo:
Angela Cui 
Leave a comment