Генератор сайтов

Сайт создан с помощью Create React App.

Скрипты

Для начала работы с проектом надо установить зависимость введя в консоль npm install или короткую версию npm i.

В каталоге проекта вы можете запустить:

yarn start | npm start

Запускает приложение в режиме разработки (живая dev-сборка).
Откройте http://localhost:3000/site-gen#/, чтобы просмотреть его в браузере.

Страница перезагрузится, если вы внесете правки. \

yarn test | npm run test

Запускает тестов в интерактивном режиме.
Подробнее можно прочитать здесь: running tests.

yarn build | npm run build

Собирает проeкт в папку build.
Он правильно связывает React в производственном режиме и оптимизирует сборку для достижения максимальной производительности. Сборка минифицирована, а имена файлов включают хеши.
После этого Ваше приложение готово к развертыванию на сервере!

Подробнее можно прочитать здесь: deployment.

yarn eject | npm run eject

Не советую использовать.

Если вы не удовлетворены выбором инструмента сборки и конфигурации, вы можете eject в любое время. Эта команда удалит единственную зависимость сборки из вашего проекта.

yarn predeploy | npm run predeploy

Используется в скрипте ниже.

yarn deploy | npm run deploy

Используется для публикации проекта в ветке gh-pages на GitHub. Подробнее можно прочитать здесь: gh-pages.

Выполеннные критерии

Динамичность веб-страниц

Внешний вид изменяется при изменении роутингов:

1. https://na-613c.github.io/web-gen/#/ - Главная.
   Внешний вид страницы зависит от того, зарегестирован пользователь или нет. Так же при появлении новых записей в удалённой базе данных изменяется таблица со скписком всех сайтов.

2. https://na-613c.github.io/web-gen/#/login - Регистрация.
   Страница которая предотвращает посещение не зарегистрированных пользователей конструктора.

3. https://na-613c.github.io/web-gen/#/constructor - Конструктор.
   Внешний вид страницы напрямую зависит от действий пользователя. Не зарегестрированный пользователь не может попасть на неё . При добавлении элементов появляются поля с вводом данных. Отображается предпросмотр сайта в реальном времени. Так же есть защита от пустых полей и предупреждении о совпадении URL при вводе (в реальном времени: например, если в момент создания данный URL не был занят, но в процессе создания сайта кто-то занял - вы увидите об этом сообщение). При наведении на знак вопроса около поля ввода URL всплывает подсказка. Так же при не прохождении валидации кнопка создать будет отключена. Так же есть предупреждение, если пользователь заходит с устройства со "слишком" маленьким экраном. (Рекомендуется использовать альбомную ориентацию).

4. Регистрация.
   Внешний вид зависит от того, зарегестирован пользователь или нет. Если Вы не прошли регистрацию, там находится кнопка войти. Если пользователь вошёл - там отображается аватарка и кнопка для выхода. Если пользователь использует экран более 800 пикселей - отображается его имя. Если пользователь нажимает на кнопку выйти - появляется собщение с предупреждением.
   Так же регистрация нужна для удаления сайтов, которые вы уже создали. Есть предупреждении об удалении. Если сайт не принадлежит вам или вы не авторезированы, то кнопка будет отключена.

5. Просмотр сайтов.
   В таблице на главной странице есть список сайтов, которые можно посетить. Для возвращения назад придётся использовать кнопку браузера "назад".

Производительность отрисовки

1. Для повышения производительности активно использовался хук React.memo и PureComponent (можно найти в компоненте ElementForm).
2. React.lazy использовался для ленивой загрузки страниц сохраненных сайтов. Можно увидеть в App компоненте.
3. На главной странице можно отобразить до 5, 10, 20, 50 и 100 одинаковых элементов (ссылок на сайты). Для этого надо выбрать подходящее количество в выпадающем списке ( с компьютера ).
4. Анимацию при появлении и удалении элементов можно увидеть на странице конструктора. Cделанна при помощи Motion Design. Tак же есть css анимации загрузки и стрелки около кнопки создания сайта.

Навигация в приложении

1. Кнопки вперед и назад работают корректно. Отображение сильно зависит от изменений URL. Использовался HashRouter вместо BrowserRouter для корректной работы на github pages.
2. При нажатии кнопки назад во время создания сайта в конструкторе при заполненных полностью или частично полях появится предпреждение о потере данных.

Кроссбраузерность

Сделана адаптивная вёрстка при помощи дизайн системы Ant Design. Так же при просмотре с мобильного устройства пропадает имя пользователя, сокращаются фиксированная часть ссылки при ввооде URL во время создания сайта и вёрстка становится более портретной ориентации или появляются горизонтальные скроллы ( таблица на главной странице ).

Коммуникации

Для хранения всех данных используется Firebase. Пользователи могут регестрироваться, сохранять и просматривать данные, которые отображаются частично измененными на страницах сайта. Эта база данных работает в режиме реального времени и при любых изменениях данных пользователь сразу узнает об этом. Это позволяет обмениваться данными с другими пользователями.

Модель данных

1. Данные для хранения всех сгенерированныых сайтов хранятся в Firebase.
2. Для работы с данными и объёмной логикой использовалась библиотека MobX. MobX - это библиотека, которая делает управление состоянием простым и масштабируемым за счет прозрачного применения функционального реактивного программирования (TFRP).

Сборка проекта

1. Есть dev-сборка при помощи скрипта yarn start | npm start.
2. Работающий проект размещен по ссылке https://na-613c.github.io/web-gen/#/. При необходимости можно собрать prod-сборку для запуска на своём сервере при помощи команды yarn build | npm run build.

Тесты

Для запуска тестов надо ввести в консоль скрипт yarn test | npm run test. Были написанны следующие тесты:

1. Связанные с отрисовкой компонентов:

   • Login.test.js.

   • MyFooter.test.js.

   • Loader.test.js.

   • App.test.js.

2. Связанные с состоянием:

   • TmpPageService.test.js - основная логика работы с полями ввода данных.

   • FirebaseService.test.js.

3. Связанные с утилитами:

   • validationSave.test.js.

   • constructElements.test.js.

   • ElementDOM.test.js.