Полноценная электронная коммерция + информационная панель и CMS: Next.js 13 App Router, React, Tailwind, Prisma, MySQL, 2023 г.
Для ДЕМО используйте тестовые карты Stripe Testing.
Это репозиторий для полнофункциональной электронной коммерции + информационной панели и CMS: Next.js 13 App Router, React, Tailwind, Prisma, MySQL.
Ключевые особенности:
- Мы будем использовать пользовательский интерфейс Shadcn для администратора!
- Наша панель администратора будет служить одновременно CMS, администратором и API!
- Вы сможете контролировать несколько продавцов/магазинов с помощью этой единой CMS! (Например, у вас может быть «Магазин обуви», «Магазин ноутбуков» и «Магазин костюмов», и наша CMS будет генерировать маршруты API для всех них индивидуально!)
- Вы сможете создавать, обновлять и удалять категории!
- Вы сможете создавать, обновлять и удалять товары!
- Вы сможете загружать несколько изображений товаров и менять их, когда захотите!
- Вы сможете создавать, обновлять и удалять такие фильтры, как «Цвет» и «Размер», а затем сопоставлять их в форме создания «Товар».
- Вы сможете создавать, обновлять и удалять «рекламные щиты», представляющие собой большие тексты вверху страницы. Вы сможете прикрепить их к одной категории или использовать отдельно (наш администратор генерирует API для всех этих случаев!)
- Вы сможете осуществлять поиск по всем категориям, продуктам, размерам, цветам, рекламным щитам с нумерацией страниц!
- Вы сможете контролировать, какие продукты будут «представлены», чтобы они отображались на главной странице!
- Вы сможете видеть свои заказы, продажи и т. д.
- Вы сможете увидеть графики своих доходов и т. д.
- Вы научитесь аутентификации клерка!
- Создание заказа
- Полоса оформления заказа
- Полосатые вебхуки
- MySQL + Призма + PlanetScale
Предварительные условия
Версия узла 14.x
Клонирование репозитория
git clone https://github.com/vishwavinoth/dropship-admin.git
Установить пакеты
Настройка файла .env
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY =
CLERK_SECRET_KEY =
NEXT_PUBLIC_CLERK_SIGN_IN_URL = / sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL = / sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL = /
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL = /
# This was inserted by `prisma init` :
# Environment variables declared in this file are automatically made available to Prisma .
# See the documentation for more detail : https : / / pris . ly / d / prisma - schema #accessing - environment - variables - from - the - schema
# Prisma supports the native connection string format for PostgreSQL , MySQL , SQLite , SQL Server , MongoDB and CockroachDB .
# See the documentation for all the connection string options : https : / / pris . ly / d / connection - strings
DATABASE_URL = ''
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME = ""
STRIPE_API_KEY =
FRONTEND_STORE_URL = http : //localhost:3001
STRIPE_WEBHOOK_SECRET =
Подключитесь к PlanetScale и нажмите Prisma
npx prisma generate
npx prisma db push
Запустить приложение
Доступные команды
Запуск команд с помощью npm npm run [command]
команда | описание |
---|
dev | Запускает экземпляр приложения для разработки. |