iamshafi / next-gen-e-commerce

TechStack: Next.js, Shadcn, Sanity CMS, Stripe & Typescript

Next-Gen E-Commerce

⚙️ Tech Stack

Next 13, React, Sanity, Stripe, & TailwindCSS

Screenshot

🔋 Features

-This full-stack e-commerce app is built with Next 13, features a modern and responsive user interface.

-Powerful shopping cart: Customers can add, update, and remove items from their cart and view the total cost, including shipping.

-Ability to sort products by different criteria: Customers can sort products by price, date, popularity, or other criteria.

-Advanced filter component: Customers can filter products by category, size, color, and other criteria.

-Full-text search: Customers can search for products by keyword.

-Custom Stripe checkout page: Customers can pay for their purchases quickly and easily on a secure checkout page.

👉 Follow these steps to set up the project locally on your machine.

Cloning the Repository

git clone https://github.com/your-username/your-project.git
cd your-project

Installation

Install the project dependencies using npm:

npm install

Set Up Environment Variables

Create a new file named .env in the root of your project and add the following content:

NEXT_PUBLIC_SANITY_PROJECT_ID=
NEXT_PUBLIC_SANITY_DATASET=

NEXT_PUBLIC_STRIPE_PUBLIC_KEY=
STRIPE_SECRET_KEY=

Stripe Shipping information

Shipping address
Address Line 1:
123 fake street

United States
123 Fake Street

Address line 2:
City: Oak Lawn
Zip: 60453
State: Illinois

Payment details
Card information
4242 4242 4242 4242
Visa
MM/YY 04 / 24
CVC 242