JellyBelly Wiki

JellyBelly Wiki - сайт о бобах JellyBelly

Посмотрите Live Demo!

Стек

• TypeScript
• React 18
• Next.js 14 (App Router)
• Tailwind CSS
• Zod
• next-themes

О проекте

• Написан за 10 часов, в качестве тестового задания перед собеседованием по выданному техническому заданию
• Основан на открытом API https://jelly-belly-wiki.netlify.app
• Server Side Rendering (SSR) - в ответ на запрос пользователя сервер отправляет сгенерированный HTML заполненный контентом, а затем загружается весь необходимый для работы JavaScript. Для пользователя страница загружается быстрее
• Search Engine Optimization (SEO) - благодаря SSR поисковые боты могут индексировать страницы (в отличии от приложений написанных с использованием SPA подхода)
• Адаптивная верстка
  • Поддержка мобильных устройств (в том числе планшетов)
  • Верстка на основе rem
  • Автоматическое масштабирование для малых и больших разрешений (сайт выглядит одинаково при любых разрешениях 16:9)
• Написан в соответствии с Feature-Sliced Design (FSD)
• Легко масштабируемый
  • Сущности, для которых необходимо реализовать общий функционал (например ленивую загрузку карточек) объедены абстракцией item - это позволяет переиспользовать компонент Grid, а так же писать компоненты обёртки, например ItemCard или ItemInfo
  • Каждой сущности в рамках item, поставлена в соответствие секция section - это позволяет написать переискользуемую страницу [section] и динамический header
  • Вместе эти уровни абстракции позволяют, при необходимости, легко добавить новые сущности
• Валидация данных с помощью схем Zod
  • Все данные, полученные с API валидируются с помощью библиотеки Zod
  • При получении списка объектов, каждый валидируется отдельно, в случае возникновения ошибок, бракованный объект удаляется из списка, а остальные данные поступают в рендер - это обеспечивает отказоустойчивость, при единичных ошибках в данных
• Lazy loading - новые карточки подгружаются по мере необходимости при просмотре (скроллинге) страницы
• Используется цветовая схема Solarized. Есть возможность переключения между тёмной и светлой схемой

Скриншоты

Desktop (HD+)

Tablet (iPad)

Mobile (iPhoneX)

Запуск

Локально

npm install
npm run dev