zoltu / bags-client Goto Github PK
View Code? Open in Web Editor NEWZoltu Bags Client Application
Home Page: https://bags.zoltu.com
License: Creative Commons Zero v1.0 Universal
Zoltu Bags Client Application
Home Page: https://bags.zoltu.com
License: Creative Commons Zero v1.0 Universal
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.
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
Tags currently use GUID as their type. Switch this to an auto-incremented long to improve query string quality.
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.
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.
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.
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.
When looking at filter options, display how many items would be remaining if the filter were chosen.
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?
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 #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.
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
.
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.
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...
Depends on #39. Display the tag descriptions to users in some way, perhaps tooltip?
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.
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."
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.
Tag/category metadata could be an image, a logo, RGB value, etc. The UI can be coded to interpret certain kinds of values.
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.
Blocked by #56
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.