{"id":28022,"date":"2021-06-02T08:57:57","date_gmt":"2021-06-02T08:57:57","guid":{"rendered":"http:\/\/How-To-Build-an-Ecommerce-App-With-React"},"modified":"2021-06-02T08:57:57","modified_gmt":"2021-06-02T08:57:57","slug":"how-to-build-an-ecommerce-app-with-react","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-build-an-ecommerce-app-with-react\/","title":{"rendered":"How To Build an Ecommerce App With React"},"content":{"rendered":"

In this media jam, we will discuss how to build an ecommerce app in React<\/a> using Airtable<\/a>, Cloudinary<\/a> and Snipcart<\/a>.<\/p>\n

We will use Airtable to store product data and use Cloudinary\u2019s Product Gallery to showcase different product images. In this tutorial, we will build an ecommerce site for a cake shop named Sweet Tooth<\/strong> and use various cakes as products.<\/p>\n

If you want to jump right into the code, check out the GitHub Repo here<\/a>.<\/p>\n

CodeSandbox<\/h2>\n<\/div>\n \n
\n <\/iframe>\n <\/div>\n\n

Setup<\/h2>\n

Run the following command to create the initial React app with CRA<\/a> (create-react-app<\/code>) template.<\/p>\n

npx create-react-app react-ecommerce-app\ncd react-ecommerce-app\nnpm start\n<\/code><\/span><\/pre>\n
The last command, npm start<\/code>, will start the development server on your system\u2019s port 3000. You can stop the server by hitting CTRL+C<\/strong> in the terminal.<\/p>\n
The next step is to install the dependencies that you will need in this project. Run the following command to install them.<\/p>\n
npm i airtable cloudinary-react \n<\/code><\/span><\/pre>\n
In this project, you will use Tailwind CSS<\/a> to style the ecommerce app. Its installation and configuration are beyond the scope of this media jam; you can refer to the official documentation to install Tailwind CSS<\/a> before proceeding further.<\/p>\n
Run the following command to create a file named .env<\/code> to store your API keys securely.<\/p>\n
touch<\/span> .env<\/span>\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
\"Snipcart<\/p>\n
After creating the Snipcart account, head over to account settings<\/a> and copy the PUBLIC TEST API KEY<\/strong> under Credentials.<\/p>\n
\"PUBLIC<\/p>\n
Login into your https:\/\/cloudinary.com\/<\/a> and copy the Cloud Name<\/strong> from your dashboard. All the product images will be stored in Cloudinary.<\/p>\n
\"Cloudinary<\/p>\n
Create a folder named sweet-tooth<\/code> in your Cloudinary account and upload Butter Cake\u2019s image into it. You can download the image from here<\/a>. After uploading the image, copy its public_id<\/code>.<\/p>\n
\"Butter<\/p>\n
You will use Airtable to store the product\u2019s data. Create an account on Airtable<\/a> if you haven\u2019t already.<\/p>\n
\"Airtable\"<\/p>\n
Every product will at least have the following fields:<\/p>\n
Head over to https:\/\/app.snipcart.com\/register<\/a> in your browser and create a free account on Snipcart.<\/p>\n