Giter VIP home page Giter VIP logo

test-work-news-list's Introduction

Тестовое задание для стажёра React (TypeScript)

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

(!) Не нужно полностью повторять интерфейс сайта Hacker News, достаточно выполнить требования Главная страница

Показывает последние 100 новостей в виде списка, отсортированного по дате, самые свежие сверху.
Каждая новость содержит:
    название
    рейтинг
    ник автора
    дату публикации
    По клику на новость происходит переход на страницу новости
Список новостей должен автоматически обновляться раз в минуту без участия пользователя
На странице должна быть кнопка для принудительного обновления списка новостей

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

Должна содержать:
    ссылку на новость
    заголовок новости
    дату
    автора
    счётчик количества комментариев
    список комментариев в виде дерева
Корневые комментарии подгружаются сразу же при входе на страницу, вложенные - по клику на корневой.
Список комментариев должен автоматически обновляться раз в минуту без участия пользователя
На странице должна быть кнопка для принудительного обновления списка комментариев
На странице должна быть кнопка для возврата к списку новостей

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

Приложение разработано с использованием React и должно использовать:
    TypeScript
    State management (Redux/Mobx/самописный через context api/т.п.)
    React Hooks
Использован официальный API Hacker News или его улучшенная версия HNPWA API. Вызовы Hacker News API и обработка данных от него производятся напрямую с фронтенда (кроме случая, если вы сделаете опциональное задание про Node.JS).
Роутинг выполнен с использованием React Router v5 (или более новой версией)
Фреймворк UI любой на ваше усмотрение (как пример React Bootstrap или Semantic UI). Можно хоть на голом CSS, главное, чтобы выглядело красиво. Будет большим плюсом использование styled-components/СSS Modules/emotion/etc.
Пакетный менеджер npm/yarn/pnpm
Приложение должно запускаться по адресу localhost:3000 командой npm start
После запуска приложения все переходы по ссылкам не перезагружают страницу
Исходный код решения должен быть выложен с вашего аккаунта на Github
Форматирование: обязательно использовать eslint и prettier

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

Конфигурация сборки проекта в Docker image
Бэкенд для хостинга статики и API для инкапсуляции внешних запросов на Node.JS
Покрытие кода юнит-тестами

test-work-news-list's People

Contributors

sokol-programmer-developer avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.