Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yashvarmora2306/e-commerce-dashboard-cms
https://github.com/yashvarmora2306/e-commerce-dashboard-cms
cloudinary nextjs prisma-orm shadcn-ui tailwindcss typescript zod zustand
Last synced: 3 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/yashvarmora2306/e-commerce-dashboard-cms
- Owner: YashVarmora2306
- Created: 2024-12-05T13:59:27.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2024-12-29T09:15:25.000Z (about 1 month ago)
- Last Synced: 2024-12-29T10:20:02.086Z (about 1 month ago)
- Topics: cloudinary, nextjs, prisma-orm, shadcn-ui, tailwindcss, typescript, zod, zustand
- Language: TypeScript
- Homepage:
- Size: 283 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
---
# E-commerce Application
This is a comprehensive **E-commerce Application** consisting of two main components:
1. **E-commerce Store**: A customer-facing store to browse products, manage cart, and checkout.
2. **E-commerce Admin Dashboard**: A management interface for administrators to control the store's settings, products, orders, and more.
Both components are built using **Next.js**, **TypeScript**, and **Tailwind CSS**.
---
## Table of Contents
- [Overview](#overview)
- [Getting Started](#getting-started)
- [Prerequisites](#prerequisites)
- [Installation](#installation)
- [Environment Variables](#environment-variables)
- [Running the Development Servers](#running-the-development-servers)
- [Navigation](#navigation)
- [E-commerce Store](#e-commerce-store)
- [E-commerce Admin Dashboard](#e-commerce-admin-dashboard)
- [Features](#features)
- [Technologies Used](#technologies-used)
---
## Overview
### E-commerce Store
The **E-commerce Store** allows users to:
- Browse a wide range of products.
- Filter products by category, size, and color.
- Add products to a shopping cart and proceed to checkout.
- Enjoy a responsive design that works seamlessly on both mobile and desktop devices.
### E-commerce Admin Dashboard
The **E-commerce Admin Dashboard** enables administrators to:
- Manage multiple stores and their settings.
- Add, edit, and delete products, categories, sizes, and colors.
- View and manage orders placed in the store.
- Utilize user authentication for secure access to the dashboard.
---
## Getting Started
### Prerequisites
Ensure you have the following installed on your machine:
- **Node.js** (v14 or later)
- **npm**
### Installation
```bash
git clone https://github.com/YashVarmora2306/e-commerce-dashboard-cms
cd e-commerce-dashboard-cms
```
---
## Navigation
### E-commerce Store
- **Homepage**: Displays featured products and categories.
- **Product Page**: Detailed view of individual products with options to add to cart.
- **Cart Page**: View and manage items in the shopping cart.
- **Checkout Page**: Complete the purchase process.
For more details, refer to the [E-commerce Store](https://github.com/YashVarmora2306/e-commerce-dashboard-cms/tree/main/ecommerce-store#readme).
### E-commerce Admin Dashboard
- **Dashboard**: Overview of store performance and key metrics.
- **Products Management**: Add, edit, or delete products.
- **Categories Management**: Create and manage product categories.
- **Orders Management**: View and manage customer orders.
- **Settings**: Configure store settings and user authentication.
For more details, refer to the [E-commerce Admin Dashboard](https://github.com/YashVarmora2306/e-commerce-dashboard-cms/tree/main/ecommerce-admin#readme).
---
## Features
### E-commerce Store
- User-friendly interface for browsing products.
- Product filtering by category, size, and color.
- Shopping cart functionality with add/remove items.
- Modal previews for product details.
- Responsive design for mobile and desktop views.
- Stripe integration for checkout.
### E-commerce Admin Dashboard
- Manage multiple stores and their settings.
- Add, edit, and delete products, categories, sizes, and colors.
- View and manage orders placed in the store.
- Secure user authentication with Clerk.
- Manage payment integrations with Stripe.
---
## Technologies Used
- **Next.js**: A React framework for server-side rendering and static site generation.
- **TypeScript**: For type safety and better development experience.
- **Tailwind CSS**: For styling and responsive design.
- **Zustand**: For state management.
- **Axios**: For making HTTP requests.
- **React Hot Toast**: For notifications.
- **Clerk**: For authentication and user management.
- **Cloudinary**: For image and media management.
- **Stripe**: For handling payments and checkout.
---