Создание полнофункционального интернет-магазина с CMS на Next.js, NestJS и Prisma с авторизацией через Google и Yandex и панелью управления.
В этом видео мы создадим полнофункциональный интернет-магазин с CMS, используя современный стек Next.js, NestJS и Prisma. Также будет реализована авторизация через Google и Yandex, что обеспечит пользователям удобный и безопасный способ входа в систему. Результатом станет высокопроизводительное и масштабируемое e-commerce решение с удобной панелью управления контентом.
Мы начинаем наше путешествие в создание интернет-магазина. В этой главе мы рассмотрим основные технологии, необходимые для разработки и обсудим стэк технологий
В этой главе мы настроим Nest.js для разработки интернет-магазина. Мы также изучим, как создавать схемы с помощью Prisma, удобного ORM для работы с базами данных.
В этой главе мы рассмотрим, как настроить авторизацию через аккаунты Google и Яндекс в нашем приложении на Nest.js. Мы также изучим использование JWT токенов для безопасной аутентификации пользователей.
В этой главе мы разработаем сущность для управления магазинами с помощью Nest.js и Prisma, настроив структуру данных для хранения информации о магазинах.
В этой главе мы создадим сущность для управления цветами и категориями товаров в нашем приложении. Будет настроена база данных для хранения различных цветов, их свойств, а также категорий и их атрибутов, что позволит удобно управлять вариациями цветов и систематизировать ассортимент продуктов для эффективного управления.
В этой главе мы создадим сущность для загрузки файлов в нашем приложении.
В этой главе мы разработаем сущность для управления товарами в интернет-магазине. Будет настроена база данных для хранения информации о продуктах, их характеристиках и связях с другими сущностями, обеспечивая гибкость и эффективность управления ассортиментом товаров.
В этой главе мы создадим сущность для управления отзывами пользователей. Будет настроена база данных для хранения отзывов о продуктах или услугах, что позволит эффективно управлять обратной связью от пользователей и их оценками продуктов.
В этой главе мы реализуем сущность для управления заказами . Будет настроена база данных для хранения информации о заказах, их статусах и связанных данных, что обеспечит эффективное управление процессом заказов в приложении. Оформление заказов будет реализовано с использованием платёжной системы YooKassa.
В этой главе мы реализуем сущность для сбора статистики в нашем интернет-магазине. Мы настроим систему для автоматического сбора данных о просмотрах и покупках товаров.
В этой главе мы настраиваем фронтэнд нашего интернет-магазина с помощью Next.js. Устанавливаем необходимые инструменты и настраиваем окружение для разработки.
В этой главе мы опишем все типы данных, используемые для взаимодействия с сервером. Рассмотрим, как они помогают организовать структуру данных и обеспечить корректную работу приложения.
В этой главе мы рассмотрим, как использовать Axios интерсепторы для управления запросами. Интерсепторы позволяют нам добавлять функциональность к запросам, изменять их поведение и обрабатывать ответы.
В этой главе мы создадим страницу авторизации. Будет реализована простая и удобная форма входа, а также добавлена возможность авторизации через Google и Яндекс.
В этой главе мы создаем layput для страницы панели управления магазина в нашем интернет-магазине. Мы реализуем удобную навигацию для управления магазином и его контентом, а также добавим возможность переключения между разными магазинами пользователя.
В этой главе мы создадим страницу статистики вашего интернет-магазина. На ней будут отображаться продажи за месяц и список последних покупателей. Это поможет вам анализировать производительность магазина и принимать решения для его развития.
В этой главе мы создадим страницу с настройками магазина. Разработаем удобный интерфейс, позволяющий пользователям легко настраивать параметры своего магазина.
В этой главе мы создадим таблицу для отображения товаров с помощью компонента Shadcn. Пользователи смогут видеть основные характеристики товаров и использовать функции сортировки и фильтрации для удобного управления.
В этой главе мы разработаем страницу для добавления и редактирования товаров. Интерфейс будет простым и интуитивно понятным, с полями для ввода всех необходимых данных и валидацией для обеспечения корректности информации.
В этой главе мы расширим возможности панели управления магазином, предоставив пользователям инструменты для управления ключевыми аспектами, такими как отзывы, категории и цвета. Это позволит им эффективно поддерживать актуальность и структуру каталога товаров, а также контролировать отзывы покупателей.
В этой главе мы создадим основной layout для сайта нашего интернет-магазина. Основной layout будет использоваться на всех страницах сайта, кроме страниц управления магазинами.
В этой главе мы создадим главную страницу интернет-магазина. Мы добавим секцию Hero с лозунгом и описанием магазина, а также компонент каталога с товарами.
В этой главе мы создадим страницу с категориями, каталогом товаров и поиском с помощью компонента Catalog, позволяя пользователям легко находить интересующие товары и просматривать избранное. Также в личном кабинете будет отображаться история всех заказов, совершенных пользователем.
В этой главе мы создадим страницу с товаром, которая будет отображать ключевую информацию, включая название, цену, описание, категорию, цвет и средний рейтинг, рассчитываемый по отзывам. Пользователи смогут оставлять отзывы на этой же странице. Также будут представлены похожие товары и галерея с изображениями, что поможет покупателям лучше оценить продукт.
В заключительной главе мы разработаем корзину с помощью Redux, где пользователи смогут добавлять, удалять и изменять количество товаров, а также видеть итоговую стоимость заказа.
Отслеживайте прогресс, проходите уроки в удобном темпе и получайте максимум от курса
Начать просмотр