hackforla
Develop new Qualifier (Skills Matrix) pages
Overview
Updated the description of this issue to strikethrough any mention to Skills Matrix and/or Skills as this will no longer be a part of the Qualifier page for MVP 1.
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
- Develop qualifier pages
- Develop necessary components
- Develop qualifiers Context API
- Develop react-router functionality
- Clean up old irrelevant Qualifier page files
1. Develop qualifier pages - requirements:
- [x] Develop Step 1: Practice Area page
- [x] Develop Step 2: Skills Evaluation pages (skills matrix)
- [ ] Develop Step 3: Availability Page
- [x] 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:
- [x] Develop Stepper component
- [x] Develop Floating navbar component
3. Develop qualifiers Context API - requirements:
- [x] User should be able to use the floating navbar to navigate back and forth across the Qualifier pages without losing their form data
- [x] User should be able to use the floating navbar to navigate back and forth across the Skill Evaluation parts without losing their form data
- [x] 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: #508
- Once the qualifiers Context feature is done, we can close 508
4. Develop react-router functionality - requirements:
- [x] 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
- [x] 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
Relevant Figma designs
Three step Qualifier pages - located in "DEV HANDOFF" section:
Stepper component:
Floating Navbar component:
#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
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
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:
- PR's have been merged and Issues are up to date w/ checkbox markers
- Awaiting more designs for availability
-
-
Hi @bennyv8 @snigbehara @RSkuma,
@bennyv8 – thanks for your work on this! As Ryan and Snigdha may have mentioned, we’ve decided not to include the Skills Matrix in the MVP release of CTJ.
Since the remaining action item for this issue is the updated Qualifier Page design, I’ll move this issue to the Prioritized Backlog and strike through the reference to the Skills Matrix in the description above.
Once the Qualifier Page designs are ready, please use this issue to complete the remaining work.
Thanks again!