Hackathon Prizes Page
A Prizing Page for your lovely hackthons!
Created on 8th November 2025
•
Hackathon Prizes Page
A Prizing Page for your lovely hackthons!
The problem Hackathon Prizes Page solves
problem statement : https://devfolio.notion.site/tryouts-frontend-1
These are few improvements i made to my implementation of the Hackathon Prizes Page :
- Shows the Prize's page in a more consumable manner for hackers
Hackers care more about, who is giving the prize and how much. That gave me the idea of structuring it bit like an invoice like customer (who is giving the price eg: Metis DAO Foundation) and products (the tracks they are giving the prizes in).
- Indexer with centering of sponsor or organizer
Generally line of sight should be at the center of the screen, so i made sure that even when the user scrolls the parent page, the indexer brings the sponsor at the center of the index list, making it just a bit easier to look at.
- Searching for track prices
let's take the example of QuickNode if i was searching for one of there track prices let's say Best use of NFT API and i searched for it in the search bar, i would only get that one single track price in the search results, but i think a better choice would be to show all the track prices of QuickNode instead, because if a hacker is using there (QuickNode) tech it kinda feels right to provide them with more tracks that QuickNode might have to offer
- Have the highlighting of indexer working even when you search for a track
In the reference page when you search for a prize or a track the indexer does not highlight that track, it kinda made sense to me that if i was a hacker and i searched for some track i would want to share that link with my teammates like "hey i think we should target this track prize (and then send them the link for it)", so i made it so that when you search for a track the indexer is highlighted and the partner/organizer gets added to the link, so that when you share that link with your teammates they see the same track prize.
Challenges I ran into
-
One issue i found in the reference page given (like eth india prizes list page or eth denver prizes list page) was that if you scroll to the bottom of the list (on the index section) and keep scrolling it will make the parent component also scroll, and as soon as the parent component scrolls the indexer also scrolls, which is kinda bad for the user, i faced a similar issue. (i used overscroll-contain to fix this, so that the scroll of the indexer does not propagate to the parent component)
-
Description of the tracks renders markdown, doing so for the whole page at once was heavy, so we are only rendering the markdown once the user opens the track.
-
To handle the edge case where the last element does not get highlighted since it will never come up to upper portion of one-third of the screen i added some padding at the bottom (quick little hack for the time being!)
-
The content page does not re-render if you click on an item on the index section, we are using scrollIntoView (a native dom api) to just bring the required element into view instead of using state, we use state only for the indexer section (even this could have be done with pure css we could have used data attributes to highlight the required element but for the time being i used state for indexer).
Technologies used