Skip to content

Competitions Portal

Jump to bottom
William Kim edited this page May 11, 2024 · 5 revisions

Setting up the dev environment

Make sure that you have the acm-ai-site and acm-ai folders open in your workspace.

  1. Navigate to MongoDB and set up your account with your acmucsd email if you haven't already
  2. Verify that your local cluster is set up. Refer to this README https://github.com/acmucsd/acm-ai-api
  3. In the acm-ai-api root directory, execute npm run dev which should spin up the database and server localhost:9000#
  4. In the acm-ai-site root directory,execute run npm run start which should launch the app on localhost:3000

The competitions portal

The goal of the competitions portal is to provide a way to streamline how ACM AI carries out its annual competitions. Here's a couple of screenshots of the work in progress as of Spring 2024.

image image image

What are its features?

  • Provides summary statistics of a user's team including a score history graph
  • Displays the members in the team
  • Gives users ability to upload a submission with a description. In previous years, the users were able to add tags however there isn't a use for it yet so the tag is being used to record the name of the person who submitted.
  • Users can search for a team to join via a shareable passcode
  • Leaderboard of rankings
  • Ability to view submission history and match history

What needs to be finished for the 2024 academic year?

  • The biggest one is to OPTIMIZE the portal index.tsx state management. Due to time constraints, we were trying to push out an MVP (minimum viable product) so there was a bit of prop drilling unfortunately. Although it's not extensive, it's not fun to look at nor work with. React context might be a viable solution to help make state management and development much easier for future iterations. Alternatively, React-Redux is an old but proven way to make custom state management.
  • Secondly, the app needs to avoid frequent refreshes on recurrent page navigations within the portal. Find a way to cache responses to mitigate api requests.
  • No testing was done yet for the submission uploads or submission history since the test eval servers were never hosted (sad)
  • The match history page has no UI at all at the moment
  • The upload submission section has a bug where it displays the incorrect remaining time until the submission deadline
  • A help button to trigger some sort of modal, drawer, or dialogue that provides information about the competition metadata. This info can be pulled from the API like so: getMetaData(competitionName).then((res) => { setMetaData(res.data); })
  • PLEASE PLEASE PLEASE test for any runtime errors. This can happen sometimes if there's a null state value that is used in another component. So when designing components, keep that in mind!

How does the state management work for the portal?

The idea is that upon first page load, the app needs to check for user authentication. If the user isn't registered for the competition, they receive a prompt to participate. If verified, the portal will the give the user the ability to form their own team or join one.

If a user joins a team

The page will force a partial reload of the stats and other data to retrieve the teamInfo and ranking information from the MongoDB schemas. other interactions such as making a submission and navigation between pages will also perform page reloads. Again, how the future dev team wants to handle reloads is up to them.

If a user leave a team

The page will again force a reload to reset the page to the default screen to join a team or make a new one.

Clone this wiki locally