Разработать frontend часть сайта, интегрировать с API

Цель:

Требования:

• Фреймворк https://nextjs.org/
• Pixel-Perfect верстка
• Адаптивность
• Кроссбраузерность
• Server-side rendering для seo
• Мгновенная загрузка скелета сайта, без сдвигов
• Максимальная производительность при парсинге и выводе контента через API
• Устойчивость к большому трафику

Структура сайта:

• Главная https://www.figma.com/file/Y2f8dUqQnmDz2y20I3r8kl/Insta-API?node-id=307%3A640
• Результаты поиска по никнейму https://www.figma.com/file/Y2f8dUqQnmDz2y20I3r8kl/Insta-API?node-id=307%3A471
• Результаты поиска по хештегу https://www.figma.com/file/Y2f8dUqQnmDz2y20I3r8kl/Insta-API?node-id=307%3A127
• Профиль https://www.figma.com/file/Y2f8dUqQnmDz2y20I3r8kl/Insta-API?node-id=192%3A3156
• Публикация https://www.figma.com/file/Y2f8dUqQnmDz2y20I3r8kl/Insta-API?node-id=195%3A3394
• Политика приватности
• Удаление контента

Описание страниц:

• Главная
  
  
• Статичная страница с поисковой строкой
  
  
• Результаты поиска по никнейму
  
  
  • Выводить результаты поиска по эндпоинту (По запросу)
  • Выводить максимальное кол-во результатов
  • Каждый блок из результатов ссылается на страницу профиля
• Результаты поиска по хештегу
  
  
  • Выводить результаты поиска по эндпоинту (По запросу)
  • Выводить кол-во результатов по хештегу
  • Выводить максимальное кол-во карточек. При клике на кнопку “Show more posts” подгружать карточки.
  • Каждая карточка ссылается на страницу публикации
  • Карточки должны иметь одинаковую высоту и ширину, заданную в дизайн-макете
  • #хештеги и @профили делаем без ссылок, просто текстом
  • Сокращаем текст карточки знаком многоточия
  • Выводим кол-во лайков, комментов, дата публикации
  • Комменты и лайки сокращаем после 1000, до 2х знаков после запятой.
• Профиль
  
  
  • Выводить результаты по эндпоинту (По запросу)
  • Выводить аватар, никнейм, имя, кол-во постов, подписок, подписчиков, карточки
  • Карточки должны иметь одинаковую высоту и ширину, заданную в дизайн-макете
  • Карточки кликабельные, ссылки ведут на страницу публикации
  • Сокращаем текст карточки знаком многоточия
  • В каждой карточке ссылки на #хештеги и @профили должны быть кликабельными и вызывать соответствующий эндпоинт при переходе.
• Публикация
  
  
  • Выводить результаты по эндпоинту (По запросу)
  • Выводить большое изображение/видео/карусель с медиа с возможностью пролистать
  • Изображение всегда одинаковое по ширине, но адаптируется по высоте, в зависимости от формата изображения
  • Добавить возможность скачать все медиа по клику на кнопку
  • Выводить полное текстовое описание с кликабельными ссылками на #хештеги и @профили
  • Сделать ссылку на профиль автора публикации (иконка юзера и никнейм)
  • Выводить все комментарии с ссылками на профили авторов

API: (По запросу)

Пимер тела ответа, которое api возвращает при запросе страницы пользователя: