catlady

Overview

A React application created with the MERN stack, catlady helps pet owners manage and track the caloric intake of their pets' diets and other nutritional details.

For the health of our pets, it is important to keep track of what they eat. Maintaining a healthy weight can become complicated fast when you have multiple pets who all have different needs. catlady is here to help!

• Add your pet’s stats to create a personalized meal plan based on your food choice
• Add and track multiple pets at once
• Create a diet plan with the food you already have: No special diet food required!
• Check out new food options in our pet food cloud database

Add and Remove a Pet

Adding and Selecting a Pet Food

Searching through the Pet Foods

Development Process

The UI/UX was devised envisioning a user who may have multiple pets all requiring different diets. We decided then that the dashboard would first show all the different pets a user has in order to best select pet foods to match each pets' individual needs. The focus was on first allowing users to create a "pet" with minimal information required, and keeping the pets separate from the pet foods, so that the user has full autonomy in mixing and matching the most appropriate pet foods for each pet at any time.

We chose to use a NoSQL database due to the varied data ascribed to each pet to stay in line with the goal of the application of making custom diets for different pets.

Technologies Used

• HTML/CSS
• Javascript ES6
• React
• React-Bootstrap
• Node.js
• Express.js
• axios
• REST APIs
• Passport user authentication
• React-Toastify
• Chart.js 2
• MongoDB
• Mongoose
• Robo 3T
• mLab
• Heroku
• Kanban
• ESLint

Future Improvements

• more animal types
• include Pet photo in their "profile" page
• user can upload unique pet picture
• associate a Pet Food with a Pet and display food name on Pet's card
• choose a pet food for a specific pet directly from the search table
• allow users to login via Facebook, Google, etc with OAuth via Passport strategy
• share pets' diet and charts on social media

Links

• Application

Meet The Team

• Brian Farmer MERN stack, MVC paradigm, Chart.js 2
• Emily Gaska App concept, MERN stack, UX, logic
• Jonathan Alpart MERN stack, cloud database, React-Toastify

See contributions