Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/nayak-nirmalya/ecommerce-cart-nextjs

A Modern FullStack E-Commerce Shop Built with Next.js 14 App Router, PostgreSQL, TypeScript, TailwindCSS, Clerk, shadcn-ui & DrizzleORM.
https://github.com/nayak-nirmalya/ecommerce-cart-nextjs

clerk-auth drizzle-orm framer-motion neondb nextjs14 postgresql reactjs shadcn-ui tailwindcss typescript

Last synced: 9 days ago
JSON representation

A Modern FullStack E-Commerce Shop Built with Next.js 14 App Router, PostgreSQL, TypeScript, TailwindCSS, Clerk, shadcn-ui & DrizzleORM.

Host: GitHub
URL: https://github.com/nayak-nirmalya/ecommerce-cart-nextjs
Owner: nayak-nirmalya
License: mit
Created: 2024-08-16T05:02:23.000Z (about 2 months ago)
Default Branch: master
Last Pushed: 2024-08-28T04:33:25.000Z (about 1 month ago)
Last Synced: 2024-09-18T12:12:51.040Z (17 days ago)
Topics: clerk-auth, drizzle-orm, framer-motion, neondb, nextjs14, postgresql, reactjs, shadcn-ui, tailwindcss, typescript
Language: TypeScript
Homepage: https://profile-fyi-task-chi.vercel.app
Size: 614 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# A Modern FullStack E-Commerce Shop with Cart, Checkout, Authentication, and More!

Built with the Next.js 14 App Router, PostgreSQL, TypeScript, TailwindCSS, Clerk, shadcn-ui & DrizzleORM.

## Features

- 🛠️ Complete shop built from scratch in Next.js 14
- 🎨 Responsive layout
- 🌟 Clean, modern UI on top of shadcn-ui and motion-primitives
- 🔑 Authentication using Clerk
- 🫎 Micro animations
- 🚀 Use of Server/Client componnents archhitecture with React Streaming
- 👤 User sync to DB via Webhooks
- 🩻 Loading Skeletons & Spinner with Toast for great UX
- 📀 Site Metadata with OG:Image for SEO
- ♨️ Data mutation with Server Actions
- 💵 Format to Local INR Indian Rupee
- 🦋 Properly formatted codebase with Prettier & eslint
- 🛒 Add/Remove product by one, delete item
- ⌨️ 100% written in TypeScript

## Getting Started

### Prerequisites

**Node version 20.x.x**

### Cloning the Repository

```shell
git clone https://github.com/nayak-nirmalya/ecommerce-cart-nextjs.git
```

### Install Packages

```shell
pnpm install
```

### Setup .env File

```js
DATABASE_URL=

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
CLERK_WEBHOOK_SECRET=

NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_SIGN_IN_FORCE_REDIRECT_URL="/products"
NEXT_PUBLIC_CLERK_SIGN_UP_FORCE_REDIRECT_URL="/products"
```

### Database Setup

```shell
pnpm db:generate
pnpm db:migrate
```

### Run App Locally

```shell
pnpm dev
```

## Auth Flow

![Auth Flow](public/clerk-solution-arch.avif)

## Available commands

Run commands with pnpm `pnpm [command]`