{"id":27959,"date":"2021-11-01T19:04:06","date_gmt":"2021-11-01T19:04:06","guid":{"rendered":"http:\/\/Create-a-Holiday-Card-Generator"},"modified":"2021-11-01T19:04:06","modified_gmt":"2021-11-01T19:04:06","slug":"create-a-holiday-card-generator","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/create-a-holiday-card-generator\/","title":{"rendered":"Create a Holiday Card Generator"},"content":{"rendered":"

Greeting cards are pieces of stiff paper or thin cardboard with text, illustrations, or photos, given on special occasions such as birthdays, anniversaries, holidays, e.t.c.<\/p>\n

This post will discuss building a holiday card generator for the Harvest Month, Thanksgiving, and Diwali holidays using Cloudinary<\/a> and Next.js<\/a>. At the end of this tutorial, we will learn how to host images on Cloudinary and add transformations to the selected image.<\/p>\n

Cloudinary is a platform on which you can quickly and easily upload, store, manage, transform, and deliver images and videos for websites and apps. The platform also offers a vast collection of SDKs for frontend frameworks and libraries.<\/p>\n

Next.js is a React-based frontend development framework that enables functionalities like server-side rendering, static site generation, file-system routing (with no need to configure react-router-dom<\/code> manually), and API endpoints for backend features.<\/p>\n

Sandbox<\/h2>\n

We completed this project in a CodeSandbox<\/a>, and you can fork it to run the code.<\/p>\n<\/div>\n \n

\n <\/iframe>\n <\/div>\n\n

Prerequisites<\/h2>\n

The following steps in this post require JavaScript and React.js experience. Experience with Next.js isn\u2019t a requirement, but it\u2019s nice to have.<\/p>\n

We also need a Cloudinary account<\/a> to store the media files. Signup<\/strong><\/a> is completely free<\/strong>.<\/p>\n

Getting Started<\/h2>\n

We need to create a Next.js starter project by navigating to the desired directory and running the command below in our terminal.<\/p>\n

    npx create-next-app -e with<\/span>-tailwindcss holiday_card && cd holiday_card\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This command creates a Next.js project with TailwindCSS setup called holiday_card<\/code>, and navigates into the project directory.<\/p>\n
We proceed to install the cloudinary-react<\/a> dependency with:<\/p>\n
    npm install cloudinary-react\n<\/code><\/span><\/pre>\n
Holiday Card generator with Cloudinary<\/h2>\n
With the project dependencies installed, we need to download sample images to create our holiday cards. To get started, navigate to the URLs below and download the photos from Unsplash.<\/p>\n
Harvest Month Photos<\/strong><\/p>\n
TailwindCSS<\/a> is a utility-first CSS framework packed with classes to help us style our web page.<\/p>\n