mrrangerr

сделать ::before элемент, в нем задать path или простой повернутый треугольник

как вариант: https://jsfiddle.net/hasalex/d6g0eup5/

Можете воспользоваться библиоткеой Immer
пример

!!!очень плохо так делать, но вам важен порядок, поэтому нормализовать "нельзя"

onChange={(e) =>
            setTest(
              produce((draft) => {
                draft.conditions.forEach((c) =>
                  c.conditionProperties.forEach((prop) => {
                    if (prop.propertyName === item.propertyName) {
                        prop.propertyValue = e.target.value;
                    }
                  })
                );
              })
            )
          }

P.S Советую почитать про нормализацию данных

Как минимум разбейте блок на три логические части.
Далее на своё усмотрение, делите его на более мелкие логические части и верстайте. Можете на основе BootStrap сделать или же написать свою сетку через Flexbox.

Тем более в макете должны быть слои и у них есть свои названия. Можете отталкиваться от них.

<style>
  .mainblock{
    display:flex;
	flex-flow:row;
	border:solid 2px #ff0000;
	align-content:center;
	justify-content:center;
  }
  
  .columnblock{
    display:flex;
	flex-flow:column;  
	border:solid 2px #00ff00;
  }
  
  .itemblock{
	width: 300px;
    display:flex;
	flex-flow:row;  
	align-content:center;
	justify-content:space-between;
	border:solid 2px #0000ff;
  }
  
  .itemtitle {
	display:flex;
	flex-flow:column;
	align-content:center;
	justify-content:center;	  
  }
  
  .itemicon {
	width:48px;
	display:flex;
	flex-flow:column;
	align-content:center;
	justify-content:center;	
	border:solid 2px #555555;
  }
  
  .itemicon img {
	height: 48px;
  }
  
</style>

<div class="mainblock">
  <div class="columnblock">
	<div class="itemblock">
		<div class="itemtitle"><div>Item title</div></div><div class="itemicon"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-right-01-512.png"/></div>
	</div>
	
	<div class="itemblock">
		<div class="itemtitle"><div>Item title</div></div><div class="itemicon"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-right-01-512.png"/></div>
	</div>
  </div>

  <div class="columnblock">
  
	<div class="itemblock">
		<div class="itemtitle"><div>Item title</div></div><div class="itemicon"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-right-01-512.png"/></div>
	</div>
	
	<div class="itemblock">
		<div class="itemtitle"><div>Item title</div></div><div class="itemicon"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-right-01-512.png"/></div>
	</div>
	
  </div>
</div>

https://codepen.io/kaparov/pen/ZEOzxzG

А дальше вам нужно api на бекенде, которое примет ваш запрос с фронта и запишет в базу данных.

Но это если вам нужно заказ отправить. А если нужно просто хранить текущее состояние корзины — записывайте товары, например, в localStorage. Тут бекенд не нужен.

плохо сформулированое требование. Работа с корзиной ето фронтенд чистый js + фреемворк какой реакт там или вю. список покупок хранится в корзине. - а данные корзины наверное в куках, локал сторедже или где еще. - это ж еще не конечный продукт. Другое дело, когда покупатель наполнил корзину, и жмет купить, оплатить или что там. Только тогда ты уже что-то начинаешь работать с сервером.
и только тогда ты передаешь айди и колво заказаных товаров на сервер, на сервере ты по айдишкам достаешь цену. и только тогда ее сумируешь.

Никогда не передавай суму из фронтенда на сервер. считай все на сервере. (с. Безопасность) Вот тут по пальцам роказано как реализуют оплату https://www.youtube.com/watch?v=AfypOVaB5r0&t и как правильно данные перемещать

если ввожу правильные данные сначало идет долгая загрузка. и вылетает ошибка "Страница недоступна Сайт localhost не отправил данных.

так он ведь ничего и не отправляет, тут надо бы что-то отрендерить или редиректить, или послать какой нибудь ответ в браузер

app.post('/login', (req, res) => {
    User.findOne({
        where: {
            email: req.body.email
        }
    })
        .then(user => {
            if (!user) {
                return res.status(404).send({ message: "Введены неправильные данные!" });
            }
            const passwordIsValid = bcrypt.compareSync(req.body.password, user.password)
            if (!passwordIsValid) {
                return res.status(401).send({
                    message: "Введены неправильные данные!"
                });
            }

            req.session.userId = user.id   // ОК
            // и что дальше?

        })
})

Вы не указали какой шаблонизатор используете в проекте. Но, при этом используете метод render.
Вот пример из документации если используется pug: клик
Если используете какой-то другой, то смотрите, как он подключается. В express есть примеры для всех популярных шаблонизаторов, так что проблем не возникнет:)

Переделываешь таблицу в csv файл с нужными столбцами и используешь load. Через PHPMyadmin быстро можно всю таблицу разом загрузить. Но я обычно делаю локальную БД а потом экспортирую.

Туториал
https://travishorn.com/vue-online-store-with-shopp...

Гитхаб
https://github.com/travishorn/vue-online-store-demo

Если честно не совсем понял что ты хочешь, но попробуй justify-content-center применить к черной фигуре
https://getbootstrap.com/docs/4.5/utilities/flex/

как-то так

const childElements = photos.map(photo => (
        <li className="list-unstyled">
            <Link to={`/${photo.id}`}>
                <img
                    className={`rounded ${ hovered === photo.id ? 'hover-class' : '' }`}
                    style={styles}
                    src={photo.urls.small}
                    alt={photo.description}
                    onMouseOut={() => {
                        setHovered(null)
                    }}
                    onMouseOver={() => {
                        setHovered(photo.id)
                    }}
                />
            </Link>
        </li>
    ))

отсортировать массив по возрастанию - возрастание чего, первого числа в массиве?

data = [[34225, "EK", Array(2)], [74322, "EK", Array(2)], [53769, "MH", Array(2)],[53281, "SU", Array(2)], [30178, "EK", Array(2)]]

data.sort((a, b) => a[0] - b[0])

<Route path="/:id" component={SinglePhoto} />
<Route path="/history" component={SearchHistory} />

Switch рендерит первый подходящий Route, так что history вы пытаетесь отображать с помощью SinglePhoto.

Поменяйте их местами.

Нужно каким-либо образом оформить глобальное хранилище и добавлять избранные фотографии туда. Это можно сделать при помощи Redux, MobX и пр., но проще всего будет через React Context.