Catlog App Development Journal - #2 MVP Structure & Functionality

·

3 min read

Phase II (as of 9/30/2022)

Current Structure and Functionality:

Home Page:

  • Login
  • Register
  • Cuteness Express: doesn't require login, anyone can see all cats that need a home Screen Shot Home Page

All Cats Page:

  • navbar: hamburger menu on small screens
  • Cat Profile Cards:
    • 1 column on small screens, 2 columns on medium and large screens
    • Cats ordered by "urgent" status and "needs home by" dates

Screen Shot All Cats Page on Medium & Large Screen

Screen Shot All Cats Page on Small Screen

User Profile Page

  • navbar
  • User Profile: currently not editable, will add edit functionality soon
  • Foster Cats:
    • All cats fostered by this user, sorted by NOT "archived", "urgent" status and "needs home by" dates
    • Each cat photo links to the Cat's detailed info and logs
    • Archive/Reactive button toggles the status of the cat profile: if archived, the cat will not be displayed on the All Cats Page
    • Edit links to Edit Cat form
  • Add A Cat: links to Add Cat form
  • View All Cats: links to All Cats Page

Screen Shot User Profile Page on Small Screen

Screen Shot User Profile Page on Medium & Large Screen

Add Cat Page

  • If 'urgent', a datepicker will appear for the user to select a "needs home by" date
  • If 'urgent', but no date selected, the server will treat it as non-urgent Screen Shot Add Cat Page

Edit Cat Page

  • Input values reflect current info stored in the database Screen Shot Edit Cat Page

Cat Page

  • Cat profile
  • Edit Cat button
  • Archive/Reactive button
  • Cat logs:
    • If the current user is this cat's volunteer:
      • Add New Catlog button:
        • A datepicker (default is today's date, but can select a date in the past to backlog) and textarea will appear when clicked for the user to add a log, or cancel
      • Each log will have a Delete button

Screen Shot Cat Page with Add New Catlog Button and Delete Buttons

Screen Shot Cat Page with Add New Catlog Form (after clicking the Add New Catlog button)

  • If the current user is NOT this cat's volunteer:
    • only the logs are displayed, no option for adding or deleting logs Screen Shot Cat Page Logged in as Volunteer2 (not Xena's foster)

Summary:

  • Without login, anyyone can view all cats sorted by how urgently they need a home, their basic info, but have no access to cat logs.
  • Only volunteers that registered and logged in can view call cats' details and logs.
  • Volunteers can add a new cat, or edit, or archive a cat (after they are adopted or transferred to another foster home) they were fostering; once archived, the cat profile will stay on the volunteer's profile page, but removed from All Cats page.
  • Only the cat's foster can add a new catlog (for today or a day in the past), or delete a previous log.

Tools used:

  • Tailwindcss and DaisyUI
  • Minimal customized css and client-side JS for hamburger menu and toggles

Todo:

  • Volunteers should be able to edit their user profile
  • Think about how to 'transfer' a cat from one volunteer to another
  • Currently the dark mode only applies to the current page, if the user goes to another page, the default light theme will appear again--need to "remember" user's preference and automatically change the theme to the preferred one when opening a new page