Create Profile Page Skeleton

[stevem-zhou]

Description

• Your task is to work on the Profile Page. You will be working on a skeleton version of the page, you don't have to worry about styling since this is purely just a skeleton.

READ ALL INSTRUCTIONS BEFORE STARTING

• Note:
  • When working on the frontend, we want to work from making sure the site is responsive starting from a mobile device (this will make it easier when we modifying the styling for bigger screens)
  • When checking how the frontend looks on a mobile device through chrome's inspect element, be sure to select iPhone SE for test!!!

Instructions

• Heads up:
  • Feel free to utilize client/src/components/playground/Playground.jsx to test out anything before putting it in their respective pages, or if there currently is no respective page
  • When prompted to log in, you can sign in with the account:
    • email: [email protected]
    • password: 123456
• Within client/src/components create a new folder called profile
• In this profile folder, create a new file called Profile.js
• Utilize the currentUser from useAuthContext to get information from the logged in user look at the example from Dashboard.tsx
• Display all the user information on the profile page
• Some data may be missing from the currentUser currently such as profile picture
  if there is anything missing just hardcode it for now
• Afterwards, create two buttons for donation and settings
  • the donation button will redirect to a link can just put in the ctc website for now
  • the settings button will eventually open up a modal, but we will wait on design to make sure that is what we want. UNTIL then just console log “Settings opened!”
• When the page is complete, create a route /profile in App.tsx (this step could be done earlier to allow testing to go smoothly, in particular once you create the component and have exported it)
• When working on this page utilize ChakraUI components such as:
  • Input
  • Button
  • Flex
  • You may need to use more than the specified Chakra components, feel free to look around to see if there is anything else that might be useful

Notes

• (an example of how the profile page could be set up)
  
• You will need to be logged in when you work on this page, which is why to start you should probably create the Page component that has nothing in it or some text and then export it so you can create a route to it
• Reference the already created pages such as Dashboard
• You can also reference the USER FLOW which has been given to us by the design team
• This can be used as an example to what you will be trying to create, it does not need to have any crazy styling

Acceptance Criteria

• The profile page is set up
• Logged in user can reach it
• People that are not logged in, cannot reach it
• Should display current user information
• Should have a display button and a settings button

Resources

• ChakraUI Docs
• User Flow
• Project Architecture
• DB Model