Frontend Specifications

Overview:

Since the primary use for this app will be on the main page, the login/signup page will only contain information the inspiration for the App and the logic for signing up/logging in. Both the sign up and log in flows lead to the main page, which will contain the bulk of the logic and user interface functions.

Login Page:

A mockup I made to help plan out the arrangement of page elements. Reflects the simple nature of this page:

Sign Up Modal:

UI Actions:

1. Log In – sends the given username and password to the server, which responds with the main page prepped for the home associated with the given info.
2. Sign up – triggers a sign up modal to have the user fill out a form that gathers the necessary data to create a new home

Main Page:

This page took quite a bit more planning as my goal was a simple layout that expands as the user enters more information. The selected pet information is hidden until the user selects a pet to view and I used modals to compartmentalize adding a new pet to a home and creating a new feeding event for the users pets.

Main page modals:

UI Actions:

1. Add Pet – Sends the given information about a pet from the New Pet Modal to the server, updates the currently logged into home with the new pet, and finally updates the page with the new information.
2. Add Event – Sends the given information about a new meal/treat event, updates the currently logged into home with the new event, and finally updates the page with the new information.
3. Update the Selected Pet Information – Clicking on a pet will bring up detailed information about it. This will be generated by logic in the frontend.
4. Display Graphs – The user will be able to view graphs based on information from the pets tracked by the current home and pet food information stored in the Food Item database. The graphs using information from the current home will be created by frontend logic and the graphs based on Food Items will be generated by the backed and served to the frontend.

Tools, Libraries, Services:

A list I made of the tools I'd need to compile and source to develop this full-stack app.