Flatiron School: Javascript/Rails Project — Pet Diary Manager

In Module 4 of Flatiron’s Software Engineering program we moved on from using Rails’ Views to using Javascript to display user views instead. Javascript is used in almost every website you see, yet its quirks as a language and how it parses data can trip up many students, especially coming from a Ruby/Rails/SQL background.

For the fourth project, the goal was to create a SPA(Single Page Application) that had at least one has-many relationship and had a Rails API backend combined with a Javascript frontend. I originally intended to make a Pet Task Tracker, as I wanted to make a family application that would allow family members to record their actions and alert others of what has been done. No more wondering if a pet had been fed or walked on time! However, I scaled back my project to provide the MVP(Most Viable Project), and decided to do a simpler pet diary instead. A user can sign in, create a pet, and update its daily events.

Associations/ CRUD Actions

I had three models to my project; a User, a Pet, and a Task. A User has many pets, a Pet has many tasks, and a Task belongs to a pet. As for my CRUD actions, currently I have Create, Read, and Delete functionality. I hope to add Update functionality in a later time.

Using JSON

In order to get our data to manipulate for our JavaScript-created views, we must use JSON to render the data. This was slightly tricky as defining exactly what data I wanted to render proved a bit difficult. I wanted to have my Pet’s Tasks visible as an array of objects within the Pet object while viewing the User data, but the closest I could manipulate it to was to have two separate arrays of Pets and Tasks in the User object. However, with a method I was able to make sure I could construct Task objects from a User that were associated with the right Pet, which proved useful for the next part of DOM manipulation. Later I hope to play around with rendering the desired JSON in the first place to clean up the code.

Using JavaScript/Manipulating the DOM

I went with a simple interface for this project, starting with a basic User sign-in form that allowed a User to either sign up or sign in depending on if they had made an “account” or not. Afterwards, the User is shown a home page where they can create and view their pets on cards, and create and view their pets’ tasks or events instead.

I think the trickiest part I had with this is making sure I knew what HTML or object properties were on the page before trying to access it. For example, in different parts of the code execution certain HTML elements are made that can be referred to. However, depending on where you are in the code, they might not have been created by the moment you are at in the code execution. Also, as you are manipulating objects, clarifying what exactly “this” has access to was something I had to check over and over, as sometimes I would assume that “this” had access to a certain assigned property at that moment of the code and that was not always the case. Using Google’s Inspect, breakpoints, and console.log were all critical for troubleshooting my project as I went on.

Future Considerations

Here are some changes I would make to broaden the functionality of this project:

• Allow Users to sign up, sign in, and create a Family.
• Allow users associated with a Family to be able to view Pets and their related tasks.
• Allow a User to upload Pet photos and more Pet information (breed, weight, personality)
• Allow a Pet to filter associated Tasks by date and allow other Users to ‘complete’ a task and show who it was completed by and when.

You can view my project’s GitHub repo here.