citrushack / citrushack2023

🍊 A NextJS & MongoDB powered web application serving SoCal's largest hackathon with 700+ participants. Engage, collaborate, and innovate at this premier event!
https://citrushack2023-three.vercel.app/
0 stars 13 forks source link

make dropdown options #6

Closed minsooerickim closed 1 year ago

minsooerickim commented 1 year ago

if you go to /apply, you will see something like this

image

The problem with the above is people can put anything which can be very frustrating when parsing through data.

For ex. someone can put "UCR", "ucr", "UC Riverside", "University of California Riverside", etc.

So, having a dropdown option would be best. (add a 'other' option if their school isn't listed)

approach: I can think of 2 approaches.

  1. text file with "all" schools
  2. i bet some library exists for this
  3. look into how other popular websites implement this and copy their approach
andreidimaano commented 1 year ago

Other websites don't handle inputs like UCR, UC Riverside. A library might not exist for this use case so we probably need to implement a data structure that handles this case — Represent it as a tree problem. I would do Text file with all schools, use a trie for autocomplete, the leaf nodes of the trie point to the actual value / label to handle the multiple text values. That way you go from U -> C -> R -> University of California, Riverside

minsooerickim commented 1 year ago

Other websites don't handle inputs like UCR, UC Riverside. A library might not exist for this use case so we probably need to implement a data structure that handles this case — Represent it as a tree problem. I would do Text file with all schools, use a trie for autocomplete, the leaf nodes of the trie point to the actual value / label to handle the multiple text values. That way you go from U -> C -> R -> University of California, Riverside

ofc other websites don't handle inputs like UCR; what I'm saying is take a look at what they do and copy their approach but change the inputs to fit our needs. That's probs the best way to do it IMO. Also libraries def exist for stuff like dis, https://github.com/burlakeugene/react-searchable-dropdown#readme theres a bunch more too that achieve similar things. Creating a trie ourselves is kinda overkill for dis situation

andreidimaano commented 1 year ago

yeah the library works but i'm talking about the parsing thing you were worried about, the library you linked means we'll have {label: UCR, value: University of California, Riverside},{label: UC Riverside, value: University of California, Riverside} which works too :)) but it's not as clean as having one label show up