Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lamaparbat/next-cms-sanity.io
Next JS Ecommerce Sanity CMS
https://github.com/lamaparbat/next-cms-sanity.io
cms flowbite flowbite-react nextjs14 react-loading-skeleton reactjs sanity-io sanity-studio stripe tailwindcss tailwindcss-components typescript
Last synced: 25 days ago
JSON representation
Next JS Ecommerce Sanity CMS
- Host: GitHub
- URL: https://github.com/lamaparbat/next-cms-sanity.io
- Owner: lamaparbat
- Created: 2023-10-25T13:18:47.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-11-25T04:39:02.000Z (about 1 year ago)
- Last Synced: 2024-11-28T15:16:34.466Z (3 months ago)
- Topics: cms, flowbite, flowbite-react, nextjs14, react-loading-skeleton, reactjs, sanity-io, sanity-studio, stripe, tailwindcss, tailwindcss-components, typescript
- Language: TypeScript
- Homepage:
- Size: 18 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[]()
# 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](#project-overview)
- [Key Features](#key-features)
- [Prerequisites](#prerequisites)
- [Getting Started](#getting-started)
- [Configuration](#configuration)
- [Usage](#usage)
- [Deployment](#deployment)
- [Contributing](#contributing)
- [License](#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
```bash
npx create-next-app@latest next-ecommerce-cms --typescript --eslint
cd next-ecommerce-cms
```
**Step 2**: Setup TailwindCSS
```bash
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```
**Step 3**: Setup Flowbite & flowbite-react UI Component Library
```bash
npm install flowbite flowbite-react --save
```
**Step 4**: Install React Loading Skeleton package for Skeleton loading effect in Product Card
```bash
npm i react-loading-skeleton
```
**Step 5**: Install React Icons Library for rich icons collections
```bash
npm i react-icons
```
**Step 6**: Setup Sanity.io for CMS
```bash
npm create sanity@latest
```
**Step 7**: Setup Stripe payment gateway
```bash
npm i stripe @stripe/stripe-js
```
**Step 8**: Setup Redux toolkit
```bash
npm i --save react-redux @reduxjs/toolkit @types/react-redux
```
**Step 9**: Setup Redux Persist (For storing redux data in localStorage)
```bash
npm i redux-persist @types/redux-persist
```
## Authors
- [Parbat Lama](https://lamaparbat.com.np/)