tritonse / ccidc-application-overhaul Goto Github PK

Set up the routes and types needed to submit the application to database

Build the Pathways Application base formate as a component so that we could use it for all 4 pathways.

Build the Login in page according to the figma designed by the designers.

For the signup link use the current website's existing signup location.

New revishion text about discover your ideal pathway

• Upload File Modals
• Congradulation modals

Set up the values such that inputs store the values within the contexts

The Step navigator when on the final step is now a submit button

Implement the 3 remainig modals

• requirements not met
• Complete In One Sitting
• Confirm Submission

Feel free to make an widely used component or look or change the congradulation modal.

Create a context to hold all information collected across the different steps so that it can be accessed at the time to submit the application

• https://github.com/TritonSE/YSC-Mobile-Application/blob/main/mobile/src/contexts/UserContext.tsx
  • Example of a Context storing information
• https://github.com/TritonSE/YSC-Mobile-Application/blob/main/mobile/src/contexts/AuthContext.tsx
  • This is another context but line 68 sets the entirety of the context's values which may not happen in ourcase
  • This context also contains functions that can be called for example login used here

Same for all paths

https://www.figma.com/file/cvxkabfqRGSE6t4S1lhiYM/CCIDC-Design-Work?type=design&node-id=1548%3A19534&mode=dev

Add favicon to the website code

• Set up the backend infrastrcutre
• Basic CRUD Routes.

The current custom dropdown is not keyboards interactable.

Make it such that you can intereact with it using the keyboards.

Resources:
https://medium.com/lego-engineering/building-accessible-select-component-in-react-b61dbdf5122f

• Implement the recaptcha for the longin page

Connect input field values to context and update the context type if necessary.

Connect to the SQL backend and create backend touch point for the frontend to send the form data over

• the logic for the prescreening is not all encompassing.

Store the path number into local storage. This way we don't need different url for different paths and with local storage and the user won't need to redo the prescreening

Same For all Pathways

https://www.figma.com/file/cvxkabfqRGSE6t4S1lhiYM/CCIDC-Design-Work?node-id=1548%3A18656&mode=dev

• Search bar and Shopping Cart functionality
• Hover effect of nav bar like original Website
• Hamburger Menu for the website.

Step 5 is redesigned to the end of step 4

• Update Step 4
• Update the progress bar component

Set up the Schema for the database

• Build the Navigation bar based on the figma design
• **New: ** Do the condensed/hamburger menu version of nav bar

• Remeber to display the payment amount according to the Path

• Accent-color should be able to be used to change the color of the radio button.
• This way we can also then use attribute required for enforce required form elements.
• Visibility: hidden; prevents the required checking from appearing on the form.

Implement the footer for the page

Remove Step 5 in the timeline progress component.
update the navbar with the shopping cart link
Remove the search button from the nave

• Create a component for the pathway progress timeline bar
• Can use state to store which progress in time line you are at
• Make sure the Header is variable so we could use it across all pathways

• Create Auth Context and Login Context
  • Either use Context or redux state
• Log in feature
• Log out feature
• Conditionally display navbar based on login state
  • shopping cart only when logged in
  • log out button when logged in

the context
How it can be used in login
How to conditionally render screens

Build the form in personal information as a component that could be used across all pathways.

Change the form so that the values are stored into the contexts

Connect step 4 fields to the context

• Build the following page designed in the figma

https://www.figma.com/file/cvxkabfqRGSE6t4S1lhiYM/CCIDC-Design-Work?type=design&node-id=1548-18442&mode=design&t=rQv9WBSKsbVOxUxt-0

Path 3 and Path 4 differs