Skip to content

Latest commit

 

History

History
222 lines (167 loc) · 14.6 KB

README.md

File metadata and controls

222 lines (167 loc) · 14.6 KB
Raw

Github Client

Макет

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 Netlify Status
Storybook qpundb-storybook.netlify.app Netlify Status

Презентация
image

Подготовка к работе с проектом:

  • 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

API endpoints:

https://api.github.com Documentation
/orgs/{org}/repos List organization repositories
/search/users Search users
/search/repositories Search repositories
/repos/{owner}/{repo} Get a repository
/repos/{owner}/{repo}/branches List branches
/repos/{owner}/{repo}/commits/{ref} Get a commit
/repos/{owner}/{repo}/contributors List repository contributors
/repos/{owner}/{repo}/languages List repository languages
/repos/{owner}/{repo}/readme Get a repository README

⚠️ Note

Правила ограничения количества запросов
По умолчанию гитхаб ограничивает число запросов к АПИ до 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.