Last week I joined a 24 Hour Online Hackathon hosted by Codedex. I have participated in several hackathons by now both in-person and online. I usually join hackathons to learn about specific topics or tools. When I saw that the rundown mentions Three.js, I was pretty excited to join. I have been wanting to learn about 3D on the web, so this seemed like the perfect opportunity to have hands-on experience.
There are three tracks available to choose:
Track 1: Board Game Cafe website
Track 2: Stoop Sale Invitation
Track 3: Olympics Paris 2024 predictions
Each participant should choose 1 track and either join as a team or solo.
Pre-hackathon
The first challenge of any hackathon is gathering people to team up with you. Online hackathons are usually more difficult because of different time zones, levels of commitment, and just the vibe between people. I've had online hackathons on Slack and Discord. Discord can get overwhelming, but I think it's a great platform to hold an online hackathon.
We started by introducing ourselves in the specified channel. I started searching for teammates quite early in the hope that I could have a headstart. But finding people who are in a similar timezone as me was harder than I expected. Being new to Australia, I am so not used to being the opposite of the world. I mean it is called Summer Hackathon and it's Winter where I am.
I was thinking back and forth about whether to keep trying to find teammates or go solo. I decided to focus on having a rough plan about the libraries and tools that can be used during the hack day.
Opening Ceremony
Then it's the kickoff time. The opening ceremony was at 02:00 in the morning Melbourne time. My biggest mistake was to not sleep before the kickoff. I enjoyed the opening ceremony though. You could really feel the enthusiasm from the Codedex team and the participants.
This presentation by Ellie from the Codedex team was pretty much what I was expecting to do, but not really go as expected. It is the ideal process if you want to have a smooth experience at a hackathon.
I still had no team when the opening ceremony finished and the hacking time officially started. I was on the brink of giving up on finding teammates. And then I decided to show up at the team formation event which almost didn't happen due to technical issues.
Sonny from the Codedex team led the team matchmaking process. People were called one by one, they opened their mic and made a brief introduction about themselves and what they want from a teammate. Once again most people are in the US. I did try to reach out to some people who want to do the same track as I want regardless of their timezone, but I got no reply. Then Sonny asked people to type the track number we were interested in. And finally, I got my team of 3!
As soon as Sonny declared us as a team, I rushed to send my new teammates messages and made a group chat for our team.
Start Hacking
All three of us were participating as coders. Both of my teammates are in the US, so I'm the one who had to adjust to their time. I even installed a Chrome extension to keep track of our time differences.
The track we chose is Track 1 which requires the following criteria:
- 🗓️ Add an events calendar
- 💻 Ensure it’s an approachable UI/UX design
- 🧉 Add a 3D menu with Three.js or A-Frame
- 📱 Mobile-friendly (responsive)
- 🔎 SEO-friendly (meta info)
- 🎨 Be as creative as you’d like!
Since we don't have someone who specializes in design, all three of us gave it a try to visualize the web pages we want to build. We decided to try using Figma because two of us had used it before. We grabbed some references like the logo, color scheme, and real info from Sip & Play Board Game Cafe original website.
By 06:00 AM Melbourne time, I was too sleepy to comprehend anything. So I notified my team that I was going to sleep a bit. I didn't want to take much of the hacking time especially when it was still daytime on my teammates' side of the world. But I think it was a good decision.
By 09:00 AM Melbourne time, after a snooze, a shower, and a cup of tea, I got back to my team feeling a bit refreshed.
After having some visual references on Figma, we decided to start implementing instead of perfecting the design. We chose which page we wanted to implement. We decided to use React so that we can utilize React Three Fiber for the 3D scenes.
Since my goal at this hackathon is to learn 3D on the web, I spent most of my time tinkering with 3D models, three.js, and react three fiber. I initially wanted to try making my own 3D models with Blender. However since I didn't have any experience with Blender, I decided to use free 3D models from sketchfab. There were so many new things to learn and it wasn't a smooth process. I couldn't even distinguish between the .glb and .gltf models.
I got inspired by Sip & Play's Instagram post and wanted to make a 3D model that resembles this real occurrence at the board game cafe.
Since I decided not to use Blender, I wanted an online tool that allows me to import gltf files and put different 3D objects together quickly. I decided to use gltfeditor and this is what I came up with:
Then it's time to put the 3D model on the web page. My first struggle was to load the model. I tried to load my gltf file directly using useGLTF from react-three/drei but this didn't seem to work. And I found gltfjsx which is a script that turns gltf assets into JSX components. And I could finally load a 3D model on my web app for the first time.
I also struggled with positioning my camera. So I had to stray far from what I had in mind and be satisfied with the simpler version. But then another problem came up when I tried to push my changes to Github. I got an error saying 'This exceeds GitHub's file size limit of 100.00 MB'. It suggested to use Git Large File Storage. I tried to set up Git LFS but still couldn't satisfy Github. I was panicking as the time was running out and I still had to implement another page.
5 Hours Left
It was finally the morning at my teammates' side of the world. I told the team about problems I encountered and we shared each other's progress. I decided to move on to the Events page instead of trying to fix the Git LFS problem.
Implementing the events calendar was more challenging than I had thought. Either the lack of sleep or dealing with date-time is always hard.
3 Hours Left
We had a big misunderstanding. One of our teammates thought the hackathon would last longer. It was really unfortunate that he already had to leave for work. So we couldn't incorporate his work into our project.
2 Hours Left
Another teammate finished her page. She wasn't familiar with GitHub so I offered to merge it from my side. This wasn't a smooth process either. Layouts were broken and I still had to resolve the GitHub large file issue. I found a way to compress my 3D model file, some textures were lost but it still looks okay to my non-professional eyes.
40 Minutes Left
I deployed our web app to Netlify. Surprise, surprise! All links were broken and images weren't loaded. I found out that we had to create _redirects file or netlify.toml to set to the correct routings. I even made a silly mistake. I thought the _redirects didn't work, turn out I forgot to commit the new _redirects file. The missing images issue was also fixed by Importing Asset as URL.
Finally, after last-minute hotfixing on production, once the critical issues of broken links and images were fixed, we hit submit.
This is our final submission:
So that concludes my experience joining an online hackathon hosted by Codedex. They have such a fun community if you are keen to learn programming. Definitely check them out and maybe join their next hackathon!
So that concludes my experience joining an online hackathon hosted by Codedex. They have such a fun community if you are keen to learn programming. Definitely check them out and maybe join their next hackathon!
No comments:
Post a Comment