PetTrax is a full-stack web application conceived and executed collaboratively using agile development methods to build a pet tracker app that runs in a web browser from any computer or mobile device. PetTrax has a responsive mobile-first design and intuitive user interface that is simple to use and easily accessible on smaller screens.
Link to live site on Heroku: PetTrax Web App
As a Pet Owner,
I WANT a simple app to track my pet’s daily rhythms
SO THAT I can keep an accurate log of certain events
WHICH I can share with a vet in case of emergency
AND monitor my pets health and wellness.
This application follows the Model-View-Controller paradigm and ultilizes back-end technologies and front-end frameworks for the UI design and functionality. MySQL was used to store user data that is compiled into a daily log, which can be viewed, monitored, or shared with other users. The accuracy of the log is dependent on user input for three specific events: 
, 
, 
The date & time of each event is stored within the application and accessible for multiple user-sessions.
Node.js and Express.js create a RESTful API with (GET, PUT, POST, DELETE) routes called for logging, adding, and updating event data and adding new user login credentials. A Sequelize ORM (Object-Relational Mapping) protects API Keys and sensitive information with environment variables. The integration of Cloudinary's Javascript SDK provided the additional functionality required for uploading profile photos for deployment on Heroku: Cloud Application Platform.
To start using PetTrax, please visit the deployed application on Heroku from a computer or mobile device:
Click here, PetTrax Web App
Login email: fakeperson@gmail.com
Login pass: 12345678
Please visit our GitHub Repository to fork and clone this application: PetTrax Repository
CD into the folder where you cloned your fork.
type npm i to download dependencies.
type npm run server to start the API.
Enjoy using PetTrax
- Lead developer, Cloudinary integration
- UX/UI designer, UML diagram, branding
- Developer, support, controllers
- Developer, support, views
Lucidchart UML diagram for relationship visualization and ORM mapping.
Adobe Photoshop design and Layout
Node.js asynchronous event-driven runtime environment and Express.js framework to create a RESTful API.
Bootstrap CSS Front-End Framework
express-handlebars package to implement Handlebars.js for Views.
Sequelize packages to connect to a MySQL database for Models, and create an Express.js API for Controllers.
dotenv package to use environment variables.
bcrypt package to hash passwords.
express-session and connect-session-sequelize packages to add authentication.
Cloudinary image and video API provides cloud-storage to store profile photos
The following screenshots demonstrate the application functionality:
