zoltu / bags-client Goto Github PK

Depends on #41.

Once the backend is returning both an ID and a SortID to the client when fetching the filtered product list, switch to using the SortID for pagination but use the ID for linking and fetching details. This wall allow us to change the sort order on the backend without breaking bookmarks, shared links, etc.

In user testing, users seem to not notice when they have failed search terms. We need to figure out a way to bring more attention to the failure so the user notices. Perhaps some kind of warning/error bar (red/yellow) or warning/alert icon?

We need a way to A/B test UI tweaks and changes with real users and see which ones lead to more engagement and/or higher conversion rates (clicking the buy button). For starters, lets try to just A/B test two versions of the logo, one with yellow background and one with white background. We'll need to both figure out how to have the displayed logo be different 50% of the time, and we'll also need to figure out how to report that to Google Analytics as experiments. Details for client-side experiments can be found here: https://developers.google.com/analytics/solutions/experiments-client-side

Create a new base route (e.g., bagcupid.com/client-side-routing/) that will cause all paths below that to return the index page. This will enable the UI to use pushState and make links that will be cataloged by major search engines.

Blocked by #56

Blocked by #35.

To facilitate deep linking, search engine optimization and social sharing, deep links should have headers injected into them that are specific to the product/filter being linked. This will both improve the quality of shared links and how they render in social sites and also improve search engine indexing and listing significantly.

Some categories, like brand, are mutually exclusive between tags within it. This should be encoded in the database so OR instead of AND operations can be applied to the query. The UI will also need this so it can render them differently.

Tag/category metadata could be an image, a logo, RGB value, etc. The UI can be coded to interpret certain kinds of values.

Allow users to easily add bags they like to their favorites. There also needs to be a UI for users to view all of their favorites.

For the initial implementation, there is no need to integrate directly with the current filtering UI, but in the future we may want to allow users to filter their favorites just like they can filter their favorites like they can filter all bags.

Currently, the front page of the site weighs in at 1.2MB. This isn't terrible for a modern web application, but it also isn't great. It would be nice if we could get this reduced down a bit to improve load time performance.

Add a short (1-4 sentences) description to each tag. Example: "A crossbody strap is a strap that allows you to have the bag sit on your hip with a long strap that goes across the front/back of your body and rests on your opposite shoulder."

Depends on #39. Display the tag descriptions to users in some way, perhaps tooltip?

Currently, bags are sorted by their primary key. This means that changing the sort order of bags requires changing the primary key. Instead, we should add a new column for sorting that is what will be used for doing pagination (it will be returned to the client) but the primary key would also be returned to the client to allow for perma-links to products that don't change when the sorting is changed.

Initially, the sort ID should have the same value as the primary key until the client work is done, at which point the sort ID can be randomized.

Allow users to comment on bags and allow other users to see what comments users have put on the bags. Perhaps we could integrate with Facebook or Instagram or some other service for commenting to enhance the social aspects? I have seen web applications that have comments per article...

When sharing a search, the primary image for a random selection (3 for start) of bags that are part of the search should be chosen (at random) to be displayed in the social share.

When sharing a specific bag, the top few (3 for start) images (lowest priority number first, followed by list order) should be included as part of the share.

Tags currently use GUID as their type. Switch this to an auto-incremented long to improve query string quality.

The build server can be setup to use docker-compose to run arbitrary test code anytime an automated build is triggered. We need to come up with at least one test that will validate that "everything is working". This task is primarily aimed at setting up the testing infrastructure, not on building out a full suite of functional tests.

The test app can be written in any language and it will interact with the application as an HTTP client. An example test might be to do a GET of index.html and validate something about the page. Another more thorough option would be to use some web UI testing framework to fetch the entire website, render it in memory, and then validate that it is looks right.

When looking at filter options, display how many items would be remaining if the filter were chosen.

At the moment, Google Analytics thinks almost all users are leaving the page without interacting because it doesn't understand SPAs. In order to combat this, we need to provide better data to Google Analytics that will allow it to notice when the user interacts with the page.

https://developers.google.com/analytics/devguides/collection/analyticsjs/events

We should generate a Google Analytics events whenever the user interacts with the page. This includes clicking on tags, adding filters, adjusting the price, viewing the about page, viewing a product and, most importantly, clicking on the Buy button.

Product pop-up links currently have href with a full URL but some links don't like the ABOUT US links. Instead, these links currently have javascript:void(0) as their HREF. This seems to be causing problems with Google search indexing because it doesn't appear to follow these links.

Figure out a way to convert these links to have a valid perma-link in the <a href="..."> like https://bagcupid.com/#aboutus=true.

We need to figure out a way to provide a UI that shows all available tags in some organized way (probably organized by category) without taking up any primary real estate. We want users to use the search bar and/or tags-on-bags system for filtering but we also need a fallback solution for people who are accustomed to traditional systems.

In order to improve search engine cataloging, the client-side routing engine should be changed to leverage pushState (https://developer.mozilla.org/en-US/docs/Web/API/History_API) instead of anchors. This will first require some server side changes (#35) but once completed should greatly improve search engine indexing and more interesting deep linking.