Overview

The Baby Book is where Caregivers can upload photos of babies so that MBB can print these photos to give them to the mothers in prison. These page has both mobile and desktop views for Caregivers, and desktop views for Admins to see the album. This ticket includes the modal to view one photo and its description, and introduction pages for the Caregiver views.

Link to Figma: https://www.figma.com/design/1eq6iy7h2Cd7rYTxPB4s5P/Motherhood-Beyond-Bars-%2F-Spr2022-(Copy)?node-id=6212-1439&node-type=CANVAS&t=IzQT02xW96dasVs1-0

Requirements

• Intro pages for Caregivers with both mobile and desktop views including: Start Baby Book page, No Photos page, No Access page, and Current Baby Books page
  • For Current Baby Books page, each card should be clickable with a link, but the actual link it goes to will be added later
• Create modal to view baby photo with description, it should take in an image and a description. This is already implemented in the Admin view so see components/BabyBook/PictureModal for reference. You can reuse this modal if it has been made well, but it might be easier to start over to ensure everything is mobile friendly
  • After creating the modal for viewing the baby photo, update the modal to have an Edit mode where a textbox and the Replace Image button appear so that the photo can be edited
  • Update the photo using a backend endpoint (endpoint in progress)
  • For replace image button, use backend endpoint (endpoint in progress)
  • Create toast component for when the photo is successfully edited

Important Information

• Make pages for mobile first, then extend them to Desktop
  • Use Tailwind's reactive design breakpoints to style for both mobile and web: https://tailwindcss.com/docs/responsive-design
• Use DevTools to resize the screen for different screen sizes including tablets both vertically and horizontally
• Test this on your phone, it's important for making sure the keyboard doesn't cover anything and native components look alright!

Testing on Phone

Run the program on your computer using npm run dev, then on your phone on different common browsers (Google Chrome, Firefox, and Safari if iPhone), go to https://[your IP address]:[port (probably 3000)]/page. Example: https://123.45.67.89:3000/login. Make sure both your phone and laptop are connected to the same WiFi.

How to find your computer's IP Address:

• Windows: ipconfig then scroll to Wireless LAN adapter Wi-Fi -> IPv4 Address
• Mac: ipconfig getifaddr en0

Don't hesitate to Slack me if you need any help or have any questions :D We can message or jump into a Huddle meeting as needed!