Главная страница>Связанные с программированием>AI Исходный код
Скачать

Построить веб -сайт электронной коммерции NextJS, такой как Amazon

  • Технология: NextJs 13, Next Auth 4
  • UI: Tailwind, chart.js, React-chartjs
  • DB: Mongodb, Mongoose
  • Оплата: PayPal, Stripe
  • Хостинг контента: облачный
  • Развертывание: GitHub, Vercel, Mongodb Atlas

Следующая Амазона

Ресурсы

  • Видео на YouTube: https://youtu.be/_iblyr5mrza
  • Демо-сайт: https://next-tailwind-amazona.vercel.app
  • Исходный код: https://github.com/basir/next-tailwind-amazona
  • Полный курс: basir.thinkific.com

Чему вы узнаете

  • Основы NextJS, такие как настройка проекта, навигация между страницами и извлечением данных
  • NextJS расширенные темы, такие как динамическая маршрутизация, оптимизация изображений, SSG и SSR
  • Tailwind CSS Framework для создания адаптивного веб -сайта с использованием пользовательской темы, анимации и каруселей
  • ReactJS, включая разлагающиеся компоненты, контекст API и крючки
  • Следующий пакет AUTH для аутентификации клиентов и пользователей администратора
  • MongoDB и Mongoose для сохранения и извлечения данных, таких как продукты, заказы и пользователи
  • API Developer PayPal для онлайн -платежа
  • Развернуть веб -приложения на таких серверах, как Vercel и NetLify

Полный курс

Получите этот курс со скидкой на 90% на Thinkific: https://basir.thinkific.com/courses/build-ecommerce-website-like-amazon-by-next-js?coupon=save90

Бежать локально

  1. Клон репо 

     $ git clone [email protected]:basir/next-tailwind-amazona.git
 $ cd next-tailwind-amazona

  2. Создать .ENV -файл

    • дубликат .env.Example и переименовать его в .env

  3. Настройка Mongodb

    • Местный монгодб
    • Установите его отсюда
    • В .env file update mongodb_uri = mongodb: // localhost/amazon
    • Или Atlas Cloud Mongodb
    • Создать базу данных по адресу https://cloud.mongodb.com
    • В .env file update mongodb_uri = mongodb+srv: // your-db-connection

  4. Установить и запустить 

      npm install
  npm run dev

  5. Данные семян

    • Запустите это в браузере: http: // localhost: 5000/api/seed
    • Он возвращает электронную почту и пароль администратора и 6 образцов продуктов

  6. Администратор. Вход

    • Запустите http: // localhost: 3000/login
    • Введите электронную почту и пароль администратора и нажмите «Вход»

Уроки

  1. Введение
  2. Установить инструменты
  3. Создать следующее приложение
  4. Публикуйте в GitHub
  5. Создайте макет веб -сайта
    1. Создать компонент макета
    2. Добавить заголовок
    3. Добавьте основной раздел
    4. Добавить нижний колонтитул
    5. Добавьте классы Tailwind
  6. Перечислите продукты
    1. Добавить data.js
    2. Добавить изображения
    3. рендеринг продуктов
  7. Создайте детали продукта
    1. Создать страницу продукта
    2. Создать 3 столбца
    3. Показать изображение в первом столбце
    4. Показать информацию о продукте во втором столбце
    5. Показать Add to Cart Action на третьем столбце
    6. Добавить стили
  8. Ручка добавить в корзину
    1. Определите контекст React
    2. Определить предметы тележки
    3. Создать действие добавить в корзину
    4. Добавить редуктор
    5. Создать провайдера магазина
    6. ручка добавить в корзину кнопку
  9. Создать страницу корзины
    1. Создать cart.js
    2. Используйте контекст, чтобы получить элементы тележки
    3. Перечислите элементы в предметах корзины
    4. перенаправить экран телеги после добавления в корзину
  10. Обновить количество в телеге
    1. Добавить поле для количества
    2. обрабатывать смену выбора
  11. Сохранить предметы корзины
    1. Установите пакет JS-Cookie
    2. Сохранить и повторно подать корзину в куки -файлах
  12. Создать форму для входа в систему
    1. Установить форму крючка React
    2. Создайте поля ввода
    3. Добавьте кнопку входа в систему
  13. Подключитесь к MongoDB
    1. Установите мангуз
    2. Установите MongoDB или используйте MongoDB Atlas
    3. Сохранить URL -адрес в файле .env
    4. Создать файл UTILS DB
    5. Создайте образцы пользователей
  14. Создать API для входа в систему
    1. Установите следующее-авто
    2. Создать NextAuth.js
    3. реализовать Signin
    4. Используйте Signin в форме входа в систему
  15. Добавьте меню пользователя
    1. Проверьте аутентификацию пользователя
    2. Установите без головы
    3. Показать меню пользователя
  16. Создайте экран доставки
    1. Отображение адресов адреса
    2. Сохранить адрес в контексте
  17. Создать экран метода оплаты
    1. Диспалические способы оплаты
    2. Сохранить способ оплаты в контексте
  18. Продукты семян образцов
    1. Создать модель продукта в мангузе
    2. Вставьте образцы продуктов в MongoDB
  19. Загрузка продуктов Mongodb
    1. Загрузите продукты на домашней странице от MongoDB
    2. Загрузите продукты на странице продукта от MongoDB
    3. Используйте API продукта, чтобы проверить счет на складе в Add to Cart
  20. Создать экран заказа мест
    1. отображать адрес доставки
    2. отображать способ оплаты
    3. Показать элементы заказа
    4. Имплектация Создайте порядок
  21. Создать экран заказа
    1. Реализовать API Backend для получения информации о заказе
    2. Загрузить данные заказа из бэкэнда
    3. отображать данные заказа
  22. Создать экран регистрации
    1. Добавить API регистрации
    2. Создать страницу регистрации
    3. Позвоните в API в форме.
  23. Заказ на оплату PayPal
    1. Добавьте кнопку PayPal
    2. обрабатывать оплату
    3. Создать бэкэнд API
    4. Обновить состояние заказа
  24. Создать экран истории заказа
    1. Создайте мой API заказа
    2. Создать компонент истории заказа
    3. Принесите заказы и отображайте их
  25. Публикуйте на Vercel
    1. Создать учетную запись Vercel
    2. Подключитесь к GitHub
    3. Установите следующий Auth и Mongodb DB в Env Vars
    4. push -код в GitHub
  26. Обновите профиль пользователя
    1. Создать экран профиля
    2. Показать информацию пользователя
    3. обрабатывать информацию об обновлении пользователя
  27. Создайте административную панель
    1. Создать меню администратора
    2. Создайте экран приборной панели
    3. Реализовать ADPI API
  28. Список заказов для администратора
    1. Создать страницу заказов
    2. Создать заказы API
    3. Используйте API на странице
  29. Доставить заказ для администратора
    1. Создать доставку API
    2. Добавить кнопку доставки
    3. Реализовать обработчик клика
  30. Перечислите продукты для администратора
    1. создать страницу продуктов
    2. Создание продуктов API
    3. Используйте API на странице
  31. Создать страницу редактирования продукта
    1. Создать страницу редактирования
    2. Создать API для продукта
    3. Показать данные о продукте в форме
  32. Загрузите изображение продукта
    1. Создайте облачную учетную запись
    2. Получите облачные ключи
    3. Создать загрузку API
    4. Загрузить файлы на странице редактирования
  33. Создать и удалять продукты
    1. Добавить кнопку создания продукта
    2. Создайте API нового продукта
    3. Добавить обработчик для удаления
    4. Реализуйте удалить API
  34. Перечислите пользователей для администратора
    1. создать страницу пользователей
    2. Создайте пользовательские API
    3. Используйте API на странице
  35. Добавить карусель
    1. Создайте избранные продукты
    2. подавать данные карусели
    3. Показать популярные продукты
  36. Создать страницу поиска
    1. Создать фильтры
    2. Перечислите продукты
    3. Показать фильтры
Расширять
Дополнительная информация
Связанные приложения
Рекомендуем вам
Связанные новости Все