photo_gallery

Для запуску проекту з корневої папки виконати:

npm start

Збірка мінімізованого білда для продакшена

npm run build

Публікація на вказану homepage в package.json

npm run deploy

Про проект:

  • Проект представляє собою галерею довільних фото з можливістю перегляду в збільшеному варіанті, перелистування та збереження до обраних
  • Проект SPA, реалізовано 2 маршрути (Головна сторінка та Обране)
  • Також додатково реалізований пошук фото по id в загальній базі https://picsum.photos/

Інструменти проекту:

  • реалізовано на фраємворці React.js v.18
  • маршрутизація реалізована на React-Dom-Router v.6
  • для збірки коду використовувалося create-react-app
  • для публікації на GitHub використовувалося gh-pages v.4
  • для підтримки браузерів використовував browserslist (дві останні стабільні версії популярних браузерів (Chrome, Firefox, Opera, Safari))
  • в якості менеджеру стану використовував useContext
  • збереження необхідних данних на строні клієнта реалізовано з localeStorage в полі 'user' (примітка: вносити зміни до поля 'user' необхідно тільки через метод контексту 'editUser' в якому реалізована перевірка на дозволені властивості поля)
  • css код написаний за допомогою CSS-module
  • реалізовані плавні переходи анімації
  • використано вбудовані стилі для картинок, що пресікає пригаючий контент під час загрузки фото
  • реалізовано збільшення фото в модальному вікні (для виходу натиснути Esc або на оверлей)