lumina's People
Forkers
madhav-asok-echo360lumina's Issues
[BE] Sign-in Functionality
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
Login
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
[FE] Read more and edit announcement
- 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 - 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.
[Admin] User privileges page
Unverified/verified user
Looks good on mobile and desktop
Create landing page
Grab list of all users from Amplify
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
Home page layout
Create new schema for shifts in Amplify
Authentication
[FE] Pin and delete announcement
Unfortunately, there are no mockups for this task.. but use your best judgment ๐
- 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.
- Add a "pin" button, same as above.
Should look good on both mobile and desktop.
[FE] Log In Page
- 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
Auto populate current month with default shifts
The default shifts should already be done for the current month, but it's not saved anywhere. Save these shifts into Amplify.
Create Navigation Bar (Mobile)
- 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
[FE] Add new announcement (mobile + desktop)
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
Directory
Create new Amplify user
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.
Prettier formatting and enforcement
Install prettier package and enforce consistent styling across entire frontend
[FE] Change Password Page
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
[FE] Create Shift Component & Display Shift on Calendar
[FE + BE] Change Password (Forgot + Reset)
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
[BE + FE] Display error user already exists on SignUp
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!
[FE] Create announcement
2 devs
-
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 -
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 -
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
[FE] Hide error messages until there is error
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.
[Documentation] Chakra UI
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)
[FE] Create calendar mobile
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
Send Verification Code Email
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
[Administrative] Verify Calendar need
[FE] Forgot Password Page(s)
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
[BE] Display info on Directory and Profile pages
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
Authenticate on login
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.)
Forgot password
Signup
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
[BE] Create Shift
- 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!
[FE] Sign Up Page
- 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
Update Calendar UI to show complete and incomplete shifts
If a shift doesn't have all roles filled, it the color of the shift should be red. Otherwise, it should be blue
Log In Page
Log in page has main components:
- email field
- password field
- submit button
Optional
- forgot password link
- create account link
[FE] Confirmation Pages
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
[Admin] Change user privileges
[FE] Sign out button
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
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
Logout
[FE] Dashboard Page
- 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
[FE] Directory Page
- 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
[FE] Profile Page
Create Profile Page.
The cards can have dummy text, we can add actual information when we work on the backend of this page later!
Profile
[FE] Change RISE to Lumina
- 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/
[All Devs] Setup Amplify CLI
[FE] Create Calendar View
No functionalities yet, just looks (replace placeholder)
[BE] Create user
- 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).
[FE] Color code schedule page
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.
- 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 - 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.
[BE] Create announcement
- Add model for announcements in amplify
- When publish announcements is clicked, a new announcement should be added to model
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.