/pineapple-ecommerce

Ecommerce built with Next.js Sanity and Stripe

Primary LanguageTypeScriptMIT LicenseMIT

Pineapple ecommerce

Pineapple ecommerce is an iPhone ecommerce built with Next.js Sanity and Stripe

Demo

Screenshot

screenshot

 

 

How to run this project locally

  • clone this repo and cd into it

  • run npm install to install all dependencies

  • cd into the sanity-ecommerce folder and run npm install to install all dependencies

  • create a .env.local file in the root directory and add the following:

# SANITY
# Go to the Sanity manage section, open your project and copy the project ID
# @link https://www.sanity.io/manage
NEXT_PUBLIC_SANITY_PROJECT_ID=''
# Go to the API section of your Sanity project, create a new token and copy it
# choose token permissions depending on your needs
# @link https://www.sanity.io/manage
NEXT_PUBLIC_SANITY_TOKEN=''

# STRIPE
# Go to the developers section of your Stripe account and copy the keys
# @see https://dashboard.stripe.com/test/apikeys
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=''
NEXT_PUBLIC_STRIPE_SECRET_KEY=''
  • run npm run dev to start Next.js
  • open a new terminal tab, cd into the sanity-ecommerce folder and run npm run dev to start Sanity Studio
  • go to http://localhost:3000 to see the app
  • go to http://localhost:3333 to see the Sanity Studio and upload content there

Note: If you instead need to update content in Sanity Studio for the production version, got to this link

 

 

How to deploy this project

Deploy Sanity Studio

  • cd into the sanity-pineapple folder and run sanity deploy to deploy the Sanity Studio to the cloud
  • choose a name for your Studio hostname (e.g. pineapple-ecommerce)
  • share the link with your team members or clients

Note: the link for this project is: this one

Deploy App to Vercel

  • add a .vercelignore file in the root directory and add the sanity-pineapple folder to it to ignore it when deploying to Vercel
  • remember to add the following environment variables to Vercel:
NEXT_PUBLIC_SANITY_PROJECT_ID
NEXT_PUBLIC_SANITY_TOKEN
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
NEXT_PUBLIC_STRIPE_SECRET_KEY
  • add the vercel website url to the Sanity project management dashboard API > CORS origins > + Add CORS origin

Here: https://www.sanity.io/manage (Click on your project name)

 

 

Resources

 

License