This is a submission for Weekend Challenge: Dog Days Edition
Pet-Wallet is a lightweight pet management application that allows users to add, edit, and remove their pets. The application stores pet information such as name, breed, weight, and other personal details, while also allowing users to track daily care tasks and medications for each pet.
I also integrated AI to help users collect pet information. The application can read a document containing pet data and use that information to assist with creating a new pet profile.
This project was an opportunity for me to experiment with my recent development skills, participate in one of my first coding challenges, and now make my first post in the DEV.to Community.
Pet Wallet is a pet care dashboard built with Angular that helps owners manage their pets, medication schedules, and daily care tasks in one place.
This application lets users:
Install dependencies:
With the goal of keeping this experiment lightweight, Pet-Wallet is a front-end-only application built with Angular 20. I enjoy working with Angular because of its use of TypeScript, reusable components, and the ability to use a centralized Pet Service to manage our pet data and state.
The application is deployed using GitHub Pages, with GitHub Actions handling the deployment process automatically whenever changes are pushed to the main branch.
The final technology I wanted to experiment with was Google Gemini. I integrated Gemini to read PDF documents containing pet information and use that information to assist with creating a new pet profile.
This is where things get a little more interesting. Because I wanted to keep Pet-Wallet as a lightweight, front-end-only experiment, the Gemini API request has to happen from the browser. That means I couldn't safely include my own API key in the application or public repository.
Instead, I added a workflow where the user provides their own Gemini API key when they want to use the AI import feature. This isn't an architecture I would recommend for a production application(in a real application), I would move the Gemini request behind a backend service so the API key could remain server-side. But for this challenge, it allowed me to experiment with the Gemini API without exposing my own credentials.
I'm definitely interested in hearing how others would approach this differently, so if you have suggestions for alternative solutions, I'd love to hear them in the comments!
Best Use of Google AI
Pet-Wallet uses Google Gemini to assist with creating new pet profiles. Users can provide a pet-information document, and Gemini reads the document and extracts relevant information that can then be used to populate the new pet form.
I chose this feature as a way to experiment with Google AI while making the process of creating a new pet profile easier for the user.