The Vuetique PWA theme development diaries
The development process is often a mystery, especially when it comes to new technologies like progressive web apps. Let me share with you a fun, and yet very true story of our own creation of a PWA theme for Vue Storefront.
On December 21st, 2018, I learned of the competition and immediately went to speak to Sergio to figure out if we could make this project happen. I wanted his buy-in before I spoke to Roman. We don’t get a lot of opportunities to be early in the game on something we feel we have enough experience on, so we thought this would truly be a great opportunity to test our team’s skill. After speaking with Roman, he gave us the green light provided we don’t impact existing client development timelines, and we agreed to mitigate that as much as we could. We then created a slack channel.
On the 28th, Sergio and I built a quick mockup:
And had a few laughs…
Joking aside, we gave this mockup to Serghei to create the pages for the site. We didn’t want to create something radical. It was to be a subtle iteration on what Vue Storefront already was, so as to make sure we could make the deadline (before we knew it would be extended).
On the 9th of January, 2019, Serghei gave us the home page, menu dropdown design, cart design, product list page, product detail page, popup notifications, contact us page, checkout, and 404 page designs. I immediately assigned it to Dmitry to begin.
On the 11th, after a few days, we decided to name the theme Vuetique.
On the 14th, Serghei prepared the theme presentation. I also added Aleksander to the project. Dmitry committed his draft of the homepage slicing, microcart, and header.
On the 16th, we had some designs for the sidebar menu and search dropdown. We also realized we had ignored account pages up until this point.
At this point, we realized we needed more help, so we on-boarded Eduard Kozachek to come in and assist. By the afternoon, Serghei had given us designs for the Login, Reset Password, and Registration popups. A few hours later he gave us the order confirmation design. And after some time, the cookie notification design… And then the Account shipping and orders designs. Our team was even a bit suspicious of Serghei’s speed and suspected he had 10 designers working under him.
At night, after our Ukrainian/Moldovan team went to bed, it was my turn to stay up late into the night doing what I could. Of course, being sleepy isn’t the best time to update Vue Storefront 1.7, but I did it anyway.
On the 18th, the morning was spent merging and rebasing everyone’s work as we had all been on separate branches. Without scoped component styles and our reliance on tailwind’s helpers for most of our layout, this would have been much more difficult. Up to this point, QA was difficult because we didn’t have a development server to preview any of our work — using something like ngrok didn’t work well because the local URLs were pointing to localhost in the source code.
I took it upon myself to buy a domain: vuetique.io, and provision a server on Digital Ocean. We set up Cloudflare and railgun, and I set up a vanilla version of Magento 2.3 community with sample data. Locally, everyone was using the Vue Storefront endpoint, so we didn’t have the ability to swap content on CMS pages that pulled from the Magento API.
By early afternoon, our demo theme was deployed to its current location: demo.vuetique.io.
In the afternoon, it was apparent my upgrade wasn’t the best idea, as we had issues with the Wishlist and social tiles components. Fortunately, they weren’t that hard to resolve. We also realized bundled product pages were a disaster, and didn’t even consider them in the design. We started checking the default Vue Storefront theme for references to fix our theme as the divergence led to some more issues like no Add to Cart button on bundled product pages.
On the 18th, I stayed up for the night shift and polished in various places. By morning, I asked Eduard and Aleksander to return to their existing projects as I felt we had done all we could by the deadline. I went to bed and Sergio was requesting some more time for the development of the theme.
Luckily for us, the competition was extended to the 1st of February.
After I woke up, we on-boarded Julia to help us test the site and prepare a list of UX improvements.
On Monday the 21st, we all returned to normal projects and, at the end of the week, started a bit of planning for the next sprint.
On Tuesday the 29th, development started again to fix mobile search, implement alternative images, implement accordion on product detail pages, add thumbnails to the product detail page, and some more. Eduard joined mid-day to assist. Sergio spent a lot of the day on QA and guiding us to the imperfections in the implementation of the theme.
On the 31st, we finished the Comparison pages and 500-error pages. We started to implement some missing features in our theme like cart quantity editing, and some niceties like add to cart loading state.
On the 1st of February, it was a scramble to fix the miscellaneous bugs for edge cases and make sure that checkout was functional. I spent some time optimizing our Tailwind configuration to reduce the size of the body, but was not successful in figuring out how to reduce the critical css injected in the head of the page. I also tried to reduce the font payload size by being specific in the language used. At the end of the day, we submitted the design to Piotr Karwatka from the Vue Storefront team.
You can check how this story ends in the results of the Vue Storefront Demo Theme Competition :D
