Overview:
This needs to be a stylized, step-based form that users fill out when first creating their account, or should come back to.
Requirements:
Use React Bootstrap and conform to the general style used in the rest of the project
Create a link to the from in src/Dashboard/UserDashboard.js
Create a progress indicator that shows progress through the form - display it underneath the questions.
Create a series of 4 steps
Current body info: asks users to input their height (give an in/cm option, default in, use a React Bootstrap Button Group), weight (give a lb/kg option, default lb, use a React Bootstrap Button Group), age, and biological sex (m/f only). Use a React Bootstrap Alert to display an onscreen error with the text "The plans Full Circle generates may need extra review!" with a ⚠ icon in the following circumstances: height < 58in, weight < 100lb OR weight > 350lb, age < 18 OR age > 80. Do not allow the user to move on if any of the fields are blank. Use useState() to store this in an object called BioInfo of the format
{
"height": int
"heightUnit": string
"weight": int
"weightUnit": string
"age": int
"sex": char
}
Lifestyle: use a horizontal slider for user to indicate their activity level. This should be broken into 5 break points - "Sedentary", "Low-Stress", "Moderate", "Active", "Extremely Active". Include a dropdown with the option to indicate between "I would spend more time cooking in order to add variety to my meals" and "I would eat more repetitive meals in order to spend less time cooking". Use useState() to store this in an object called LifestyleInfo of the format
{
"activity": int 1-5
"variety": boolean
}
Goals: use a horizontal slider for user to indicate their goals. This should be broken into 7 break points - "Lose weight quickly", "Lose some weight", "Lose a bit of weight", "Maintain my weight", "Gain a bit of weight", "Gain some weight", "Gain weight quickly" (default Maintain my weight). Use a dropdown to ask "How much protein are you comfortable consuming?" with options "Balanced", "Moderate", and "Athletic" (no default). In an "advanced options" section that must be expanded by the user to view, use a dropdown to ask "Would you prefer more carbohydrates or fats in your diet?" with options "Zero carbs", "Fewer carbs", "Balanced amount", and "Fewer fats". Use useState() to store this in an object called GoalsInfo of the format
{
"goal": int -3 to 3
"protein": int 1 to 3
"macroBalance": int 0-4
}
Review screen! Summarize all the information put above in a good-looking way. Use your creativity and make it look as nice as you can, with principles of responsive design - it should look good on phone. The other screens should look nice as well, but I'm not going to finalize their UI quite yet - this should look how it will in production. Display the information grouped into three sections, each with a pencil edit button (look for examples using the file in public/images/edit.png). When the edit button is clicked, direct the user to the previous steps. At the bottom right of this screen, add a large "SUBMIT" button. Direct the user to the user dashboard
dillonshipley
commented
1 month ago
Overview: This needs to be a stylized, step-based form that users fill out when first creating their account, or should come back to.
Requirements:
Current body info: asks users to input their height (give an in/cm option, default in, use a React Bootstrap Button Group), weight (give a lb/kg option, default lb, use a React Bootstrap Button Group), age, and biological sex (m/f only). Use a React Bootstrap Alert to display an onscreen error with the text "The plans Full Circle generates may need extra review!" with a ⚠ icon in the following circumstances: height < 58in, weight < 100lb OR weight > 350lb, age < 18 OR age > 80. Do not allow the user to move on if any of the fields are blank. Use useState() to store this in an object called BioInfo of the format { "height": int "heightUnit": string "weight": int "weightUnit": string "age": int "sex": char }
Lifestyle: use a horizontal slider for user to indicate their activity level. This should be broken into 5 break points - "Sedentary", "Low-Stress", "Moderate", "Active", "Extremely Active". Include a dropdown with the option to indicate between "I would spend more time cooking in order to add variety to my meals" and "I would eat more repetitive meals in order to spend less time cooking". Use useState() to store this in an object called LifestyleInfo of the format { "activity": int 1-5 "variety": boolean }
Goals: use a horizontal slider for user to indicate their goals. This should be broken into 7 break points - "Lose weight quickly", "Lose some weight", "Lose a bit of weight", "Maintain my weight", "Gain a bit of weight", "Gain some weight", "Gain weight quickly" (default Maintain my weight). Use a dropdown to ask "How much protein are you comfortable consuming?" with options "Balanced", "Moderate", and "Athletic" (no default). In an "advanced options" section that must be expanded by the user to view, use a dropdown to ask "Would you prefer more carbohydrates or fats in your diet?" with options "Zero carbs", "Fewer carbs", "Balanced amount", and "Fewer fats". Use useState() to store this in an object called GoalsInfo of the format { "goal": int -3 to 3 "protein": int 1 to 3 "macroBalance": int 0-4 }
Review screen! Summarize all the information put above in a good-looking way. Use your creativity and make it look as nice as you can, with principles of responsive design - it should look good on phone. The other screens should look nice as well, but I'm not going to finalize their UI quite yet - this should look how it will in production. Display the information grouped into three sections, each with a pencil edit button (look for examples using the file in public/images/edit.png). When the edit button is clicked, direct the user to the previous steps. At the bottom right of this screen, add a large "SUBMIT" button. Direct the user to the user dashboard