Dave Pierce | Optberry Product Customization Application

×

Close

Optberry Product Customization Application

SQLite, PDO Object, PHP populating JavaScript Objects, click tracking

This app lets users design their dream product, from guitars(Revomere as showcased) to sneakers. Update the database, and the app adapts seamlessly. I built it to showcase my skills in web development, database integration, and graphic design.

VisitGitHub

The Process:

Hierarchical Data Structure for Customization

JavaScriptdata structureclick tracking
To represent customizable products, I designed a hierarchical JavaScript object structure. This structure starts with a Product object, which contains an array of Category objects. Each Category can further contain Group objects for finer organization. Finally, Group objects hold individual customization Option objects. This structure, with the addition of a Group layer, provides an extra level of organization and navigation control. Unselected category groups are hidden, improving user experience and keeping the navigation bar clean. I leveraged Bootstrap's collapse component for a user-friendly accordion-style navigation.

planning the data structure

more planning and pseudo code

product class

category class

group class

option class

click class

vertical navigation

Backend Database Schema

SQLitePHPPDO Object
To store product customization options, I implemented a schema using SQLite. This lightweight database efficiently manages the data powering the application. The core table, Options, utilizes foreign keys to link related data.

This relational structure allows for efficient data retrieval and manipulation. Leveraging PHP PDO, I crafted queries to fetch data dynamically. These results were then used to construct JavaScript objects, replicating the hierarchical structure on the front-end.

database tables

Options table

Data Structure Code Snippet

Chrome DevTools
This code snippet, captured from Chrome DevTools, offers a glimpse into the product object in action and how it reflects user customization choices. Here, we see the "Camila" model/shape selected, nestled within the "Model" group of the "Shape" category. The "oneSelection" property ensures only one model can be chosen at a time, enforcing a single selection for this category. The "clicks" array provides valuable insight into user interaction. It reveals "Camila" has been selected three times, with the most recent selection indicated by a Click object lacking an "end" value. This demonstrates how the application accurately tracks user choices within the pre-defined product structure, ensuring a seamless customization experience.

code snippet from Chrome DevTools

Front End Development

CSS positioningPNG filesresponsive design
A key aspect was creating a dynamic product image that reflects user choices. This involved layering PNG images for different customization options. The challenge was maintaining image fidelity (aspect ratio and detail) during page resizes.

I implemented a container-based approach using nested divs. The inner container with relative positioning acts as a reference for individual images. Each image utilizes absolute positioning with a width set as a percentage of the container width ((image width in pixels * 100) / 1445px). Similar percentage calculations ensure precise positioning of each image layer. Safeguards prevent these values from exceeding the original image width to maintain image quality.

shape image files

some hardware image files

images put together inside of containers

Feature Implementation and the Power of Refactoring

• Conditional Options: The ability to link options together, where some selections influence the availability of others.
• Required vs. Optional Choices: Providing a clear distinction between mandatory and non-essential options for a streamlined experience.
• Selection Limits: Enforcing single or multiple selections within option groups, guiding users towards valid configurations.
• Prioritized Options: Introducing the concept of "priority" options to ensure a visually pleasing starting point for customization.
• Selectable Option Groups: Offering the option to use a select box for multi-selection groups, catering to user preferences.
• Default Selection: Setting default options to provide a starting point and reduce user input.
• Progress Tracking: Implementing a progress bar to visualize customization completion and encourage users.
• Price Tracking: Updating the price dynamically as users select options, enabling informed decision-making.
• Click Tracking: Visualizing user interactions with a click tracking bar chart



While these features enrich the application, their improvised implementation during development resulted in database inconsistencies, unstructured queries, and code clutter. These challenges highlight the importance of planning and refactoring.

a group of options with one selection required
a group of options with multiple selections allowed, some select boxes required, some optional, note the none radio option in the select box dynamically added since the select box is optional
click density bar chart, pin icon is current selection

A Code Snippet of a Function

JavaScript
This JavaScript function, listInnerDependancies(), plays a crucial role in managing dependent options within the product customization process. It utilizes nested loops to iterate through all product options and identify any dependencies.

screenshot from the code editor
notification via Bootstrap modal

Logo & Guitar Body Design

Affinity Designer

initial sketches
end result

Image File Considerations

Chrome DevToolsonline image compressionHTTP requests
While the application allows for extensive product customization, the initial load time was impacted by the number of image requests. Even with optimized images, the page took approximately 4 seconds to load on an average internet connection with no cache (see image below). This highlights the importance of image optimization for a smooth user experience.

To address this challenge and ensure a faster experience for users, future iterations of the application could explore image combining, lazy loading, or data URIs.

By strategically implementing these optimization techniques, the application can deliver a significantly faster and more responsive experience for users, even as the range of customization options expands.

Chrome DevTools, Performance tab

Ideas

After some refactoring, and improving the page load speed, some good additions to this application may be adding option details for the user to be well informed on selections, product presets that autoselect multiple options, a GUI(graphical user interface)/admin area to manage options easier, and a time line graphic for a more in depth analysis of user selections.

Final Thoughts

This project was my first experience using GitHub for version control. While prioritizing quick feature implementation kept the project moving, it also revealed areas for improvement in Separation of Concerns, Planning and Scalability, and Code Optimization.

These learnings emphasize the importance of structured code, clear documentation, and taking the time to plan for future growth. This application served as a valuable learning experience, and I'm actively working on strengthening my skills in SQL Optimization, and Code Structure.

By continuously seeking improvement and expanding my skill set, I aim to become a more efficient and well-rounded developer in future projects.

Let's Talk:



Dave Pierce

Web Designer


davepweb@gmail.com