/learn-english

Primary LanguageJavaScript

Онлайн тренажер іноземних слів.

Приклад EnglishDom.

Технології:

  1. Mongo (DB)
    1. mongoose (робота з бд)
  2. Express (BE)
    1. express-validator (валідація)
    2. bcryptjs (шифрування паролів)
    3. config (збереження інфи в конфігах)
    4. uuid
    5. jsonwebtoken (токен для авторизації)
    6. nodemon (автозапуск node)
  3. React (FE)
  4. Rest
    1. npm-run-all (запуск скриптів одночасно BE і FE)

Функціонал:

  • Авторизація

    • БЕ
      1. Контроллери
      2. Валідація
      3. Refresh токен
    • ФЕ
      1. Форми
      2. Сабмітинг
      3. Валідація

  • Словник

    • Слова (як інстанс)
      1. Загальний список слів
      2. Додавання власних слів
    • Категорії слів (готові категорії зі словами)
      1. Загальний список категорій
      2. Додавання власних категорій

  • Тренажер

    • Картки
      1. З рідної на іноземну
      2. З іноземної на рідну
    • По літерам
      1. З рідної на іноземну
      2. Кнопка не знаю
    • З вводом слова
      1. З рідної на іноземну
      2. Кнопка не знаю
    • Список вивчених слів
      1. Повторення

Структура.

Корінь це Node додаток тобто BE.

client - зберігаються файли FE;
config - інформація для BE;
controllers - контроллери для ендпойнтів у вигляді класів та методів;
middleware - обгортки для ендпойнтів (добавлення корс);
models - моделі інстансів для бд;
routes - роути для ендпойнтів.

Code Style.

Для одинаковиї налаштувань лінкера та код-форматера для проекту створені файли конфігів .prettierrc і .eslintrec.json. Для командної роботи встановлюємо prettier і eslint. Після цього конфіг автоматично підтягнеться в розширення.

Компоненти не мають перевищувати 150 стрічок. Компоненти мають бути максимально модульними.

Для написання таблиці стилів використаємо scss препроцесор, підхід для написання класів - style-components. Також використовуємо передові стайл гайди css.

Змінні в css використовуємо виключно вбудовані в css (не scss): --main-bg: #333. Вони оголошуються глобально у верхній частині таблиці.

Для визначення розміру шрифта використовуємо одиниці rem. Для визначення інших розмірів в переважно em.

Кожен компонент має бути з PropTypes та Default Props!

Процес розробки.

Для командної роботи використовуємо Github project.
Створений проект Learn english trainer.
Буде створено Беклог для розробки.

До початку роботи над проблемою або фічею обговорюємо її, потім необхідно створити issue в проекті, асайним на того, хто буде розробляти.
Для роботи над кодом робимо відгалудження від останньої гілки dev.
Назва гілки: [номер issue]-назва-issue-через-дефіс.
Весь поцес розробки документуємо в issue, та змінюємо статус тікетів.
Після закінчення роботи над issue робимо Pull request в гілку dev.
Всі конфлікти вирішуємо до ПР-та.
Всі ПР-и робимо обов'язкове рев'ю.
Злиття робимо тільки після рев'ю.

Реліз робимо раз в тиждень. Це буде ПР в гілку master. Потім ПР в CI через heroku ci (білд на продакшн).

Опис роботи з білдами опишу пізніше.