ECOMMERCE CLOTHING BRAND SITE

Welcome to the documentation for our eCommerce clothing website built with Next.js 14, Sanity.io, Tailwind CSS, and Stripe integration. This document will provide an overview of the project structure, setup instructions, and key features.

Project Overview

Our eCommerce clothing website is a modern and user-friendly platform for selling clothing items online. It incorporates the following technologies:

• Next.js 14: A popular React framework that enables server-side rendering and efficient routing.
• Sanity.io: A headless CMS for managing content.
• Tailwind CSS: A utility-first CSS framework for styling.
• Stripe: A secure payment processing system for handling transactions.

Prerequisites

Before you start, make sure you have the following installed on your system:

• Node.js [Node -v 18]
• npm or yarn
• Sanity.io account
• Stripe account [NOTE: Public key & Secret Key]

Table of Contents

• Project Overview
• Key Features
• Prerequisites
• Getting Started
• Configuration
• Usage
• Deployment
• Contributing
• License

Key Features

• Product Catalog: Display a wide range of clothing items with images, descriptions, and prices.
• User Authentication: Allow users to create accounts, log in, and manage their profiles.
• Shopping Cart: Enable users to add products to their cart and proceed to checkout.
• Payment Processing: Securely process payments using Stripe.
• Content Management: Easily update and manage website content with Sanity.io.
• Responsive Design: Ensure a seamless experience on various devices.
• SEO Optimization: Improve search engine visibility with server-side rendering.

Installation

Step 1: Setup Next JS 14

   npx create-next-app@latest next-ecommerce-cms --typescript --eslint
   
   cd next-ecommerce-cms

Step 2: Setup TailwindCSS

   npm install -D tailwindcss postcss autoprefixer

   npx tailwindcss init -p

Step 3: Setup Flowbite & flowbite-react UI Component Library

   npm install flowbite flowbite-react --save

Step 4: Install React Loading Skeleton package for Skeleton loading effect in Product Card

   npm i react-loading-skeleton  

Step 5: Install React Icons Library for rich icons collections

   npm i react-icons  

Step 6: Setup Sanity.io for CMS

   npm create sanity@latest

Step 7: Setup Stripe payment gateway

   npm i stripe @stripe/stripe-js

Step 8: Setup Redux toolkit

   npm i --save react-redux  @reduxjs/toolkit @types/react-redux

Step 9: Setup Redux Persist (For storing redux data in localStorage)

   npm i redux-persist @types/redux-persist

Authors

• Parbat Lama