c shopping
Minimum MVP Publishing
Всем привет! Добро пожаловать в C-Shopping, путешествие в мир электронной коммерции, обнародовавший технологические чудеса. Я-"Ji Xiaopeng", автор C-Shopping с открытым исходным кодом, и сегодня я познакомлю вас с платформой электронной коммерции с открытым исходным кодом на основе новейших технологий. Давайте рассмотрим вместе!
Проект в прямом эфире Демо -ссылки:
Project Gateway: https://github.com/huanghanzhilian/c-shopping.
React Native Mobile App Application:
Project Gateway: https://github.com/huanghanzhilian/c-shopping-rn.
Если вы найдете это полезным, пожалуйста, дайте мне звезду. Это будет отличная поддержка.
Фон:
Намерение:
Решить проблемы, упомянутые в фоновом режиме.
Цель:
Создайте полную, хорошо разработанную экосистему, подходящую для Интернета.
Во-первых, давайте углубимся в технологию C-шоппинга. Я принял серию передовых технологий, в том числе Next.js, Tailwind CSS, безголовный пользовательский интерфейс, Redux-Toolkit-RTK Query, JWT и Docker, среди других. Это гарантирует, что этот проект является не только эффективным, но и очень масштабируемым. Мы стремимся решить некоторые болевые точки традиционных платформ электронной коммерции: отсутствие эстетики, неадекватная адаптация к различным устройствам и монотонный интерфейс, среди прочего. Принимая новейшие технологии и принципы дизайна, C-шоппинг создает полностью отзывчивый опыт технической разработки для пользователей.
C-шоппинг приоритет пользователю. Наш интерфейс не только красивый, но и отзывчивый, что позволяет пользователям легко наслаждаться покупками на любом устройстве. Функции личного центра и управления заказами также делают ваш опыт покупок более персонализированными и удобными.
Одним из основных моментов C-шоппинга является принятие серии передовых технологий, в том числе Next.js, Taillid CSS, безголовный пользовательский интерфейс, redux-toolkit-rtk-запрос и т. Д., Предоставляя пользователям максимальную производительность и опыт. Мы не только сосредоточены на эстетике, но и стремимся к превосходству в технологиях.
Next.js управляемый молниеносным опытом
C-Shopping использует Next.js, что означает, что не только скорость загрузки веб-страницы невероятно быстрая, но также поддерживает рендеринг на стороне сервера, обеспечивая беспрецедентный уровень плавности.
? Стильный дизайн CSS CSS
Используя Tailwind CSS, C-шоппинг вводит чувство стиля. Каждый интерфейс изысканный, что делает покупки визуальным праздником.
? Безголова свобода и гибкость пользовательского интерфейса
C-Shopping выбирает стиль пользовательского интерфейса без головы, предоставляя пользователям больше свободы во время процесса покупок. Больше не ограничивается традиционными рамками пользовательского интерфейса, он открывает больше дверей для настройки.
? Безопасность JWT без забот
Безопасность имеет первостепенное значение! JWT используется для аутентификации пользователей, обеспечивая самую сильную гарантию для вашего поведения покупок, что позволяет вам делать покупки с уверенностью.
? Docker Perfect Deployment
C-шоппинг охватывает Docker, что делает развертывание проекта невероятно простым. Контейнеризация позволяет всем проекту беспрепятственно работать в разных средах.
Redux Toolkit и RTK Query State Management Art
C-шоппинг использует Redux Toolkit и RTK-запрос, что делает управление государством более расслабленным и приятным. Вы можете лучше отслеживать поток данных в приложении, обеспечивая стабильность покупок.
Теперь давайте посмотрим на некоторые основные особенности C-Shopping. От чистой навигации и дисплеев продуктов до удобных функций поиска и корзины для покупок, каждая деталь была тщательно разработана, чтобы предоставить пользователям приятный опыт покупок.
Пользовательская сторона
| Модуль | Настольные устройства | Мобильные устройства |
|---|---|---|
| Дом | ||
| Вторичная категория | ||
| Категория третьего уровня | ||
| Детали продукта | ||
| Авторизоваться | ||
| Зарегистрировать | ||
| Поиск | ||
| Корзина | ||
| Проверить | ||
| Пользовательский профиль | ||
| Мои заказы | ||
| Мои обзоры | ||
| Управление адресами | ||
| Недавние посещения |
Администратор
| Модуль | Настольные устройства | Мобильные устройства |
|---|---|---|
| Авторизоваться | ||
| Административный центр | ||
| Управление пользователями | ||
| Управление категориями | ||
| Дерево управления категории | ||
| Управление спецификацией | ||
| Управление продуктом | ||
| Управление заказами | ||
| Обзор управление | ||
| Управление слайдером | ||
| Управление баннером |
Структура проекта C-шоппинга:
Объяснение ключевой структуры:
? Приложение : основной код приложения
? Компоненты : многоразовые компоненты реагирования
? Помощники : вспомогательные функции и инструменты
? крючки : настраиваемые крючки React
? Модели : определения модели данных
? Общественность : Статические ресурсы, такие как изображения, шрифты и т. Д.
? Храните : конфигурация, связанная с управлением государством Redux
? Стили : файлы стиля
? Утилиты : Общие коммунальные услуги
...
Эта структура предназначена для того, чтобы сделать проект организованным, простым в обслуживании и масштабируемым. Каждый раздел разделен на основе
Функциональность и обязанности, облегчая для членов команды понять и сотрудничать.
Среда развития
Клонировать или загрузить репозиторий, запустив следующую команду в терминале:
git clone https://github.com/huanghanzhilian/c-shopping.git
Установите зависимости проекта с помощью NPM или пряжи:
npm install
или
yarn
Пожалуйста, создайте новый файл .env из файла .env.example в каталоге Project Root, чтобы определить необходимые переменные среды. Этот шаг имеет решающее значение (для загрузки изображения на OSS):
NEXT_PUBLIC_ACCESS_TOKEN_SECRET=<your token secret>
NEXT_PUBLIC_ALI_REGION=<your ali endpoint>
NEXT_PUBLIC_ALI_BUCKET_NAME=<your ali bucket name>
NEXT_PUBLIC_ALI_ACCESS_KEY=<your ali access key>
NEXT_PUBLIC_ALI_SECRET_KEY=<your ali secret key>
NEXT_PUBLIC_ALI_ACS_RAM_NAME=<your ali acs:ram name>
NEXT_PUBLIC_ALI_FILES_PATH=<your ali files pathname>
Установите MongoDB на локальную машину.
Запустите проект:
npm run dev
Зарегистрируйте учетную запись:
http://localhost:3000/register
После создания учетной записи найдите свою учетную запись в базе данных и измените root поле для True и поля role для администратора. Это предоставляет вам доступ ко всем функциям административной панели управления:
mongo
use choiceshop
db.users.update({name:"admin"},{$set:{role:"admin"}})
db.users.update({name:"admin"},{$set:{root:true}})
Вход администратора: http: // localhost: 3000/admin
В MongoDB создайте корневую категорию:
mongo
use choiceshop
db.categories.insert({
"name" : "Featured Items",
"slug" : "choiceshop",
"image" : "http://huanghanzhilian-test.oss-cn-beijing.aliyuncs.com/shop/upload/image//icons/zHle_bmdM_dhu2K938MMM.webp",
"colors" : {
"start" : "#EF394E",
"end" : "#EF3F55"
},
"level" : 0
})
Docker развертывание
Справочник Project Root уже настроен с Docker Compose. После установки Docker просто запустите развертывание:
docker compose up -d --build
Я технологический исследователь, нетерпеливый ученик и решатель проблем.
我是一个技术的探索者 ， 一个渴望学习的人 一个解决问题的人。
Следуйте нашей официальной учетной записи WeChat для получения дополнительной информации. Не стесняйтесь предоставлять какие -либо отзывы или предложения, открыв проблему или оставив сообщение на официальной учетной записи. Вы также можете добавить меня в WeChat для дальнейшего общения.
| Мой официальный аккаунт WeChat | Мой WeChat |
|---|---|
Грань
Авторское право (C) 2024 Jipeng Huang
C-Shopping-это проект с открытым исходным кодом, и мы приветствуем больше разработчиков, чтобы присоединиться к нашему сообществу. Вы можете найти исходный код проекта в нашем репозитории GitHub, предложить улучшения или внести свой вклад в разработку.
Если вы заинтересованы в проекте, не стесняйтесь присоединиться к нашему сообществу и внести свой вклад в рост проекта.
