With this project I learned to use Next.js and I was hooked with its benefits. In this app, I use an API from the folks at TheCocktailDB. I make use of Next.js own data fetching tools like getServerSideProps, getStaticProps and getStaticPaths. I wrote an article on how to use them and I'll leave the link below in case you're curious.

To increase the efficiency of web page loading time, I used Plaiceholder to dynamically convert the images received from the APIs into a low-resolution version, encoded as a Base64 string. This creates a blur effect while downloading the images.

This project has:

• Dynamic pagination when searching for cocktails by name or ingredient
• Autocomplete in both search bars
• Error handling when trying to search for a cocktail whose name does not exist in the database

WebsiteCurrently, this deployment is not available, but we can review the code in a face-to-face or virtual interview, and if you like, I can re-deploy it to test it.

DeploymentThe last deployment was on Linode using Nginx

ArticleUsing getServerSideProps, getStaticProps and getStaticPaths in Next.js with TypeScript

Source code

Front-endNext.js, TypeScript, plaiceholder, NProgress, AntDesign, TailwindCSS, FontAwesome, getStaticProps and getStaticPaths for the SSG (static-site generation)

Back-endgetServerSideProps and TheCocktailDB API