Our storefront will be built in React.js using the Next.js framework. Those two solutions will be complemented with TypeScript, GraphQL & Apollo Client and Tailwind CSS. We aim at Vercel and Netlify for easy deployment.
Next.js is a React.js framework built on top of Node.js. It enables functionalities such as server-side rendering and generating static websites. The Next.js framework utilizes JAMstack architecture, which distinguishes between front-end and back-end and allows for efficient front-end development that is independent of any back-end APIs.
Vercel is a deployment platform known for its great developer experience. It takes care of the hard things: deploying instantly, scaling automatically, and serving personalized content around the globe. As Vercel team also created Next.js, Vercel provides production-grade hosting for Next.js websites with zero configuration. What's more, it has a rich library of templates developers can start with and enables continuous deployment setup with a Github repository within a few clicks.
Netlify is a platform that offers comprehensive automation of modern web projects. It simplifies the process for developers to deploy and host a website with the focus on website performance. Netlify supports continuous delivery and continuous integration. It integrates with Github repository to automatically build the site, run plugins, and deploy. It also provides serverless functions (AWS Lambda Functions) to add additional back-end functionality. It is cost-effective, yet delivering rich features. It is considered the main alternative to Vercel.
GraphQL is a query language and server-side runtime for APIs that prioritizes giving clients exactly the data they request and no more. GraphQL is designed to make APIs fast, flexible, and developer-friendly. As an alternative to REST, GraphQL lets developers construct requests that pull data from multiple data sources in a single API call. Additionally, GraphQL gives API maintainers the flexibility to add or deprecate fields without impacting existing queries. Developers can build APIs with whatever methods they prefer, and the GraphQL specification will ensure they function in predictable ways to clients.
Tailwind CSS is a utility-first CSS framework that allows you to build complex components from a constrained set of primitive utilities like
rotate-90, directly in your markup. The framework provides a wide variety of predefined classes where each has its own focused use. This approach makes it easier to quickly test and check how CSS styles are applied on web pages.
Typesense is an open source search engine that is optimised for instant sub-50ms searches, while providing an intuitive developer experience. It is equipped with a number of useful features, such as typo tolerance, faceting and filtering and geo search by default which makes it a tempting alternative to Algolia or ElasticSearch.
With InstantSearch.js UI library from Algolia, we can quickly build a search interface in our front-end app. It equips you with a complete production-ready search ecosystem based on widgets that are fully customizable. Moreover, InstantSearch.js comes with many flavours, one of them being React Instant Search, which we will use in this guide.
PNPM is a modern, community-made package manager. It handles the installation, upgrading, and removal of computer software packages. It is considered an alternative to NPM. It was built on top of it to simplify the installation process of packages in Node applications. PNPM follows the same principles as NPM but it has some additional features that makes it more powerful than its predecessor:
You can easily install PNPM in your Terminal with
npm install -g pnpm.