Local Vyntage – T-shirt business
Local Vyntage is a T-shirt business located in Tallahassee, FL, and a client of my web consulting business. I’m working on rewriting the codebase to add more features, and to make it faster and more flexible. (Note: Site rewrite has not yet been launched as of May 2020.)
Unique challenges
The owner of Local Vyntage wanted to remain on the Shopify platform, to take advantage of its existing plugin system. However, he also wanted the homepage to display custom imagery and product offers based on the customer’s location. Due to limitations in Shopify’s Liquid language, this meant we would have to find a way to implement these features client-side in a way that would not hurt performance.
Framework choice
- Vue for JavaScript, mostly because it’s fairly small and supports “rehydration” of server-rendered output.
- Tailwind CSS for styling, because I’m comfortable with it and it’s flexible enough to get the results I want.
- Redux for state management, mostly because it’s fairly small and I’m comfortable with it.
Integration testing Shopify
Shopify can be tricky for integration tests, since there’s no way to run it locally. Local Vyntage has a theme configured in Shopify exclusively for testing. During a test run, the current commit is deployed to the testing theme, and tests are run against the preview URL for that theme.
Unfortunately, there’s no way to provide mock products for these tests. However, the products used for tests are old products that rarely change, so the tests have not proven to be brittle in practice.
Admin console
The rewrite also includes an admin system. This allows the shop owner to control the heavily customized parts of the site, including the geolocation, product color, and shipping rules. This app is deployed to Vercel and uses Auth0 for login.