Full Stack ECommerce App - Next.JS, React, Context API, Sanity CMS, CROQ Tailwind CSS, Stripe

Building full stack ECommerce Application with Next.JS, React, React Context API, Sanity CMS, CROQ Tailwind CSS. Using Sanity Content Management System (CMS) to manage structured data and fetch CMS data into a Next.js app using CROQ and rendering contents using Next.JS data fetching techniques. Adding & editing products in the cloud sanity platform. Implementing cart, and checkout functionalities, and integrating Stripe payments.

Setting up Tailwind CSS in a Next.js project Execute the following command to run the Next.JS App.

> npm run dev

Use this command to install the dependencies with the same version

npm install --legacy-peer-deps

Installing Dependencies:

npm install next-sanity @sanity/client @sanity/image-url @stripe/stripe-js canvas-confetti next-sanity-image stripe react-icons react-hot-toast

Create Sanity project & Start Sanity Studio Note: Make sure that you have logged into your Sanity.io account Use the following command to create Sanity project inside your Next.js project by choosing 'Clean project with no predefined schemas' and start Sanity Studio.

> npm create sanity@latest

Note:

Create your Schemas

Create "lib" folder and inside that create "sanity.js" file & '.env.local' file in the root of Next.JS project

Generate API Token in sanity.io by choosing "Editor" option and add the token in the .env file.

Implementing React Context API:

React Context API

Note: After creating your state context, wrap the entire components of your application in the '_app.tsx' file.

And render ' <Toaster/> component in the '_app.tsx' file.

Implementing Stripe Payments: Create a file 'stripe.js' inside 'api' folder of your next.js app.

Signup with Stripe (Test Mode By Default)

Get Publishable & Secret Keys and add in the .env.local file.

Note: Stripe documentation for accepting online payments

And select "Next.JS" as Frontend under "Prebuilt Checkout Page" and copy the checkout page code add it in the Stripe.js

Deployment to Vercel: > sanity deploy

You will get the Sanity Studio Host.

Add the "/sanity-backend" in the 'gitignore' file of Next.JS project to ignore the entire Sanity Studio.

Then, push your Next.JS project into Git.

Create an account with Vercel, Connect Git Repo and Login to your Vercel Account and do the following

- Choose new project and select your git repository of your Next.JS project.

And configure your project using the following env variables.

NEXT_PUBLIC_SANITY_DATASET=production

NEXT_PUBLIC_SANITY_PROJECT_ID=

SANITY_API_TOKEN=

Plugins:

ES7 React/Redux/GraphQL/React-Native snippets

Tailwind CSS IntelliSense

Notes & References:

NOTE: Configuring images in Next.JS: next/image Un-configured Host

Use 'global.css' for your common/custom styling

Next.JS - The React Framework for Production

Basic Features of Next.JS

Data Fetching Overview

Tailwind CSS

Sanity

How Queries Work – GROQ