The objective of this project was to build a website that is at its core a listing website, showing thousands of products, with rich-text descriptions and gallery. Essentially it's a curated list of products and services from the internet for original, funny, and smart present ideas. A key aspect of the project was categorization and filters that facilitate the search for ideas given a recipient, occasion, or budget.
Speed. An important point for the development was the overall speed of the website. The end product needed to load fast, react to user interactions swiftly, and load the minimal amount of assets to achieve a great user experience.
SEO. As a listing website, it was crucial to hit perfect SEO scores on every product and list page. The client was already on the right path with the suggestion of using a static-site generator.
Dynamism. Having a big product collection naturally requires implementing some sort of pagination, in our case the _infinite loading_ pattern, allowing us to prepare the next page of products even before the user has reached the end of the visible catalog. Furthermore, some features required dynamic sending/retrieving of data, such as newsletter and contact forms. It was apparent right from the beginning that the website would be a hybrid between statically-rendered and dynamically-fetched content.
Responsive design. A big portion of the target users of the website would be on phones and tablets. As any modern web app, ours needed to meet the challenges of responsiveness in terms of both layout and navigation patterns. Our client had already come up with two great fully-developed designs for desktop and mobile.
Our involvement in the project started with conversations regarding the short-term and long-term goals of the project. In this phase of gathering requirements, we spent time getting to know every functionality that will go into building the final product. We answered questions our client had with regards to the tech side of things - what's feasible in the next months and how we could extend it in the future.
After the requirements were gathered, our role as a development team began. Our estimation for a timeframe of 2 months turned out to be just enough to deliver a product that can be launched with confidence for success.
We used the classic Kanban methodology while developing the product, using Trello to organize tasks and communicate the progress. New versions were uploaded to an internal preview server every 2-3 days to allow our client to test out features early. Having a very short feedback cycle resulted in resolving issues and inconsistencies quickly and effectively with timely communication.
We researched what technologies would best align with the goals we had for the project. The back-end technology was already picked by our client - **Contentful**. Headless CMS services are on the rise, and Contentful is one of the most complete solutions out there. For the front-end, we chose to use TypeScript as, from our experience, it always yields better code quality.
Pro Tip: Check out Intercom's Contentful TS codegen. It fetches the content types on Contentful and generates type definitions for your entries. It is a great open-source project that keeps typings up-to-date with ease.
We employed Gatsby as a powerful static site generator and Gatsby Cloud for automated builds and previews.
For styling, we abstained from using hardly any CSS and relied on the emerging utility-first approach. In particular, we decided on using Tailwind - a framework that offers great usability, developer experience, and extensibility.
In the given time frame we built a performant, yet flexible and dynamic product listing web app.
Most of the pages show a mix of server-side rendered and client-side fetched content, e.g. on the home page, all navigation links are rendered by Gatsby (in red), except the product cards (in blue), which are loaded from Contentful's Delivery API on every refresh.
The same strategy is applied to every product page. During a build, we create a page for each product. Once users load the page, we get more suggestions for similar products on the fly.
For benchmarking the first tool we used was GMetrix. It's a great utility that helps us discover potential performance issues and allows us to optimize our UX for a great number of users. By applying optimization techniques such as minimal image size fetching, browser cache leveraging, JS, and CSS minification, we were able to get a perfect PageSpeed score and 98/100 YSlow score. All metrics for a snappy website showed green.
The second benchmark we used was Google's Lighthouse. It is built-in to Google Chrome and scores a given website in 5 categories - Performance, Accessibility, Best Practices, SEO, and Offline Capabilities (not shown here). We also took this benchmark seriously and followed Google's advice on making the best web experience. The result is shown below, with perfect and near-perfect scores on each category.
In great communication with our partner on this project, we were able to deliver a product that hit all marks on the scale for success. Using cutting-edge technologies we were able to strike a balance between the best of both worlds - static sites and web apps. There are already discussions for future extension of the scope and we are excited to be a part of the inception and growth of this project! Here is what the client had to say for us:
[They] did a GREAT job on this project. Super reliable, high-quality code, flawless execution from start to finish! I've worked with countless developers before, but this combination of skills & communication is rare, to say the least. Looking forward to the next project together!
Julian Jeczawitz – Founder, KrassGeil.de