,

Building an E-commerce Website from Scratch with React and Node.js using the PERN stack (PostgreSQL, Express, React.js, and Node.js)

Posted by


Создание интернет магазина с нуля с использованием PERN стека

В этой статье мы рассмотрим процесс создания интернет магазина с использованием PERN стека. PERN соответствует первой букве каждой из следующих технологий: PostgreSQL, Express.js, React.js и Node.js. Этот стек применяется для разработки полноценных веб-приложений.

Шаг 1: Установка и настройка PostgreSQL

Первым шагом будет установка и настройка PostgreSQL, мощной реляционной базы данных. Нам потребуется создать базу данных для нашего интернет магазина и настроить доступы.

Шаг 2: Создание API с использованием Express.js

Следующим шагом будет создание API для нашего интернет магазина с использованием Express.js. Этот шаг включает настройку маршрутов, обработку запросов и взаимодействие с базой данных PostgreSQL.

Шаг 3: Разработка фронтенда с React.js

Затем мы перейдем к разработке фронтенда нашего интернет магазина с использованием React.js. Мы создадим компоненты, управление состоянием и подключение к нашему API.

Шаг 4: Серверная часть с использованием Node.js

В конечном шаге мы приступим к созданию серверной части нашего интернет магазина с использованием Node.js. Мы будем обрабатывать запросы от фронтенда, взаимодействовать с базой данных и обеспечивать безопасность приложения.

Заключение

PERN стек является мощным инструментом для создания интернет магазинов и других веб-приложений. Он предоставляет нам все необходимые инструменты для полноценной разработки, включая базу данных, серверную и клиентскую части. Используя PostgreSQL, Express.js, React.js и Node.js, мы можем создать отличное веб-приложение.

0 0 votes
Article Rating
20 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Softer hack_android
1 year ago

29:26

HooTraS
1 year ago

возникла проблема при первом запуске, когда прописываем всё подключение через const

KUROMI
1 year ago

Огромное спасибо за видео ролик!!!

Костантин Быков
1 year ago

Ребят, всем привет! Застрял на 23 минуте, перепроверил код 10 раз, всё равно не создаются таблицы в БД. Делаю на VS Code. Если у кого-то была такая проблема, подскажите, как решить, может установить что нибудь дополнительно надо

Gev Moses
1 year ago

А есть курс для совсем новичков ?

Юрий Мерч
1 year ago

Отличный урок, спасибо тебе!

Pureshka
1 year ago

Здравствуйте, спасибо за ролик, очень помогло в разработке.
Сейчас правда осталась одна проблема, может кто поможет, в общем, уже очень долгое время пытаюсь сделать редактор для характеристик info. Создание в ролике работает по принципу, если нажал на "добавить характеристику", то вызывается функция, которая создает массив информации сразу и присваивает номер полям title и description, но чтобы сделать редактор характеристик такая логика не подходит, так как если выводить их через device.devices.map в Form.Control, то это просто поля, которые не считываются нигде, поэтому при обновлении будем получать пустой массив. Если использовать добавленную константу, допустим deviceInfo.map, то можно добавлять новые характеристики, но нельзя вывести старые, ну или может у меня не вышло, в итоге новые переписывают старые по моему коду в функции update на Backend.
Вдруг сталкивались с зтим или есть идеи как это реализовать, напишите пожалуйста хотя бы кратко, уже сил нет🙏

Alexandr Klokov
1 year ago

Это восхитительный урок!
Спасибо большое
Отдельное спасибо за то, что делишься опытом, особенно, в такой доступной форме

pasha dotcenko
1 year ago

спасибо большое за столь полезный и информативный урок. мне было приятно , что я смог в некоторых моментах оптимизировать ваш код ( я понимаю,что вы намеренно так писали для лучшего объяснения материала ) спасибо вам за это. ведь в такие момент я понимаю , что могу что-то делать самостоятельно , но с оглядкой на старшего товарища. я реализовал полностью ваше домашнее задание , но и проект сделал чуть с другими технологиями. я использовал : TS/MySql/Redux Toolkit.

Samariddin Kobilov
1 year ago

Очень приятно❤

LKRN
1 year ago

Пока смотрю, раз 5 спускался глазами к лайку, но понимал, что он уже стоит) Почему разработчики ютуба не предусмотрели функцию множественного лайка специально для Ulbi🤔

LKRN
1 year ago

Слишком мало лайков для такого контента. У тебя должен быть минимум миллион подписчиков, ведь ты лучший в своей нише. Я надеюсь, что рано или поздно твой канал выстрелит и просмотры с подписчиками поплывут рекой, ведь ты как никто другой этого заслуживаешь) Удачи тебе!)

Redice
1 year ago

благодарю, величайший

Сардориус
1 year ago

sjdf

Olga Y
1 year ago

Пока первую половину видео изучаю. Разбираюсь с backend частью. Возник вопрос при запросе информации по device. При get запросе, например, http://localhost:5000/api/device/2, выходит ошибка: столбец info.deviceId не существует. Пытаюсь подкорректировать модель DeviceInfo, но выходит та же ошибка. Хотя писали здесь коммент: "<…>на серверной части в модуле models при создании DeviceInfo забыли добавить в таблицу строчку deviceId<…>". Хотя на видео (54 мин) – все ровно отрабатывает. Так все же как будет верно? Что нужно подправить?

Varik
1 year ago

Сталкивался ли кто-нибудь с тем, что при обновлении страницы, пользователь автоматически становится авторизованным? Как это исправить?

Tigos
1 year ago

Дошёл до конца. Лучший ролик, отличный пинок в мир приложений. Спасибо

ВОДИТЕЛЬ НЛО
1 year ago

Установил jwt-decode. Терминал выдал ошибку: 8 vulnerabilities (2 moderate, 6 high)

To address all issues (including breaking changes), run:

npm audit fix –force

Run `npm audit` for details. Сайт упал. Кто-то знает как это фиксить?

Running bath attendant programmer
1 year ago

С 2:07:06 начались проблемы. И менял на api/user и запятые точки проверил. Ругается что нет страницы. И я начал ругаться😅 У кого аналогичная проблема была? Как решить ее? Обидно уже конец близок а на неделю споткнулся на этой ошибке😵‍💫

Илья Романовский
1 year ago

Где вы учились?