Project Description:

The project specifications are designed to allow a programmer to demonstrate design skills associated with HTML and CSS and include interactive components that draw on data from a public API or locally hosted database.

Project Idea:

While the project is mainly about skill demonstration, I still wanted the final outcome to carry value and be aligned with my values. For this project, I was inspired by my wife’s Yoga Teacher Training (YTT) and my affinity for the practice of yoga.

The notion behind the practice of yoga is the growth that is associated with each individual session. Not only is this a premise of living life and gaining wisdom, but also in the practice of programming. It is important in learning to remember that the search for perfection is itself not a reasonable objective but rather to do one’s best each time the skill is needed and used.

Needed Skills

One of the main objectives I wanted was to deploy was a design that worked for a variety of devices. With that in mind, it was prudent to learn Bootstrap to ease the process of building responsive formatting.
In addition to design, I wanted to make and manage my own database of information. This would not only allow for the content to be tailored to my objective but would also allow me to fully understand how to use the data for my intended output.
With the user selecting from a set of known values, I needed to consider a user interface that allowed for selection from a list, rather than user input (which could lead to incorrect inputs and complications in searching the database).

Design With the End In Mind

When considering the skills above and the objective of the project, it is imperative to think about the final design and functionality will work together. With the application being web-based, I decided to think about it as a desktop website.

As this is my first project, I wanted to grant myself some grace with prioritizing functionality over responsive design.

In regard to the data analysis, filtering, and display; there are potentially an infinite number of ways to search and sort the yoga poses I selected for my database content. In order to manage the complexity, I decided to sort by four different data attributes for each pose; name, movement type, sequence, and favorited. This decision helped me consider how I would organize my page and display different types of information. Sorting by pose name would showcase information regarding that single pose; while sorting by movement type, sequence, and favorited would return a list of those poses that met that criteria. These different search types would help me compartmentalize my page into different sections.

With a plethora of poses, movement types, and sequences to choose from, the next challenge was to consider how to allow the user to see all of the options and select the desired choice. Displaying all of the options on the screen at the same time would create a very cluttered experience, as well as choices that might not be in line with the sort the user is seeking to make. Thus, the choice of drop-down menus that hid the individual choices until the menu was selected met the viewing and selection criteria. This way the user would only see options for sorting in a way that would provide the expected data output.

Setting Up the Database

The ability to create my own database ensured that I had only the information that I needed for each of the data searches and sorts. While additional information would not inhibit the final product, the ability to focus on only needed information made the database management and oversight much easier.

Image of Database Code — Code Image #1: First Two Poses of Created Database

In addition to only having needed information, I was also able to ensure that each pose (item in the database) had all of the needed information. This alleviated the need to have multiple lists of objects. As you see above, only having one list that included all of the needed information ensured that I only need to call one source location with my GET and PATCH requests.

In addition, having all data stored in the same way in one location, I could be sure that I was consistently using the most up-to-date information relative to the changes in favorited pose items and other sort changes that could be added in future iterations.

Search and Sort Data

Creating drop-down menu options - The created options for drop-down menus were handled differently (discussed more in enhancements and scalability). The drop-down for searching for a single pose was handled by a search algorithm, whereas the others (movement type and sequence) were manually created.

Code Image #2: Function for adding drop-down pose options from the database.

The code above shows the algorithm for creating the list of poses in the Search Pose drop-down menu. This process is more idea than the manual creation as it allows for the same code to be used with a more robust database or when more poses are added to the current database.

Displaying selected output - Using the provided search options within the drop-down menus (regardless of how they are populated) ensures that accurate data could be returned based on the user selection.

Code Image #3: Function for creating list of poses in a selected sequence.

The code above shows the search algorithm of all poses that returns a list of items that match would be found in the pose sequence selected by the user. This process is more effective than creating a manual list as not only is it fewer lines of code but also affords the scalable option for a different or larger database of poses.

Enhancements and Scalability

As referenced in the “Search and Sort Data” section above, the use of search algorithms to populate most return values affords the opportunity to use the current algorithms with different or larger databases. As long as the object keys are the same, these algorithms can be used in the same way they are employed in this application.

A logical improvement for the current application would be to use an algorithm to populate the options in the Movement Type and Sequence drop-down menus. Currently, the options were manually added and the list of options would not be responsive to changes in the database. Taking an approach similar to the Search Pose drop-down menu would make the code more responsive and broadly applicable to a changing database.

Encountered Challenges

When I started the project, I anticipated the creation of a responsive web design as one of the major hurdles. With some quick learning about the use of Bootstrap, I was able to mitigate this concern by employing some simple organizational strategies to ensure the overall nature of the site was responsive.

What became more of a challenge was ensuring that my returned values based on user selection were accurate and up to date. With the search algorithms being very similar in nature, just searching for a different attribute, I was able to reuse the same search structure across many features.

The biggest challenge came when trying to add in a toggle feature for displaying an up-to-date list of “favorited” poses.

The use of a “favorite” button would change the status from no to yes for the object key “favorite” using a PATCH request. This then allowed for a similar search algorithm used for the movement type and sequence to also be applied to “favorites.”

The challenge was that the information in the PATCH did not appear to be populated when sorting the data immediately after the request. This meant that the favorites list drop-down option was not yielding the proper output.

This was solved by putting the original GET request in a function, calling it originally for the initial data population, and then RE-calling it within each of the event listener functions. This meant that the data being used for the search function was the most up-to-date as it was the result of a pull right before the search and sort.

Project Takeaways

This project helped me see how the full scope of design can come together, as well as how planning out our idea can help you not only focus on the skills you need to review and employ, but also on the process of building with the end in mind mitigates the amount of refactoring and revision that is needed. The thoughtful planning helped ensure that each time I sat down to work, I knew what I needed to accomplish and what skills were needed for the task.

Where Do We Go From Here?

Focusing on Functionality in my Phase-1…