Figma 🔸 Github Client

• ДЗ 3 (кликните для открытия спойлера)

  
  

  • Сетап проекта. Необходимо создать проект с помощью create-react-app, подключить линтер и алиасы. Подробнее можно прочесть здесь. При реализации необходимо соблюдать структуру проекта, про это мы рассказывали во втором модуле.
  • Страницу списка сущностей вашего проекта (Github client - репозитории, crypto - монеты и тд). Получение данных для отображения сущностей должно осуществляться с помощью запроса к API, который указан в таблице(кроме тех случаев, когда выбрана тема отличная от тем из таблицы).
  • Страницу отображения одной сущности. Получение данных об одном проекте должно также осуществляться с помощью запроса к API(запрещается использование данных из списка для отображения сущности на отдельной странице).
  • Роутинг. В вашем приложении должен быть реализована маршрутизация, при перезагрузке страницы должно отображаться то же состояние, что и до.
  • Стили, написанные на css-modules с использованием scss.

  Запросы к API должны осуществляться с помощью библиотеки axios.

  Чек-лист требований

  • Реализован сетап проекта с подключенным линтером, алиасами.
  • В проекте соблюдена структура, о которой рассказывали во втором модуле.
  • Реализована страница списка сущностей с получением данных из API
  • Добавлена страница одной сущности с получением данных из API
  • Подключен роутинг
  • Стили переписаны на css-modules с использованием scss, переменные и миксины вынесены в отдельный файл
  • Дополнительно: реализована пагинация

• ДЗ 4 (кликните для открытия спойлера)

  
  

  • Логику на Mobx. Необходимо переписать логику загрузки/хранения/использования данных на Mobx.
  • Mobx-сторы. Реализовать разделение логики на Mobx-сторы.
  • Поиск. Добавить нахождение списка сущностей по введенной строке (см. документацию в API).
  • Пагинацию. Реализовать пагинацию сущностей (или бесконечный скрол).
  • Query-параметры. Сохранять введенное значение в поиске и параметры пагинации в query-параметрах. В итоге при перезагрузке страницы списка должны отображаться те же данные, что были до.

  Чек-лист требований

  • Вся логика работы с данными переписана с помощью Mobx.
  • Корректно разделены сторы и выбрана "локальность" каждого из них.
  • Реализован поиск.
  • Добавлена пагинация.
  • В query-параметрах сохраняется состояние пагинации и поиска.
  • Дополнительно - использование сортировок из Github API

• ДЗ 5 (кликните для открытия спойлера)

  
  

  • Заменить текущую сборку, которую предоставляет create-react-app, на собственную.

  Чек-лист требований

  • Все файлы собираются с помощью Webpack
  • Все .ts .js .tsx .jsx файлы транспилируются с помощью Babel
  • Настройки Webpack, Babel прописаны в конфигах
  • Настроена сборка стилей: поддерживается sass-синтаксис, css-modules; для dev-сборки используется style-loader, для prod - MiniCssExtractPlugin
  • Подключен Hot Module Replacement
  • Реализована работа с файлами (добавлены ассеты)
  • Подключен TypeScript
  • На проекте используются alias-ы и babel-плагины для нового синтаксиса

Unit	Link	Status
Demo	qpundb-github-client.netlify.app
Storybook	qpundb-storybook.netlify.app

• git clone https://github.com/qpounodb/github-client.git

• cd ./github-client

• git checkout <some branch>

• yarn install

• yarn start - запускает App, Storybook и Typed-SCSS-Modules одновременно
• yarn start:app - запускает App в режиме разработки
• yarn build:app - производит сборку App для продакшена
• yarn start:sb - запускает Storybook в режиме разработки
• yarn build:sb - производит сборку Storybook для продакшена
• yarn start:tsm - запускает Typed-SCSS-Modules для автогенерации типов для файлов CSS-Modules
• yarn test - запускает Jest тесты
• yarn ts:check - запускает проверки Typescript
• yarn lint - запускает проверки ESLint
• yarn lint:fix - производит автоисправление с помощью ESLint
• yarn format - производит форматирование с помощью Prettier

Правила ограничения количества запросов
По умолчанию гитхаб ограничивает число запросов к АПИ до 60 в час на один IP адрес.
Для увеличения лимитов по запросам (5000 в час на один аккаунт) - можно добавить персональный гитхаб токен в переменную окружения GITHUB_API_ACCESS_TOKEN.
Для удобства можно создать в корне проекта файл .env.local с содержимым:

GITHUB_API_ACCESS_TOKEN=<токен созданный в гитхаб>

• React - JavaScript library for building user interfaces

• React-router - fully-featured client and server-side routing library

• Axios - promise based HTTP client for the browser and node.js

• MobX - simple, scalable state management.

• Git - distributed version control system

• Yarn - package manager

• Node.js - JavaScript runtime built on Chrome's V8 JavaScript engine

• TS-node - TypeScript execution and REPL for node.js

• Babel - JavaScript compiler.

• TypeScript - strongly typed programming language

• SASS/SCSS - stylesheet language that’s compiled to CSS

• Webpack - static module bundler for modern JavaScript applications.

• Storybook - tool for UI development

• Jest - delightful JavaScript Testing Framework with a focus on simplicity

• React Testing Library - builds on top of DOM Testing Library by adding APIs for working with React components.

• ESLint - statically analyzes your code to quickly find problems.

• Prettier - opinionated code formatter.