https://github.com/jjxmonster/next13-ecommerce

Next 13 E-Commerce App powered by the newest Next.js features
https://github.com/jjxmonster/next13-ecommerce

atomic-design clerk graphql graphql-codegen nextjs stripe tailwindcss

Last synced: about 2 months ago
JSON representation

Next 13 E-Commerce App powered by the newest Next.js features

• Host: GitHub
• URL: https://github.com/jjxmonster/next13-ecommerce
• Owner: jjxmonster
• Created: 2023-09-04T20:24:03.000Z (over 2 years ago)
• Default Branch: v0.9_clerk_auth
• Last Pushed: 2023-12-07T19:33:55.000Z (over 2 years ago)
• Last Synced: 2025-01-17T12:55:32.007Z (over 1 year ago)
• Topics: atomic-design, clerk, graphql, graphql-codegen, nextjs, stripe, tailwindcss
• Language: TypeScript
• Homepage: https://next13-ecommerce-five.vercel.app
• Size: 9.11 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Next.js E-Commerce App

A project of an e-commerce application built with Next.js

## Brief Description

E-Commerce App where users can create accounts, add products to their cart, place orders, and make payments using Stripe. Users also have access to their order history and add product review. Additionaly user can sort products based on price, name or rating

## Tech Stack

- Next.js

- GraphQL

- Stripe

- Atomic Design

- Tailwind CSS

- GraphQL Codegen

- Clerk

## Live Demo

Check out the live demo of the application: [Live Demo](https://next13-ecommerce-five.vercel.app/)

## Screenshots

### Homepage![homepage](https://www.tarabasz.dev/_next/image?url=/img/ecom1.png&w=1080&q=75)

### Products![homepage](https://www.tarabasz.dev/_next/image?url=/img/ecom2.png&w=1080&q=75)

### Single product![homepage](https://www.tarabasz.dev/_next/image?url=/img/ecom3.png&w=1080&q=75)

### Shopping Cart![homepage](https://www.tarabasz.dev/_next/image?url=/img/ecom4.png&w=1080&q=75)

## Environment Variables (`.env.local`)

Before running the application, make sure you have correctly configured the environment variables. Fill in the following variables in the `.env` file:

```env

GRAPHQL_URL= // GraphQL server URL

STRIPE_SECRET_KEY= // Stripe  private  key  for  integration

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY= // Clerk  public  key  for  integration

CLERK_SECRET_KEY= // Clerk  private  key  for  integration

NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in // Clerk  login  path

NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up // Clerk  registration  path

NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL= // Redirect  URL  after  Clerk  sign-in

NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL= // Redirect  URL  after  Clerk  sign-up

NEXT_PUBLIC_URL= // Public  URL  of  the  application

```

## Installation and running the app

```

pnpm i

pnpm dev

```

## [GraphQL Server](https://github.com/jjxmonster/graphql-server-ecommerce)