Your complete Pet Care Solution
Please note: The app goes into "sleep" (idle) mode to conserve resources when inactive.
If you're the first visitor in a while, the first launch may take a few extra seconds to load, but subsequent launches will be much quicker! ⚡
Add a Pet: Feel free to copy & paste one of the lines below into the image field of the new pet form, to have the newly-added pet display with a photo! 🖼️
images/bunny.jpg
images/chihuahua.jpg
images/finch.jpg
images/hamster.jpg
images/betta-fish.jpg
images/angora.jpg
images/cat.jpg
images/chocolate_lab.jpg
images/collie.jpg
images/dachshund.jpg
images/dog.jpg
images/frog.jpg
images/parakeet.jpg
images/shepherd.jpg
images/shire_horse.jpg
images/tabby_cat.jpg
images/tortoise.jpg
Example:
PawTrackr is a full stack app that enables pet owners to track all their pets' info in a central place
😼 Has your cat ever lied to you about if they've been fed yet or not?
🐶 How does everybody in the house know if the dog’s been walked yet?
🤔 Even with a trusted pet sitter, do you worry about your pets getting their medication on time when you're out of town?
🤩 We've built you the solution!
🐾 Welcome to PawTrackr
Demo_Video.mp4
Screen_Reader_Video.mp4
This project was created, designed, and built by:
for our Final Project at Lighthouse Labs
While working to build this project to successful completion, we:
- Built an application from start to finish using a tech stack of our choosing
- Designed and architected a complete application
- Leveraged all of the skills and knowledge learned to date
- Created functional requirements, user stories, ERD, and wireframes
- Deployed the application to the cloud as a Stretch Goal Achievement
- Worked efficiently as a team
- Leveraged code sharing and carried out code reviews
- Collaborated effectively to deliver a product by the deadline
- Built a complete Project to add to our portfolio
- Rapidly acquired and applied new skills to enhance our final product:
- React-Bootstrap, React-Calendar, Pagination, Light/Dark Theme changing, and Drag & Drop functionality
Inclusive design is an ongoing process that belongs at the heart of software creation. We are eager to keep learning and growing our ability to build accessible digital solutions.
Here are some resources and techniques that have helped us so far:
- Google Lighthouse Accessibility Report: contains an accessibility score and provides actionable feedback on issues detected
- axe DevTools browser extension: provides an automated accessibility audit and details on how to resolve problems
- Manual Testing - Keyboard Checks: setting aside the mouse, we navigated our own app using only a keyboard
- NVDA Screen Reader: we used a screenreader on our own app, to ensure that navigation waypoints were detected and read out loud
With gratitude to the creators of the above tools, and the Chrome for Developers team for their A11ycasts series.
- Logins for various household members
- Reminder SMS/Email alerts
- Multiple pet photos
- Pet health history tracking (weight, immunization dates)
- Mobile-friendly views
- Improve accessible design functionality
- Unit, Component, and E2E testing
- React
- React-Bootstrap
- React-Beautiful-DnD
- React-Calendar
- Express
- Node.js
- Node-Postgres
- Babel
- Body-Parser
- Axios
- Morgan
- Dotenv
For larger-scale production-ready applications with enhanced customization, React's official documentation and best practices now recommend other ways to Start a New React Project
Since this was a project for educational purposes, it has been bootstrapped with Create React App which provided a straightforward way to get a functional React app up and running quickly.
- Fork this repository to your own GitHub account
- Clone your fork to your local device
- From within the project root folder, install all dependencies with
npm i(ornpm install), in the/frontendand/backendfolders
- In a terminal window, connect to your PostgreSQL environment using the
psqlcommand and your login credentials- In some environments, the
startpostgrescommand may need to be run beforehand
- In some environments, the
- Create a new database using the
CREATE DATABASE pawtrackr;command, where 'pawtrackr' is the name you want to call this new DB - Connect to the new database with the
\c pawtrackrcommand, where 'pawtrackr' is whichever name you chose for your new DB in the the previous step
- Within
psql, set up database tables by running the migrations file with\i backend/src/db/schema/create.sql. - To verify the tables have been created, run command
\dtand you should see tables named:users,pets,reminders, andcontacts.
- Within
psql, run the seed file with\i backend/src/db/schema/seeds.sql. - To confirm that your tables have been populated with data, run command
SELECT * FROM users;(or any of the table names) and you should see some data displayed. - You can now exit postgres by typing
\qto return to your command line.
- Using the provided
.env.examplefile as a template, create a new.envfile in the same folder. - Add your database name, username, and password.
- Note: If running the app locally, the
DB_HOSTwould belocalhost, and for PostgreSQL theDB_PORTwill usually be5432. - For security reasons, the
.envfile has been added to the.gitignorefile, so these sensitive details will not accidentally be published to GitHub.
- Connect to the database server from the root folder by using the
psqlcommand and your database credentials - Start the backend by running the
npm startcommand from within the/backendfolder. The API server will run on Port 8080 - Start the frontend side using the
npm startcommand from within the/frontendfolder. The client will run on Port 3000 - Navigate to http://localhost:3000 in your browser
Photos provided by Pexels