Overview

Currently, the navigation menu for subpages under main pages such as Dashboard and About are displayed as sticker navigation bars. For mobile, this should be changed to a dropdown menu.

Proposal

Change subpage navigation menu to dropdown format to save space and improve UI.

Supplemental Information

Attached is an image of how the navigation bar looks on mobile.

Overview

The challenges section is a section describing the various challenges or tracks that will be held during the hackathon along with the company or organization hosting the challenges.

Proposal

The Challenges section should have buttons on the left with the name of the challenges. Upon pressing the buttons, there should open a card with a description of the challenge and prizes, if applicable.

Supplemental Information

This section should exist on the main page under the Explore section and look like the prototype:

Overview

Hackers should be able to save events they are interested in and get updates about the event.

Proposal

Add a "Save Event" button to the event description on the calendar to allow hackers to save the event.

Supplemental Information

The save button will be in the event description card.

Overview

A HackPortal user should be able to view all information about the hackathon regarding workshop materials, events, food, etc.

Proposal

• Sidebar
  • General
  • Workshop Type(sponsor, tech, comm)
    • name of workshops
  • Hacker name and welcome at the bottom
• Dashboard
  • Hack Center
  • Scan-in
  • HackerPack
  • Project submission
• Main Content
  • Document links
  • Header and info

HackerPack must include the following:
Sidebar, dashboard, navigation bar

This application will exist at the route /dashboard/hackerpack and exist as a dynamic page. A hacker must be able to view and go to each subsection of the page via the sidebar menu. A sponsor should be able to view the workshop materials that are required for their own workshop. The dashboard should be accessible at all times to access other sections of the dashboard.

Currently, some of the API endpoint that are restricted to event organizers and admins can be accessed by anyone due to the fact that there is no authentication process taking place at those endpoint.

Proposal solution:

• Add a check for valid Bearer token. If token is not valid, or if token belongs to a user without appropriate privilege, then return a 403 response.

Overview

The 'Sponsors' page should have the logos of all sponsors of a hackathon and a link to their pages, if applicable.

Proposal

There should be a template for sponsor logos so they are organized on the page and sized based on their sponsor tier.

Supplemental Information

The changes will occur in ./sponsors/index.tsx

What did you expect to happen?

Material UI should install on npm install

What happened?

Material UI had to be installed manually

Scope

Core

What browsers are you seeing the problem on?

No response

Relevant log output

No response

Overview

Dashboard and Schedule are spelled incorrectly

Proposal

Fix the spelling

Supplemental Information

Overview

An organizer should be able to export all registration and scan data as a CSV file. The current implementation does not allow for that.

Proposal

Allow super admins to export data as a CSV file. This data should include any scans and registration questions and answers added by an organizer

Supplemental Information

Add the button to the top of the stats at a glance page.

Overview

An organizer should be able to send out notifications to all hackers, organizers, sponsors, judges, or a selection of multiple. This functionality will also have multiple checks in place to ensure notifications are not sent accidentally.

Proposal

An organizer must be able to do the following:

• Send notifications to:
  • Organizers
  • Hackers
  • Judges
  • Sponsors
  • A combination of the above four
    There should be a check prior to sending the notification, including:
• Asking organizers if they are certain they want to send the notification
• Confirming what users the notification will be sent to and how many users
• Displaying the notification, asking organizers to confirm the grammatical and logistical accuracy of the notification

This notification functionality will exist at the route /profile and be visible only to organizers.

Overview

Notifications currently do nothing when clicked.

Proposal

Clicking or tapping notifications should result in the site being opened.

Overview

An admin should have the ability to add events to the calendar.

Proposal

Add events to calendar functionality should be available to admins. Admins will give info about the event:

• Name
• Host(s)
• Date
• Time
• Location
• HackerPack link
• Description
• Event Type
  And the calendar event should show up automatically on the schedule.

Supplemental Information

The calendar populated with a few events should look like the prototype. Note the horizontal orientation of the event is dependent on the Event Type

What did you expect to happen?

Sponsor links should open in a new tab.

What happened?

Sponsor links currently redirect to the sponsor site in the same tab as HackPortal.

Scope

Core

What browsers are you seeing the problem on?

Firefox, Chrome, Safari, Microsoft Edge

Relevant log output

No response

Overview

The About section will have a general overview of the hackathon. Under this, there may also be an optional "Meet the Team" section with images, bios, and links to social media for the hackathon organizers.

Proposal

Add headers for the description and Meet the team sections.
Add a template for the hackathon description.
Add a template for how a team member card should look.

Supplemental Information

The About section should look like the prototype. The prototype does not include cards for the team. They should be made similar to the ones in #28 and #29:

Overview

The Mentor Center section in Hack Center is a place where hackers can view where mentors are located while the hackathon is in progress. If the hackathon has not yet begun, the section will not be shown.

Proposal

The Mentor Center has several key parts:

• A title, "Mentor Center" by default
• A description of where and how mentors may be found, along with any additional info
• Horizontally scrollable cards displaying:
  -The name of the mentoring room
  -Location of the mentoring room
  -What they are helping with

Supplemental Information

Attached is an example of what the Mentor Center section should look like.

Overview

Terraform is a tool that allows for easy DB setup.
Currently, Firebase setup must be done completely manually for HackPortal.

Proposal

Setting up Terraform will make DB setup quicker and less painless for organizers.

What did you expect to happen?

The text box should expand for longer text descriptions

What happened?

Text overflow occurred in the description.

Scope

Events

What browsers are you seeing the problem on?

No response

Relevant log output

No response

Overview

The keynote speaker's scrollbar is permanently visible regardless of whether there is an overflow.

What Needs to Change

Modify the overflow style to account for sufficiently wide viewports.

What did you expect to happen?

Dropdown arrows should face down when collapsed

What happened?

Dropdown arrows are facing u

p

Scope

Profile

What browsers are you seeing the problem on?

No response

Relevant log output

No response

Overview

Currently, only hacker applications are allowed, and this application is more used as a “HackPortal Registration” feature than a “Register for the Hackathon” one. This, in conjunction with customizable questions, will serve to render a separate registration form useless and further reduce the number of third-party apps an organizer needs to use.

Proposal

Separate applications should exist for hackers, mentors, and volunteers, with configurable questions for each application.

Supplemental Information

A good bit of refactoring will need to take place, namely because of the addition of two new user types - mentor and volunteer, with permissions currently the same as a hacker. Stats at a glance info will need to be kept separate.

What did you expect to happen?

Dashboard should be hidden when signed out

What happened?

Dashboard is visible when signed out

Scope

Profile

What browsers are you seeing the problem on?

No response

Relevant log output

No response

Overview

This feature will enable hackathon organizers to upload a picture or GIF as the background to the landing page.

Proposal

The ability to add a photo background needs to be added.

Supplemental Information

Current implementation:

Ideal implementation (example):

Overview

The current schedule page is not a reflection of the mockups in Figma. Redesign the schedule page so it is laid out in the same way as the mockups.

Proposal

The schedule page should have everything displayed in Figma.
There should also be an option to export the schedule (downloadable .ics file)

Overview

Currently, HackPortal has no footer in the home page. There should be a footer in the home page to indicate the end of the page.

Proposal

Create a footer.

Overview

Colors need to be changed for each component currently

What Needs to Change

Refactor code to pull color data from the config file.

Overview

A hacker must be able to check into the hackathon. This will be done using a user-specific QR code generated by HackPortal. Organizers must be able to check hackers into the event. The QR code should be time-sensitive. It should rotate every set amount of time for security reasons.

Proposal

Hacker Check-In:

• The hacker should be able to access their QR code by pressing a button
• The QR code should be unique to the hacker
• There should be a disclaimer stating that they should not let anyone access their code as they will not be able to get food or swag in that case
• On pressing the button, the hacker gets redirected to a page with their QR code
  Organizer side:
  -Organizers should have the option to check-in hackers, update food or give swag
• On check-in:
  • Organizer should be able to see verification that the hacker was successfully checked in
  • Upon scanning the hacker QR code, the backend should update the user status for check-in
  • On food updates:
    • Organizer should be able to view a list of dietary restrictions (if any) and see if the hacker has already gotten food
    • Organizer should be able to see if the scan was successful and the backend updated the hacker food status appropriately.
• On swag updates:
  - Organizer should be able to view the shirt size requested and see if the hacker has already gotten swag
  - Organizer should be able to see if the scan was successful and the backend updated the hacker swag status appropriately.
• They should be able to access a camera with the press of a button

This functionality will only be available when the user is signed in and will exist at the route /dashboard/scan-in. Hackers and Organizers should also be able to use this functionality for swag and food distribution.

Overview

Currently, the admin-side Stats at a Glance page displays the information of all users of HackPortal. This limits the information hackathon organizers have in regards to how many hackers got swag or food or what their demographics were, instead of anyone with an account or organizer info being added to the data.

Proposal

There should be options to include/disclude certain people's stats from showing up in the data.
The options should include Admin, Super Admin, Hacker (these are people who have checked in and are not admin), and all accounts.

Supplemental Information

Example of issue:
141 hackers checked in (no way to differentiate checked-in admins from hackers).

Organizers may want info on just hackers who have checked in, not everyone with an account. This is an example of the data being displayed for everyone with an account.

Overview

The Spotlight section in Hack Center is a place where hackers can view events that are happening now if the hackathon is in progress. If the hackathon has not yet begun, random events that may interest the user will be shown.

Proposal

The Spotlight section will have several key parts:

• A title, "Spotlight" by default,
• A description about the number of events happening at the time OR events the hacker may be interested in,
• A card displaying a quick summary of the event consisting of:
  -The event title,
  -The host(s),
  -The date,
  -The time,
  -Location,
  -And a link to the HackerPack
• The ability to scroll through cards

Supplemental Information

Attached is an example of what the Spotlight section should look like. Scrolling through events will be done by pressing the arrows.

Overview

A hacker should be able to ask questions directly to organizers. Organizers should have the ability to view a list of pending questions and claim questions and answer them.

Proposal

• A hacker should be able to do the following:
  • Submit a question to an organizer
  • Receive a response for the question
• An organizer should be able to:
  • View a list of pending questions
  • Claim questions to ensure other organizers aren’t answering the same question
  • Answer a question.

This application will exist at the route /questions and exist as a form. A hacker must be able to submit their question and receive a prompt indicating their question will be answered shortly.

Overview

The main page currently does not have space for a promo video and previous hackathon stats.

Proposal

Add space for the promo video and hackathon stats on the main event page under the Application links.

Supplemental Information

Prototype of how the promo video space and stats space under the links should look like:

Overview

The current navigation routes are structured in a way that anyone can view anything, even if they are not signed in.

What Needs to Change

The navbar should be organized as follows:

• Homepage/landing page (Should be the name/logo of the hackathon, visible to all)
• Dashboard (should only be visible when signed in)
  • HackCenter
  • Scan in
  • Ask a question / submit a report
• Schedule (visible to all)
• Hackerpack (visible to all)

Overview

The user should be able to view their profile picture in the App Header to access their profile page.

Proposal

• App Header Component
  • Top right corner should display rounded profile picture instead of 'profile'

Supplemental Information

• Conditional profile
  • App header displays rounded profile picture when user is signed in, 'sign-in' otherwise

Overview

A hacker should be able to view a detailed calendar for the hackathon. This calendar will be organized in calendar format (as shown in the wireframe), should be exportable by the end-user, and should contain details about each specific event.

Proposal

A calendar should include the following:

• A basic calendar view with:
  • Times
  • Vertical section dividers specifying event type, with events populating the intersection between their respective times and types
    • Default section dividers:
      • General Events
      • Technical Event
      • Skills Event
• An option to filter based on:
  Events
  Sponsors
  Tech Talks
  Workshops
  Socials
• Ability to scroll through dates and see past and future events
• Ability to click on an event and view more details about it, such as:
  • Name
  • Host
  • Date / Time
  • Location (Building/room number)
  • Virtual join link
  • HackerPack Link, if applicable
  • Description
  • Any announcements related to the event
  • Ability to save the event
• Calendar Timezone
  This application will exist at the route /schedule/index.tsx and exist as a dynamic page. A hacker should be able to view the events and an organizer should be able to add or remove events.

What did you expect to happen?

The section should not be visible at all.

What happened?

Currently, a section with empty data shows up as a gray bar with no content.

Scope

Core

What browsers are you seeing the problem on?

No response

Relevant log output

No response

Overview

Super admins currently have the ability to search for a user and update their user type, but that is it. Adding the ability to view details about an individual user will increase the amount of information available to the organizers.

Proposal

Add the ability to view all information about a user (registration info, scan info, etc.) when looking at their profile. This info should only be available to a super admin and reachable from the user dashboard.

Supplemental Information

This should be implemented in a way that minimizes database reads.

Overview

The landing page currently is a simple white page with some text and active buttons to redirect the user.

Proposal

The styling of the top of the landing page should be updated to match that of the prototype.

Supplemental Information

Current landing page design:

Proposed design:

Overview

The dropdown menu on mobile currently does redirect users to the page they selected but does not update with the name of the page.

Proposal

Fix the drop-down menu so it updates with the name of the page the user is on

Supplemental Information

After selecting Dashboard and being redirected to the page

After selecting About and being redirected to the page

Overview

On mobile, the Hackerpack sidebar text spacing is too compact, making it difficult to read and getting overlapped by the scroll bar.

Proposal

Spacing must be fixed for the sidebar to ensure text isn't being covered by the scroll bar.

Supplemental Information

Attached is an example of what the sidebar currently looks like on mobile.

Overview

The Saved Events section in Hack Center is a place where hackers can view events that they have saved or marked as being interesting from the schedule page.

Proposal

The Saved Events section will have several key parts:

• A title, "Saved Events" by default,
• A card displaying a quick summary of the event consisting of:
  
-The event title,
  -The time at which the event will take place
• The ability to un-save an event

Supplemental Information

The attached image is an example of what the Saved Events section should look like. Un-saving an event should be done by pressing/clicking the star icon next to the event.

Overview

Currently, the navigation menu has a solid grey circle next to the hackathon name as a placeholder. This should be easily replaceable with a logo of the hackathon by the hackathon organizers.

Proposal

There should be an easy way to add a hackathon logo to the event site.

Supplemental Information

Current implementation:

Ideal implementation (example):

Note: Navigation options should remain left aligned.

Overview

The Explore section should allow anyone to view what events and workshops will be taking place during the hackathon.

Proposal

Create an Explore section with cards that contain the name of the event, the host of the event, The date, time, location, and hackerpack information link. This section should exist under the keynote speaker spotlight.

Supplemental Information

The explore section should be horizontally scrollable and look like the prototype:

Overview

The Your Team section in Hack Center is a place where hackers can add team members and set a team name.

Proposal

The Your Team section has several parts:

• A title, "Your Team" by default,
• The team name
• Names of team members
• The ability to add team members
• The ability to create a team

Supplemental Information

This is an example of how the Your Team section would look if a team name is set but no members are added. Users should have the ability to add team members.

Overview

A hacker must be able to submit an application to register for hackathon. This application will include questions with biographical information that the portal will aggregate for organizers.

Proposal

A hacker application must include questions for the following:

• Basic bio info:
  • Name
  • Email
• Optional bio info:
  • Age
  • Gender
  • Race/ethnicity
• School info:
  • School name
  • Major/minor/course of study
• Hackathon experience:
  • Number of hackathons attended
  • Relative experience level building software
• Where they heard about the hackathon
  • Dropdown with items customizable by the organizers
• Hacker event info:
  • T-shirt size
  • Food allergies
  • Accessibility accommodations
• Sponsor info:
  • GitHub profile username
  • LinkedIn profile link
  • Personal website link
  • What companies they are interested in sending their resumes to
• Resume upload (optional)

This application will exist at the route /register and exist as a form. A hacker must be able to submit this application and receive an email confirmation of their responses.

What did you expect to happen?

There must be a check to see if a hacker has checked in before they can claim a swag or food item. If the hacker has already been checked in, they can claim the item successfully and the “Scan Claimed” notice will show up as normal. If they have not been checked in, there should be a notice stating that the user has not checked in, and the scan should fail.
There should also be a counter showing the number of failed scans that display in the Admin panel under “Stats at a Glance”

This feature (not including the counter) was implemented in the hackportal-hackutd fork of this repo. Refer to the downstream repository for implementation.

What happened?

A hacker should not be able to claim swag or food unless they have been checked in. An admin should not be giving food or swag to someone not checked in.

Scope

Check-in

What browsers are you seeing the problem on?

No response

Relevant log output

No response

Overview

The schedule page is for hackers to know what is happening at what time at a glance.
The calendar will be shown as a one-day schedule. The day block will be split into 24 parts horizontally, each for an hour, and into 3 pars vertically, each for a distinct type of event. There will be axis markers (hour markers and event type markers) that clearly communicate what each section is for.

Proposal

Embed a calendar into the page as a schedule.

Supplemental Information

The empty schedule should look like the prototype:

Overview

For every event, there should be a description card informing the user about the event.

Proposal

The card will be available to view after the user presses an event of interest on the schedule page. The description will contain the following:

• The name of the event
• Host(s)
• Date
• Time
• Location
• HackerPack link
• Description
• Save button
• Additional info

Supplemental Information

The card will be to the right of the schedule and under the date scroll buttons. It will look like the prototype:

Overview

Currently, information that should be under the homepage is scattered under various nav routes. This information must be moved to the homepage to enable site viewers to easily access the information.

What Needs to Change

The home page should be organized as follows:

• Landing screen
• Promo video and stats space
• About section
• Keynote speakers feature
• Explore section
• Challenges description section
• FAQ
• Sponsors
• Footer
  These sections should be hidden unless there is information to be displayed.

Supplemental Information

See Figma prototypes for organization and implementation

Overview

The hackathon event page should have a space for spotlighting keynote speakers with a picture of them, along with their names and a quick description.

Proposal

Add a keynote speaker spotlight section to the main page under the promo video space.

Supplemental Information

The keynote speaker section should look like the prototype and be under the promo video section:

Overview

All users should be able to view their profiles. Profiles will have a general overview of a user and allow them to update their profile.

Proposal

The user profile page will be accessible at /profile. It must include the following information:
General:

• Name
• Role
• University / Company
• Social Media
• Color group (for food/swag pickup)
• Profile picture (default is hackathon logo)
  Hacker:
  • Team
  • Team members
  • Interests

Organizer:
-
Sponsor:
-
In the future:

• Hackers and sponsors should get badges depending on the number of hackathons attended, sponsorship tier, years sponsored, workshop host, etc.

This functionality will only be available when the user is signed in and will exist at the route /profile. Profile Picture default is the hackathon logo. Users should be able to edit profile info.

What did you expect to happen?

The camera should scan the QR code on iOS devices. The camera will preferably scan in the browser itself, but can be scanned by launching the camera app if necessary.

What happened?

The Admin side QR code scanner freezes the camera immediately after the camera is started on iOS. This prevents the organizers from scanning QR codes on iOS devices. This issue persists across web browsers.

Scope

Check-in

What browsers are you seeing the problem on?

Firefox, Chrome, Safari, Microsoft Edge

Relevant log output

No response