Create Bookings Page Skeleton

[stevem-zhou]

Description

• Your task is to work on the Bookings 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 bookings
• In this resources folder, create a new file called Bookings.js
• On this page, create a “Bookings” title on the top
• Create a button that says “Events”
  • This button will redirect to a place that shows all the booked events, but for now just console log “Booked events button has been pressed!”
• Create a button that says “Classes”
  • This button will redirect to a place that shows all the booked classes, but for now just console log “Booked classes button has been pressed!”
• Create a button that says “History”
  • This button will redirect to a place that shows all the passed booked classes and events, but for now just console log “Booked history button has been pressed!”
• On the same page, utilize ChakraUI modal component and make sure that the modal contains a section for title, description, and a “cancel” button
• When the page is complete, create a route /bookings 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:
  • Modal
  • 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 bookings page could be set up, ignore class 1 and class 2 boxes. just notice how there are an “events” “classes” “prev” on the top, but we will be replacing “prev” with “history”)
  
• 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 bookings page is set up
• Logged in user can reach it
• People that are not logged in, cannot reach it
• Should have 3 buttons: events, classes, history
• There is a modal, that when is opened up, it is rendering any type of event or class data

Resources

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