hackforla / hackforla/CivicTechJobs

Develop new Qualifier (Skills Matrix) pages

Open
#665 10 comments 0 reactions 0 assignees View on GitHub
complexity: large javascript p-feature: Qualifier Page p-feature: Skills Matrix P1: Highest PBV: dev role: frontend size: 13pt+
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.