OneStopShop

OneStopShop

Предупреждение Это приложение находится в стадии разработки и не должно считаться готовым производства. Он использует новые технологии, которые еще предстоит быть стабильными, такие как действия сервера и дождь ORM.

О

Онлайн -рынок, созданный с использованием маршрутизатора приложений Next.js, который позволяет пользователям покупать продукты, регистрироваться и перечислять свои собственные продукты на продажу. Пользователи могут создавать профиль продавца, управлять продуктами и собирать оплату.

Ключевые функции:

• Route Next.js App с компонентами сервера React
• Перехваченные маршруты (с параллельной маршрутизацией) для быстрого просмотра продукта и создания нового продукта в администраторе
• Действия сервера для мутаций
• База данных Planetscale MySQL с моросящим ормом
• Загрузка для загрузки файлов typesafe (например, изображения продуктов)
• Аутентификация пользователя с клерком
• Интеграция Stripe Connect для рыночных платежей (включая плату за платформу и выплаты продавцов)

Демо

Чтобы продемонстрировать опыт оформления заказа, оформляйте оформление с номером тестовой карты, такую как 4242 4242 4242 4242 , и используйте любую будущую дату для истечения срока действия и любые 3 цифры для CVC. Вы сможете заказать только с продуктами от продавцов, у которых есть учетная запись Stripe, подключенная к их магазину (например, игрушки Тима). Вы также можете создать свою собственную учетную запись продавца и подключить ее к Stripe для полного опыта.

Домашняя страница

Редактор страницы продукта администратора

Запуск приложения

Следуйте приведенным ниже шагам, чтобы запустить приложение локально:

1. Создайте базу данных MySQL.
2. Создайте локальный файл .env с переменными в соответствии с файлом .env.example .
3. Запустите npm install .
4. Сгенерировать миграцию с npx drizzle-kit generate:mysql . Это создает новую папку, называемую migrations-folder в корне, которая содержит запросы SQL для создания таблиц базы данных. Миграции автоматически синхронизируются с базой данных с помощью функции миграции в db.ts В качестве альтернативы вы можете запустить сгенерированные запросы SQL из миграции вручную через консоль планета и удалить функцию миграции в db.ts
5. Запустите npm run dev , чтобы открыть приложение в режиме разработки.

Вот и все. Теперь вы должны иметь возможность получить доступ к приложению по адресу http://localhost:3000 .

Примечания

• При первом генерировании миграции дождь убедитесь, что migrations-folder в корне пуст или не существует.

Сборник рассказов

Однако в это приложение было добавлено сборник рассказов, а с момента первоначального создания приложения. Несмотря на это, его можно запустить, используя следующие команды:

1. Запустите скрипт сборки Tailwind, чтобы создать выходной файл для классов Taillide (после его запуска и завершения, вам, возможно, придется «убить» терминал (то есть ctrl + c ), чтобы остановить процесс, если он не останавливается автоматически).

   Команда: npm run tailwind

2. Запустите сборник рассказов (он будет использовать выходной файл Taillide, созданный на предыдущем шаге и запустите на http://localhost:6006 ).

   Команда: npm run storybook

Поиск неисправностей

Если вы видите ошибку, связанную с таблицей, не существующей в Planetscale (вероятно, брошен в app/(storefront)/(main)/page.tsx так как это первое использование базы данных), это связано с тем, что база данных не синхронизирована. Пересмотрите шаги «Запуск приложения» и проверьте вкладку «Insights» в Planetscale, чтобы проверить, что запросы создания таблицы выполняли.

Внося

Не стесняйтесь решать проблемы и пиарщики для новых функций/исправлений