Overview

A hackathon website created for the Hack the North 2024 Frontend Developer Challenge. The website was branded for a hypothetical hackathon, Hackathon Global Inc.™, and its main purpose is to display events from a backend API.

Preview of the App

hack-the-north-2024-frontend-developer-challenge-video.mp4

If you would like to visit the website itself, it is currently hosted locally at https://hack-the-north-2024-frontend-developer-challenge.vercel.app/ .

Technologies Used

1. HTML/CSS/JavaScript
2. ReactJS
3. React Router
4. TypeScript
5. Axios
6. MaterialUI

Running the App

1. Download or fork starting files to your local machine
2. Navigate to the my-app directory
3. Run npm install (assuming you have already installed npm locally)
4. Run npm start to launch app locally on http://localhost:3000/

Write Up

1. Walk us through your development process as you worked on this project. How did you plan out the structure and design of it? How did decide on the tools you've used? Did you encounter any problems? And if so, how did you solve them? Are there any areas of your code that you're particularly proud of or want to point out?

In all honesty, my development process was quite literally just slowly coding the project until it was fully finished. I wish I could say that I first went through a brainstorming period, then created a wire-diagram with Canva designs, and finally, after thoroughly thinking through the logistics, started hacking away at the code. But no. I essentially imagined how the website should look in my head, proceeded to reference some template layouts, colour palettes, and fonts, and then went full code monkey and blitzed out my ideas as fast as possible. As the code progressed, so did my ideas, lengthening the to-do list I had compiled in my head (just as a side note: I do have experience and am willing to partake in a more methodical and structured development process)!

The decisions regarding the tools I used for the project were based on my personal tech stack which consisted of ReactJS paired with Axios for API calls and MaterialUI for frontend styling. I also ended up using VSCode, GitHub, Git, and Postman as developer tools since I was already very comfortable with them. Finally, I hosted the site on "Vercel" because the name frankly seemed cooler the "Netlify".

One problem that stunted the progression of the website for over 2 hours was styling the MaterialUI input text field. Since the website had both dark and light modes, the MaterialUI input text field needed to be styled differently for dark mode, but unfortunately, after hours of stack overflow debugging, the only solutions I could find were depreciated 2 years ago. After enough frustration, I decided to find and modify a purely HTML/CSS input text field I found on the internet and create a reusable ReactJS component for it.

I am really happy with how the events page looks, the colour theory and typography mix together quite nicely, creating a very aesthetic page that takes advantage of the art of repetition.

2. Given additional time, how would you extend your application to become a fully functional product that thousands of hackers and the general public would use at Hackathon Global Inc.™'s next event? Would you add more features and performance metrics? If so, what would they be?

Firstly, I would extend the branding beyond just a cliche black, white, and blue tech website, creating a memorable logo and branding with a colour palette and theme that gets used throughout the website. Furthermore, I would lengthen the Home page, advertising the Hackathon's statistics, prices, sponsors, and perks. The website would also need a legitimate signup/login portal that is securely hooked up to backend servers (OAuth 2.0 would be a great addition too). Lastly, I would implement a registration portal, an administrator dashboard, a calendar events viewer, and perhaps a way to favourite events.

3. Any other thoughts you have (not limited to the previous questions).

Overall working on this technical challenge was an amazing experience where I definitely had a little bit too much! I really hope I will make a good fit in the Hack The North organization team, as I can't wait to make new friends, learn new technologies, and build awesome projects.

Thank you so much for considering me for the position!

Cheers, Joshua Dierickse