What can I do to improve my College Football Top 25 voting system
Unanswered
Nile Crocodile posted this in #help-forum
Nile CrocodileOP
Hi Everyone, I am building a College Football Top 25 voting system where a voter logs in via Clerk and it able to cast their votes (see the 1st image). I am using ShadCN Form and Select components and populating the options. They then hit submit and I put the votes into Supabase (using Drizzle ORM). Right now I have each vote/rank in the ballot as a row in the DB. I felt like that was the best route as I need to associate points to rank (25 points for 1st place vote down to 1 point for a 25th place vote).
I am mainly looking for pointers/feedback on what I could improve. For example, selecting an item in the form select component seems VERY slow (possibly because there are 120+ teams with images). Also, any other pointers would be awesome! I tried to add code snippets on what I am trying to attempt to try to help as best as possible.
I am mainly looking for pointers/feedback on what I could improve. For example, selecting an item in the form select component seems VERY slow (possibly because there are 120+ teams with images). Also, any other pointers would be awesome! I tried to add code snippets on what I am trying to attempt to try to help as best as possible.
17 Replies
Nile CrocodileOP
Just bumping this to the top
Madeiran sardinella
Hi bro. I don't know if a select with 120 options is an user friendly thing.
1. I'd create a weeks table and in the votes table every row should have userid, teamid and weekid. That combination should be unique for every row in the hole table
2. No idea. Maybe with queries.
3. I'd sort by votes and base on position.
4. Depends on the cost of that calc, and the frequency you need that calc.
1. I'd create a weeks table and in the votes table every row should have userid, teamid and weekid. That combination should be unique for every row in the hole table
2. No idea. Maybe with queries.
3. I'd sort by votes and base on position.
4. Depends on the cost of that calc, and the frequency you need that calc.
Nile CrocodileOP
Any recommendation on what would be a more user friendly option?
Madeiran sardinella
Idk, maybe a search input with auto complete or a grid with radio inputs 🤷🏾♂️
i don't know about the original question, but for the 120-option select specifically, https://ui.shadcn.com/docs/components/combobox is a good one
with virtualisation, you can support thousands of items with good UX https://google-fonts-preview-subsets.joulev.dev
Nile CrocodileOP
@joulev I tried that combobox but ran into issues trying to style it. The dropdown would go the entire height of the page and overflow which I fixed with the ScrollArea component. However, I couldn’t get the dropdown to take up the full width to match the button popover trigger 🤔 definitely going to look at that other example in the morning!
Madeiran sardinella
Users know the name of the teams?
Nile CrocodileOP
Yea the voters would know the teams
Madeiran sardinella
It's a tradeoff between typing the name and scrolling down to find. But just my opinion, I don't like the native behavior of input select on mobile phones
Nile CrocodileOP
That is fair. Based on @joulev suggestion, I am using
@tanstack/react-virtual with the ComboboxI just have to finish plugging everything together
Madeiran sardinella
Looks good!!
@Nile Crocodile That is fair. Based on <@484037068239142956> suggestion, I am using `@tanstack/react-virtual` with the Combobox
Silver carp
out of curiosity, how are you getting the college logos?
@Silver carp out of curiosity, how are you getting the college logos?
Nile CrocodileOP
From my CMS
@Nile Crocodile From my CMS
Silver carp
Interesting, I'm guessing you downloaded them from an API or manually?
@Silver carp Interesting, I'm guessing you downloaded them from an API or manually?
Nile CrocodileOP
Ah yes grabbed them from the school’s athletic website 😅 I’m sure ESPN has an API you could grab them from as well