When using Pal Pilot, pet parents can manage basic pet information- including pet weight, age, vaccinations, medications, allergies, and upcoming appointments for their little pals!
This application allows for users to sign up and login (using JWT auth) to see and manage their own pets - without having access to view, manage or delete any information about other user's pets.
This project is part of a decoupled full stack application. The frontend code can be found HERE and is written using React, JavaScript, HTML, and CSS.
🙀 Take a look at Pal Pilot HERE
Original wireframing for the project was completed prior to development. The above screenshot details a basic design concept prior to project completion.
Upon first entering the app, users will be greeted with a landing page, allowing for signup and login via a left-hand navigation bar as well as providing some basic app information before getting started. After signing up and logging in, users experience a conditionally rendered navigation bar, allowing for access to a 'My Pets' page, 'Appointments' page, and 'Add Pet' page.
Hovering over the left navigation bar produces a larger navigation menu with more detailed route information.
Seeing your pet information is easy 😌 - simply navigate to the 'My Pets' page, which will produce a card for each of the pets you have added to your profile. Users can add a new pet by using the form on the 'Add Pet' page.
The pet cards feature a randomized pet photo along with your pet's name. If hovered over, the card 'flips' and shows basic pet information, including breed, age, and weight.
Clicking on each pet card will bring the user to a detailed view of the specified pet 🐈
In the screenshot above, you can see that this particular pet has no vaccines, medications, or allergies listed. Conveniently, the user can add this information right on the pet detail page! Along with adding this important information, the basic pet details (such as breed, age, and weight) can also be updated using the 'Update Pet' button.
To keep track of your pet's appointments, visit the Appointments page! 📆
This view allows the user to add new appointments and see any upcoming appointments they may have for their pets. Once the appointments have completed, users can also conveniently delete the appointment card by hitting the 'trash can' button 🗑
- Dog Park Vectors by Vecteezy
- Google Fonts: utilized 'League Spartan' and 'Libre Baskerville
- React Font Awesome Icons (more information here)
Although there are a number of features I'd like to implement in this project, here are a few pertinent additions:
- Ability to delete vaccines, medications, and allergies on pet detail page
- Functionality for updating appointments
- Functionality to associate appointments with specific pets
- Add functionality to notify the user of upcoming appointments for their pets (using email notification)