Code Monkey home page Code Monkey logo

avito-frontend-internship-2023's Introduction

avito-frontend-internship-2023

Разработать интерфейс для сайта Free-To-Play Games, состоящий из двух страниц.

Запуск проекта

Приложение запускается localhost:3001 командой npm start

Внутри приложения использован ключ для использования api.

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

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

  • Показывает игры
    • Игры можно отфильтровать по платформе и жанру (например, шутер)
    • Игры можно отсортировать по дате релиза, популярности и тд
  • Каждая игра в списке содержит:
    • название
    • дата релиза (в российском формате)
    • издатель
    • жанр
    • картинка
  • По клику на игру происходит переход на страницу игры
  • На загрузку игр показывать индикатор загрузки
  • Если не получилось получить данные, необходимо сообщить пользователю

Страница игры

  • Должна содержать (в любом порядке/виде):
    • название
    • дата релиза (в российском формате)
    • издатель
    • разработчик
    • жанр
    • картинка/постер
    • карусель скриншотов
    • системные требования
  • На странице должна быть кнопка для возврата к списку игр
  • На загрузку игры показывать индикатор загрузки
  • Если не получилось получить данные, необходимо сообщить пользователю

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

  • С приложением должно быть удобно работать, как с мобильного экрана, так и с десктопа (адаптивный интерфейс)
  • Приложение разработано с помощью React 18+ и Redux / Redux Toolkit
  • Использован Free-To-Play Games API (не важно с или без CORS). Вызовы API и обработка данных от него производятся напрямую с фронтенда (кроме случая, если вы сделаете опциональное задание про Node.JS).
  • Роутинг выполнен с использованием React Router v6
  • Фреймворк UI любой на ваше усмотрение (например, Ant Design, Semantic UI, Element UI)
  • Пакетный менеджер npm
  • Приложение должно запускаться по адресу localhost:3001 командой npm start
  • При переходах по ссылкам страница не перезагружается
  • Если карточка игры была открыта, то она должна быть доступна при последующих открытиях (перезагрузках) страницы без дополнительного запроса в течение 5 минут
  • Исходный код решения должен быть выложен с вашего аккаунта на Github

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

  • Использование TypeScript
  • Учитывать, что список игр может содержать тысячи тайтлов
  • При неудачном запросе должно быть три попытки повторного запроса
  • При переходе со страницы на страницу запросы, относящиеся к старой странице, должны прерываться (отменяться/прекращаться)
  • Бэкенд для хостинга статики и API для инкапсуляции внешних запросов на Node.JS
  • Покрытие кода юнит-тестами

avito-frontend-internship-2023's People

Contributors

mrskycriper 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.