Building an e-commerce site (twice!)

Whilst I have commercial experience building websites with Vue, I have not explored every feature of the framework. My exposure to React is limited to a single commercial project and I only really scratched the surface. It strikes me that the ideal way to learn an unfamiliar technology is to compare it with a familiar one and by building a viable site (by which I mean looks and feels like a commercial concern) I can bolster my skill-set in both technologies. However, what will enable me to explore features in both frameworks and be viable?

The most recent project I worked on as a consultant, at the time of writing, was for a large (very large) retailer, with a huge presence online. I was somewhat overwhelmed by the number of features that were built in to the system. Not all of them were currently in use, not all of them applied to every retail brand (it was a multi-tenant retail site) and some were probably added as part of a retail brand acquisition, rather than as part of a considered, data-driven or user-researched exercise.

That got me thinking; How do e-commerce sites grow organically? Do owners take a lean approach, starting with their one and only product, selling it as simply as they can, adding features as they become necessary? Or do they look at their competition and consider they need to offer the same features?

Not being the sort of person to set myself simple goals, I decided to build an e-commerce site, in two technologies, side-by-side. Further, I will try to put myself in the position of a fledgling online start-up that has read a couple of books about lean approaches to building something from scratch. Finally, as a consultant, a big part of the value I bring to a client (and my colleagues) is to share knowledge, so I shall try to document the process and hopefully forge some tech talks and/or tutorials from my endeavour. At the very least, this project should spark discussions among my piers, even if it's simply, "what is the best framework, Vue or React?"

The first step, however, is to establish somewhere to document the process and host this article, as well as those that will follow. That is what this site represents. I won't go into a lot of detail about how this was done, as it is mostly constructed from several experiments, but here is a break-down.

• The design and layout (HTML, CSS and SVG) were all from explorations into flex-box/grids and animations I did last year.
• The domain is left over from AWS Solution Architect Associate training I did last year, where I wanted to explore Route 53 and Certificate Manager via the AWS console.
• The content is managed through a headless CMS, Prismic, that I selected for a client project and liked so much, I decided to use it myself.
• I used a static site generator, Gatsby, both for performance (not necessary, but because I care) and because my colleagues were using it in a project and I wanted to learn more.
• Finally, for the build process and hosting, I used Netlify.
• This website achieves 100 (out of 100) in Google's Lighthouse analysis, is very quick to load/render and is also a PWA that can be installed, although I doubt anyone but me will ever want that!

The next post will discuss how the two "shop" projects were instantiated; Just as soon as I move an existing domain to AWS, set-up sub-domains for each framework, create CI/CD pipelines and can link to the two sites from here.

Experiment

Parsing raw data from prismic PRE element into a table: