I entered a Hackathon at the last moment, and it was chaotic!

I entered a Hackathon at the last moment, and it was chaotic!

ยท

7 min read

A window of opportunity

While browsing the internet I came upon this site Devpost, which was currently organizing an interesting Hackathon. In this hackathon, participants were supposed to submit ideas or tools or resources, that help future individuals participating in any hackathons.

Lately, I've noticed a sudden decline in hackathons with original problem statements. Most of the problem statements are reused and in a way generic. So, when I saw this hackathon, I instantly made up my mind to enter it. But, here's the catch: the final submission for the hackathon was scheduled at 11:45 pm on Feb 26 EST. This was a problem because the time was 11:47 am on Feb 26 IST... ๐Ÿ˜ถ

So, now all I had was about 22 hours, and I was supposed to come up with an original idea aimed at helping hackathon participants. Although it was not required to submit a project, I believed that it would be even better if I did submit one! [t.b.h, I needed this win! ๐Ÿคž]

Also, I thought it would be fun to document this entire event so ya, I did waste a lot of time here ๐Ÿ˜… Anyway, so here's my roadmap to tackle this hackathon. I will be working alone in this hackathon, because... well... let's ignore this one ๐Ÿฅฒ

Project Idea

Now, let's get to business. My idea is to create a platform that can enable teams participating in hackathons to work more efficiently and easily monitor all their need in one place. So, here's my proposal:

Problem:

"In today's time when there are hundreds of hackathons being organized all around the world, it becomes very difficult to manage all these. Especially, if you decide to participate in an international hackathon, things are difficult, as you have to coordinate with team members, work with harsh deadlines, manage the presentations and codes, and god knows what more!"

Solution:

"Now think of a platform that manages all that for you! A platform that automatically authenticates with the organizing platform and creates a grant chart for your hackathon timeline. Now, you can easily delegate tasks among your teammates! But wait there's more... It links with your GitHub repository and notifies you about all the commits, PRs and merges, that are made to it.

Are you still thinking? Well, think no more... Presenting BIUS (Best In US) [no, the name is not final, yet]. A platform that does all that for you, so you don't waste your time worrying about these petty problems and focus on winning your Hackathon!"

I know it is not the most unique idea out there, but I have participated in a couple of hackathons, myself, and even organized a few, and this problem is real! And, I believe that this product will help many! Also, this idea can be applied to real-world and can be used by other teams to manage their products

Functionalities:

  • Create progress and grant chart timeline for the hackathon event

  • Delegate and coordinate with team members

  • Manage Tech Staks, to-do lists, and other utilities

  • Chat with team members for effective coordination

  • Integrate with canvas for creating documentation and presentation

Project Roadmap:

Now that we have put all the ideas down, it is time to work on it!

So here's my plan! For now, I will be focusing only on the frontend part of the application. I will be maintaining a GitHub repo for this, and hosting my website on GitHub pages. For the tech stack, I am thinking to stick with React JS, as it will help in creating a dynamic website. Here's my basic sketch for the webpage:

Keeping the design and functionalities in mind, I decided to go with the MERN tech stack. I know, not the wisest decision, but compared to the ones I am about to make later on, it is nothing ๐Ÿฅฒ

Since I have more experience with the front end, I decided to leave the backend for later. [Spoiler Error: It was a terrible decision...]

The Development Phase

I thought the login page would be the easiest part of all, so I started with it. First I went with a plain white background with a complementary dark login form. However, while coding, I switched the colour pallet and went with a dark-themed background with a glass-morphed login form and a bright GIF as a cherry on top!

Although I was very proud of how it turned out, I wanted to add the authentication part as well. This cost me a lot of time. I have created responsive-working login pages using HTML, CSS, and JS, but it wasn't the same working with React. So, I ended up wasting a lot of time on it, until I realized I only had 12 hours left till submission!

With so little time left, I started working on the backend part of the website. To be honest, I have very little experience working on the backend, and this was my first time working with MongoDB. After wasting my time reading the documentation (ya, I am that guy ๐Ÿฅฒ) and referring to some websites and tutorials, I was finally able to set up my Node.js environment and prepared my schema to connect to the database.

Well, here's the trouble part! When I run my index.js, in the hopes of establishing a connection, it failed and displayed a bunch of errors. Then I did what every programmer has to do - getting humiliated on Stack overflow (seriously, that community is toxic) - and that didn't help either!

I was frustrated at this point and decided to skip the backend integration entirely and focus solely on the front end. Time was running out, I had about 9 hours left. I followed my sketch and implemented the same design with minor tweaks in-between. I wanted to add the option to switch between dark and light themes, but I ran into errors.

Finally, I decided to go with a dark theme and a minimalistic design.

With the homepage prepared and about 6 hours remaining, I have to connect the login page to the website so that it re-routes the page to the user dashboard. And this is where hell breaks loose...

You see, ReactJS loads all its components at once, this makes the website fast and saves loading time. However, the downside is that all the components are to be called using a single page (by default called App). Thus, ReactJS is powerful when the task is to create single-page scrolling websites. Now, when it comes to redirecting pages we have to do some manipulation...

So, for this, I had to use the react-router-dom library, which enables users to reroute the website towards a specific component. But, it was easier said than done. I wasted 2 hours trying to make it work, but each time either I was greeted with a blank screen or lists of errors.

Now, was the time to design the user dashboard. But with only 4 hours remaining, I switched my tech stack from React to pure HTML and CSS. It took me 3.5 hours to design the dashboard part, but it is worth it! I am proud of what I came up with.

Although, the website is not completely functional the switch mode and list-to-grid button work. But, overall I lived it.

Although I wanted to give it more finishing changes, with less than 20 minutes remaining, I started working on my submission prompts. Racing through time, I somehow managed to submit my project.

My Experience

In the end, it was fun! Sure, chaotic and frustrating at times, but that's the programmer's life... I also realized how much I lack in knowledge. Hence, I have decided to improve my skills and tech stack.

Now, I don't think my work was personally good enough to win, but fingers crossed ๐Ÿคž. I loved the Hackathon theme (hats off to the DevPost team), maybe next time I won't be registering on the last day ๐Ÿ˜…. It was all in all a great experience. I am thinking to take this project open-source so that other developers can contribute to it, and turn it into reality.

I will be updating this blog for any future works on the project and will be sharing the Github repo with you all, once I have done with the basic backend structure. Thanks a lot for reading.

ย