hackforla / hackforla/CivicTechJobs
Develop new Qualifier (Skills Matrix) pages
- Dominant language
- TypeScript
- Stars
- 24
- Forks
- 27
- Avg merge
- 2m
- Merged PRs (30d)
- 1
Description
### 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
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:
- [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](https://drive.google.com/file/d/1Ux9yUAEs5q2dFoLDtxRaObdxB1RK08zK/view)
[CTJ Figma](https://www.figma.com/design/G5bOqhud6azbxyR9El9Ygp/Civic-Tech-Jobs)
[Resources](https://hackforla.github.io/CivicTechJobs/resources/)
[Database model](https://dbdiagram.io/d/hfla-civic-tech-jobs-671ad87097a66db9a333224e)
[CTJ : HfLA Skills and Experience Matrix - spreadsheet](https://docs.google.com/spreadsheets/d/1_sCd8Kc2Tlhe--8UJLkgyDoqyQw_eZxhie3QTOwTHrM)
Contributor guide
Assessment
This issue has not been assessed yet.