Develop new Qualifier (Skills Matrix) pages

[LoTerence]

Overview

As a new volunteer to Hack for LA, I should be able to complete a 3-part questionnaire about my Community of Practice, skills, and weekly availability, so that I can be better matched to potential HFLA project opportunities.

Context

We just received finalized qualifier page designs from the CTJ design team. As developers, we need to implement them in the frontend of our application.

• Figma link: https://www.figma.com/design/G5bOqhud6azbxyR9El9Ygp/Civic-Tech-Jobs?node-id=1-26&p=f&t=fm3n6sLSmuR61d2W-0
• The figma designs are located in DEV HANDOFF -> Qualifier Page, under "3 steps: Practice area, Skills evaluation, Availability".

What are qualifier pages?

• The qualifer pages are essentially a giant multi-page form that collects the user's practice area (design, product, developer, etc), skills, and weekly availability data.
• A prospective volunteer will complete this form when they are first onboarding onto Hack for LA
• Once the form is completed, the user will be directed to a volunteer opportunities search result page, pre-populated with projects and opportunities that best match their skillset and availability.

Action Items

Overall objective: Develop new Qualifier (skills matrix) pages based off the new Figma designs

1. Develop qualifier pages
2. Develop necessary components
3. Develop qualifiers Context API
4. Develop react-router functionality
5. Clean up old irrelevant Qualifier page files

1. Develop qualifier pages - requirements:

• Develop Step 1: Practice Area page
• Develop Step 2: Skills Evaluation pages (skills matrix)
• Develop Step 3: Availability Page
• Create mock questionnaire data for at least one practice area

We can do this later:

• Develop Skill Eval page's Error state

2. Develop necessary components - requirements:

• Develop Stepper component
• Develop Floating navbar component

3. Develop qualifiers Context API - requirements:

• User should be able to use the floating navbar to navigate back and forth across the Qualifier pages without losing their form data
• User should be able to use the floating navbar to navigate back and forth across the Skill Evaluation parts without losing their form data
• This data should be stored and accessed within a React Context API scoped specifically for the Qualifier pages

This form data will eventually be submitted to the server as JSON when the user clicks the "Continue" button at the end of the last step (availability page).

• Related issue: Create React Context for Qualifier 2 Page #508
• Once the qualifiers Context feature is done, we can close 508

4. Develop react-router functionality - requirements:

• React-router: user should be able to use the floating navbar to navigate back and forth across the three qualifier step pages without losing their history
• User should be able to use the floating navbar to navigate back and forth across the various Skill Evaluation parts/pages without losing their history. There could be up to 5 parts here.

5. Clean up

There are old qualifier page files based on old designs that will no longer be used. These should be deleted / refactored away in the final PR:

• old practice area page
• old qualifier context file
• etc.

Resources/Instructions

End to end flow from dev perspective
CTJ Figma
Resources
Database model
CTJ : HfLA Skills and Experience Matrix - spreadsheet

[LoTerence]

Relevant Figma designs

Three step Qualifier pages - located in "DEV HANDOFF" section:

Stepper component:

Floating Navbar component:

[LoTerence]

#660

• This PR should cover most of objective 1: Develop qualifier pages
• and also the first requirement of objective 2: Develop Stepper component

Once its merged, I will check them off

[LoTerence]

More resources:

• List of Skills for each Community of Practice: https://docs.google.com/spreadsheets/d/1_sCd8Kc2Tlhe--8UJLkgyDoqyQw_eZxhie3QTOwTHrM/edit?gid=1739253474#gid=1739253474
• Engineering Skills Matrix - https://docs.google.com/spreadsheets/d/19Gdb5_giEf4ShqfzoKCNLQ2Rv9M1DyWt7W1SCeZRdrA/edit?gid=143748660#gid=143748660

[LoTerence]

Update from 04/01/2025 CTJ Leads meeting: Hold off on development of Chips Selection page + functionality until design is explicitly approved by Bonnie. Bonnie might not approve of this feature.

Chips Selection Page:

[kcoronel]

@bennyv8 Please provide update

1. Progress

2. Blockers

3. Availability

4. ETA