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 a gallery. Essentially it's a curated list of products and services from the internet for original, funny, and intelligent present ideas. A vital aspect of the project was categorization and filters that facilitate searching for ideas given a recipient, occasion, or budget.
Speed. An essential 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 a minimal amount of assets to achieve a great user experience.
SEO. As a listing website, hitting perfect SEO scores on every product and list page was crucial. The client was already on the right path with the suggestion of using a static-site generator.
Dynamism. An extensive product collection naturally requires implementing some pagination, in our case, the _infinite loading_ pattern, allowing us to prepare the next page of products even before the user reaches the end of the visible catalog. Furthermore, some features required dynamic sending/retrieving of data, such as newsletters 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 significant portion of the target users of the website would be on phones and tablets. As with any modern web app, ours needed to meet the challenges of responsiveness regarding 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 would go into building the final product. We answered questions our client had about the tech side of things - what's feasible in the following 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 traditional 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. A concise 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. For the front end, we chose to use TypeScript as, from our experience, it always yields better code quality. Our client already picked the back-end technology - **Contentful**. Headless CMS services are on the rise, and Contentful is one of the complete solutions.
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 an excellent 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 to use
Tailwind - a framework that offers excellent usability, developer experience, and extensibility.
We built a performant yet flexible and dynamic product listing web app in the given time frame.
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 generated 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 many users. By applying optimization techniques such as minimal image size fetching, browser cache leveraging, JS, and CSS minification, we got 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 into 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 in each category.
In excellent communication with our partner on this project, we delivered a product that hit all marks on the scale for success. We could strike a balance between the best of both worlds using cutting-edge technologies - 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 to 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