A full-stack demo e-commerce app where users can browse products, add them to cart, and place orders.
Built with Next.js, TypeScript, and Tailwind CSS, with authentication powered by Clerk.
- 🔐 Clerk Authentication – Users can sign up/login with email, Google, or GitHub.
- 🛍️ Shopping Flow – Browse products (headphones, phones, laptops), add to cart, and place orders.
- 📦 Order Management –
- Buyers: View all your placed orders in My Orders.
- Sellers: Access the Seller Dashboard to manage products and track incoming orders.
- 🎛️ Seller Dashboard – Manage product listings and see client orders.
- 🎉 User-Friendly UX – Integrated React Hot Toast for smooth notifications.
- 🎨 Modern UI – Responsive design with Tailwind CSS.
- Next.js – React framework
- TypeScript – Strongly typed JS
- Tailwind CSS – Utility-first CSS
- Clerk – Authentication and user management
- React Hot Toast – Toast notifications
- Clone the repository:
git clone https://github.com/yourusername/ecommerce-store.git
cd ecommerce-store- Install dependencies:
npm install
# or
yarn install- Create a .env.local file and add your Clerk keys:
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_key_here
CLERK_SECRET_KEY=your_key_here- Run the development server:
npm run dev
# or
yarn dev- Open http://localhost:3000 in your browser.
- Guests can browse products freely.
- Sign-up/Login Required to place orders.
- Sellers can access a demo dashboard to manage products and view client orders.
This project is open-source and available under the MIT License.
This is a Next.js project bootstrapped with create-next-app.
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.