prime

Тестовое задание

Разработать интерфейс для сайта Hacker News, состоящий из двух страниц.

Продуктовые требования

Главная страница

Показывает последние 100 новостей в виде списка, отсортированного по дате, самые свежие сверху.

Каждая новость содержит: название, рейтинг, ник, автора, дату публикации.

По клику на новость происходит переход на страницу новости.

Список новостей должен автоматически обновляться раз в минуту без участия пользователя.

На странице должна быть кнопка для принудительного обновления списка новостей.

Страница новости

должна содержать: ссылку на новость, заголовок новости, дату, автора, счётчик количества комментариев, список комментариев в виде дерева.

Корневые комментарии подгружаются сразу же при входе на страницу, вложенные - по клику на корневой.

На странице должна быть кнопка для принудительного обновления списка комментариев. На странице должна быть кнопка для возврата к списку новостей.

Технические требования

Приложение разработано с использованием стейт-менеджера.

Использован официальный API Hacker News. Вызовы Hacker News API, обработка данных от него производятся напрямую с фронтенда.

Роутинг выполнен с использованием роутера.

Фреймворк UI любой на ваше усмотрение.

Можно и на чистом css, главное, чтобы было красиво.

Приложение должно запускаться по адресу localhost:3000

При переходах по ссылкам страница не перезагружается.

Исходный код решения должен быть выложен с вашего аккаунта на Github.

Опциональные задания

Использование TypeScript, покрытие кода юнит-тестами.

Дополнительно реализовано

Раздел Избранное, куда можно добавлять и откуда можно убирать карточки новостей.

Docker.

Пагинация.

Что можно сделать дополнительно в будущем:

бесконечный скролл

тёмная тема

улучшить дизайн

Recommended IDE Setup

VSCode + Volar (and disable Vetur).

Type Support for .vue Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need Volar to make the TypeScript language service aware of .vue types.

Customize configuration

See Vite Configuration Reference.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Type-Check, Compile and Minify for Production

npm run build

Run Unit Tests with Vitest

npm run test:unit

Lint with ESLint

npm run lint

Docker

# Image build

docker build -t prime .

# Container start

docker run -p 3000:80 prime

# Or with docker-compose

docker-compose up -d