hack4impact-calpoly / lumina Goto Github PK

Should look like mockups
https://www.figma.com/file/cN9xGpLOjwApmLoQXTgkqB/H4I%3A-Stand-Strong-%2B-RISE-Crisis-Line-Volunteer-Management-App?node-id=669%3A219
https://www.figma.com/file/cN9xGpLOjwApmLoQXTgkqB/H4I%3A-Stand-Strong-%2B-RISE-Crisis-Line-Volunteer-Management-App?node-id=669%3A274
https://www.figma.com/file/cN9xGpLOjwApmLoQXTgkqB/H4I%3A-Stand-Strong-%2B-RISE-Crisis-Line-Volunteer-Management-App?node-id=694%3A3279
https://www.figma.com/file/cN9xGpLOjwApmLoQXTgkqB/H4I%3A-Stand-Strong-%2B-RISE-Crisis-Line-Volunteer-Management-App?node-id=694%3A3362

Currently, schedule only has 1 color for shifts, and all types of volunteers are added up together (e.g. 2/2 for a full shift). There are 2 changes that will need to be made.

1. Color code based on type of volunteers. Instead of having 1 block of blue for a shift, we want many blocks of different colors for all shifts in one day.
   Primary - yellow
   Backup - green
   Accompaniment - pink
   2nd backup - blue
2. Add up number based on type of volunteers. Let's say there are 2 shifts on May 19th, 2021, each with a primary, a backup, and a 2nd backup. We want the schedule to display 3 blocks of yellow, green, and blue, each with #/2 volunteers.

• Does not need to display shift cards or announcement cards yet
• Create placeholder pages that "+ New" and "See all announcements" buttons navigate to
  https://www.figma.com/file/cN9xGpLOjwApmLoQXTgkqB/H4I%3A-Stand-Strong-%2B-RISE-Crisis-Line-Volunteer-Management-App?node-id=273%3A7797

If a shift doesn't have all roles filled, it the color of the shift should be red. Otherwise, it should be blue

For both the calendar and the directory, we need access to all users currently stored within Amplify. Currently the users shown are faked using faker.js but their layout and how the final result should look identical

This happens when user clicks "Submit" email on the Forgot Password page. You can use AWS Amplify for this!

The email should say something like
"Hi {firstname}
Here's your verification code to reset your email..."
It's up to you really :) as long as it looks nice and is easy to understand!

https://www.figma.com/file/cN9xGpLOjwApmLoQXTgkqB/H4I%3A-Stand-Strong-%2B-RISE-Crisis-Line-Volunteer-Management-App?node-id=344%3A5455
https://www.figma.com/file/cN9xGpLOjwApmLoQXTgkqB/H4I%3A-Stand-Strong-%2B-RISE-Crisis-Line-Volunteer-Management-App?node-id=344%3A5491

Reference: https://serverless-stack.com/chapters/handle-forgot-and-reset-password.html

FE: When user clicks "Change Password" on Profile Page, link them to Change Password Page.
https://www.figma.com/file/cN9xGpLOjwApmLoQXTgkqB/H4I%3A-Stand-Strong-%2B-RISE-Crisis-Line-Volunteer-Management-App?node-id=859%3A8609

BE: Add change password functionality, happens when user clicks "Submit" here: https://www.figma.com/file/cN9xGpLOjwApmLoQXTgkqB/H4I%3A-Stand-Strong-%2B-RISE-Crisis-Line-Volunteer-Management-App?node-id=273%3A7876
and "Save" here: https://www.figma.com/file/cN9xGpLOjwApmLoQXTgkqB/H4I%3A-Stand-Strong-%2B-RISE-Crisis-Line-Volunteer-Management-App?node-id=437%3A6160

Reference: https://docs.amplify.aws/lib/auth/manageusers/q/platform/js/#managing-user-attributes

• Create page
• No need to add the search function yet, the page only needs to display users' info
• Desktop & Mobile
  https://www.figma.com/file/cN9xGpLOjwApmLoQXTgkqB/H4I%3A-Stand-Strong-%2B-RISE-Crisis-Line-Volunteer-Management-App?node-id=361%3A5519

1. When you click "Read more", looks like mockup
   https://www.figma.com/file/cN9xGpLOjwApmLoQXTgkqB/H4I%3A-Stand-Strong-%2B-RISE-Crisis-Line-Volunteer-Management-App?node-id=694%3A3518
2. Unfortunately, there are no mockups for the editing part... but use your best judgment 👍
   Add an "edit" button to the page in the mockup above, at the top of page. Please coordinate with whoever's working on the "pin and delete announcement" task, as there will also be "delete" and "pin" buttons.
   On click, directs to this page (which Michelle is working on, so you might also want to coordinate with her)
   https://www.figma.com/file/cN9xGpLOjwApmLoQXTgkqB/H4I%3A-Stand-Strong-%2B-RISE-Crisis-Line-Volunteer-Management-App?node-id=694%3A3518

Should look good on both mobile and desktop.

• Create model for shifts in amplify
• When 'Create New Shift' is clicked, a new shift should be added
• Properties: start datetime (GMT-7), end datetime, primary (optional), backup (optional), accompaniment (optional), second backup (optional)
  The last 4 properties should be linked to the volunteers model (as displayed in Directory), but no need to do that yet. As long as you can add new shifts with properties onClick, it will be good!

Log in page has main components:

• email field
• password field
• submit button

Optional

• forgot password link
• create account link

Account Created Confirmation

• Create Page
• "Return to login" button navigates to log in page
  Design: https://www.figma.com/file/cN9xGpLOjwApmLoQXTgkqB/H4I%3A-Stand-Strong-%2B-RISE-Crisis-Line-Volunteer-Management-App?node-id=344%3A5514

Password Changed Confirmation

• Create page
• "Return to login" button navigates to log in page
  Design: https://www.figma.com/file/cN9xGpLOjwApmLoQXTgkqB/H4I%3A-Stand-Strong-%2B-RISE-Crisis-Line-Volunteer-Management-App?node-id=437%3A6182

Forgot Password Page 1: email

• Create Form
• Back arrow login button navigates to log in page
• Desktop & Mobile
  Design: https://www.figma.com/file/cN9xGpLOjwApmLoQXTgkqB/H4I%3A-Stand-Strong-%2B-RISE-Crisis-Line-Volunteer-Management-App?node-id=372%3A6548

Forgot Password Page 2: enter code

• Create Form
• Back arrow login button navigates to log in page
• Desktop & Mobile
  Design: https://www.figma.com/file/cN9xGpLOjwApmLoQXTgkqB/H4I%3A-Stand-Strong-%2B-RISE-Crisis-Line-Volunteer-Management-App?node-id=688%3A5953

Convert the current Sign up experience to be more mobile friendly.
This means:

• All buttons and fields are easily usable through a touch interface
• Everything on the page scales correctly
• Bringing up the virtual keyboard should not break or shift any components

This task is a lot more open ended than the others because we are relying on your best judgement on whether or not a specific change is mobile friendly, though please reach out if you're ever unsure about a certain change.

See: https://chakra-ui.com/docs/styled-system/responsive-styles

The default shifts should already be done for the current month, but it's not saved anywhere. Save these shifts into Amplify.

Install prettier package and enforce consistent styling across entire frontend

• Create the navbar on mobile view
• Each icon button navigates to respective pages (Dashboard, Calendar, Directory, Profile)
• Create a skeleton page (e.g. blank page with the word "Profile", up to you) if page has not been created
• Use react router
  Design: https://www.figma.com/file/cN9xGpLOjwApmLoQXTgkqB/H4I%3A-Stand-Strong-%2B-RISE-Crisis-Line-Volunteer-Management-App?node-id=273%3A8118

On sign-up/sign-in/password reset pages, hide the error messages in red (e.g. "Password is required") until a user has typed something and there is an error.

After a user signs up with the required information from the sign up form, create the user in Amplify and show them a temporary page that tells them to come back later after their account has been verified.

See: https://docs.amplify.aws/lib/auth/emailpassword/q/platform/js/#sign-up

EXTRA: Add relevant error messages when certain fields are given invalid data, i.e. "Invalid phone number", "Invalid email", "Email is already in use", etc.

Happens when user clicks sign out button in the navigation bar
Create sign out button component, when clicked, it goes back to log in page

https://www.figma.com/file/cN9xGpLOjwApmLoQXTgkqB/H4I%3A-Stand-Strong-%2B-RISE-Crisis-Line-Volunteer-Management-App?node-id=859%3A8654

Can use AWS Amplify pre-built UI components https://docs.amplify.aws/lib/auth/getting-started/q/platform/js/#option-1-use-pre-built-ui-components

• Add model for announcements in amplify
• When publish announcements is clicked, a new announcement should be added to model

A little bit of backend (amplify) and frontend task.
When a user signs up with an email that is already in the database, Auth.signUp would return UsernameExistsException error. Maybe mess around with the try/catch block in Signup.js, or add a const in isValidForm?

As long as the error is displayed (like how "Password and Confirm Password must be the same" is displayed), you'll be good!

No functionalities yet, just looks (replace placeholder)

https://www.figma.com/file/cN9xGpLOjwApmLoQXTgkqB/H4I%3A-Stand-Strong-%2B-RISE-Crisis-Line-Volunteer-Management-App?node-id=859%3A8143

Unfortunately, there are no mockups for this task.. but use your best judgment 👍

1. Add a "delete" button to the page in the mockup above, at the top of the page. Please coordinate with whoever's working on the "read more and edit" task, as there will also be an "edit" button.
2. Add a "pin" button, same as above.

Should look good on both mobile and desktop.

This page follows the Forgot Password Pages

• Create Form, validation (check passwords match)
• Back arrow login button navigates to log in page
• Desktop & Mobile
  Design: https://www.figma.com/file/cN9xGpLOjwApmLoQXTgkqB/H4I%3A-Stand-Strong-%2B-RISE-Crisis-Line-Volunteer-Management-App?node-id=688%3A5977

2 devs
Pending description

https://www.figma.com/file/cN9xGpLOjwApmLoQXTgkqB/H4I%3A-Stand-Strong-%2B-RISE-Crisis-Line-Volunteer-Management-App?node-id=669%3A69

Display appropriate info on the contact cards (directory page) and profile page, based on the data model "Users" deployed on Amplify.
A new contact card should be added when a new user is created (new sign up).
Populate the top of the Profile Page using the signed-in user's info.
https://www.figma.com/file/cN9xGpLOjwApmLoQXTgkqB/H4I%3A-Stand-Strong-%2B-RISE-Crisis-Line-Volunteer-Management-App?node-id=361%3A5519
https://www.figma.com/file/cN9xGpLOjwApmLoQXTgkqB/H4I%3A-Stand-Strong-%2B-RISE-Crisis-Line-Volunteer-Management-App?node-id=859%3A8609

2 devs

1. Create announcement content page
   Make body and title required fields.
   https://www.figma.com/file/cN9xGpLOjwApmLoQXTgkqB/H4I%3A-Stand-Strong-%2B-RISE-Crisis-Line-Volunteer-Management-App?node-id=669%3A219

2. Create review page that displays announcement
   https://www.figma.com/file/cN9xGpLOjwApmLoQXTgkqB/H4I%3A-Stand-Strong-%2B-RISE-Crisis-Line-Volunteer-Management-App?node-id=669%3A274

3. Display announcement cards on Dashboard. "Read more" button and "see all announcements" button.
   https://www.figma.com/file/cN9xGpLOjwApmLoQXTgkqB/H4I%3A-Stand-Strong-%2B-RISE-Crisis-Line-Volunteer-Management-App?node-id=273%3A7797

Convert the current Login experience to be more mobile friendly.
This means:

• All buttons and fields are easily usable through a touch interface
• Everything on the page scales correctly
• Bringing up the virtual keyboard should not break or shift any components

This task is a lot more open ended than the others because we are relying on your best judgement on whether or not a specific change is mobile friendly, though please reach out if you're ever unsure about a certain change.

See: https://chakra-ui.com/docs/styled-system/responsive-styles

• Switch out logo
• Change color scheme
• As long as everything is readable and pleasant to look at, you should be good!
• You could maybe look at their website as a resource https://luminaalliance.org/

Needs to look like mock-up.
https://www.figma.com/file/cN9xGpLOjwApmLoQXTgkqB/H4I%3A-Stand-Strong-%2B-RISE-Crisis-Line-Volunteer-Management-App?node-id=273%3A7839

Additionally, make "create new shift" button and page, should function the same way as the desktop version, and should look like mock-up
https://www.figma.com/file/cN9xGpLOjwApmLoQXTgkqB/H4I%3A-Stand-Strong-%2B-RISE-Crisis-Line-Volunteer-Management-App?node-id=669%3A69

2 devs

Happens when user clicks send on components/loginpage.login.jsx
Must only work with email.

References:
https://docs.amplify.aws/guides/authentication/email-only-authentication/q/platform/js/#client-side-integration
https://docs.amplify.aws/lib/auth/manageusers/q/platform/js/#managing-user-attributes

Unverified/verified user
Looks good on mobile and desktop

• Create form, check appropriate formatting (basic validation)
• Back arrow navigates to log in page
• Desktop & Mobile
  Design: https://www.figma.com/file/cN9xGpLOjwApmLoQXTgkqB/H4I%3A-Stand-Strong-%2B-RISE-Crisis-Line-Volunteer-Management-App?node-id=372%3A5950

When a user provides valid account credentials, sign the user in and redirect them to '/home'. This should also automatically support login persistence (user isn't logged out when they refresh the page).

See:
https://adhyan.space/user-authentication-amplify
https://docs.amplify.aws/lib/auth/emailpassword/q/platform/js/#sign-in
https://docs.amplify.aws/lib/auth/manageusers/q/platform/js/#retrieve-current-authenticated-user

EXTRA: Add relevant error messages when user doesn't provide valid credentials or unknown errors (i.e. "Invalid username/password", "There was an error signing you in, please try again", etc.)

• Create the form
• "Create new account" button navigates to sign up page
• Reactive (desktop & mobile
  Design: https://www.figma.com/file/cN9xGpLOjwApmLoQXTgkqB/H4I%3A-Stand-Strong-%2B-RISE-Crisis-Line-Volunteer-Management-App?node-id=364%3A2920

Currently I'm the only team member with experience on our new CSS framework, Chakra UI.

To assist other members with onboarding ASAP to Chakra UI, I'll include a section in the README on some basics about Chakra UI (i.e. what it is, what changes we have to make, what we can do, why it's beneficial vs raw CSS, etc.) and link some more resources on more advanced things that Chakra UI let us do (i.e. theme extension)

Create Profile Page.

The cards can have dummy text, we can add actual information when we work on the backend of this page later!

https://www.figma.com/file/cN9xGpLOjwApmLoQXTgkqB/H4I%3A-Stand-Strong-%2B-RISE-Crisis-Line-Volunteer-Management-App?node-id=859%3A8609

• Create user when "Register" button on sign up page is clicked
• Field include all input + isAdmin +isStaff
  Note:
  There are 3 types of users, Admin, Staff, and Volunteer. Staff and Volunteer are almost identical functionality-wise, except for shift sign up (will be discussed later).