@media (min-width: 800px) {. А то, что после оставить без медиазапроса..search{
color: red;
....
}
@media (max-width: 799.99px) {
.search{
width: 100%;
....
}
@media (min-width: 800px) {
.search{
position: absolute;
right: 0;
width: 75%;
....
}.oportunities-list__item и .oportunities-list__index должны быть флексами. Управляемыми. Тогда и бокс встанет туда, куда ты его метишь, и цифра внутри бокса.
Само SPA приложение может крутится где угодно, хоть у тебя на локальному компьютере, главное, чтобы можно было отправлять запросы и получать ответы, т.е. скорее всего интернет-соединение.
Нюансов, пожалуй очень много на самом деле. В принципе могу сказать, что для чего-либо функционального используется схема, где бэк независим и взаимодействует с окружающим миром через web api (Если что API это не только запросы с ответом типа json в интернете), а морда, она же приложение, она же чаще всего SPA крутится где-то в сторонке. На уровне с приложениями для устройств. Это позволяет обеспечить одинаковый подход к обращениям к основной логике при абсолютно диком разнообразии конечного продукта.
Тем не менее это нужно далеко не всегда + я еще раз акцентирую внимание на безопасности. Не всегда, например для лендоса все это не нужно. Для сайта, который не использует расчеты, а просто отдает контент — тоже. Бложик какой на коленке — там вообще оптимально использовать какой-нить Jekyll, который не входит в обсуждение и так далее.
А в плане безопасности тут тоже все просто, в SPA часто зашивают логику пользователя и администратора. Все, что разделяет юзера от манипуляций на сервере — шифрованный токен, который его браузер хранит при входе в систему. При этом неважно, вошел он или нет, вся логика просто вывалена в виде JS-ника, который заходи, смотри какие обращения на сервер могут быть и иди пытайся порушить что-нибудь.
Конечно, есть подходы корректнее, но из-за того, что так модно, о безопасности думают в последнюю очередь. Не самый очевидный фактор.
При этом следует отметить, что если ты делаешь сайт, который загрузился и вот он весь — вся динамика тебе не нужна, лучше просто вывалить все в шаблонизатор. Ну может где-то асинхронных компонентов напихать.
На сим закончим, успехов на поприще.