Проект Charity Fund. WEB-сайт благотворительного фонда помощи бездомным животным Буду рядом

Тема проекта: WEB-сайт для благотворительного фонда помощи бездомным животным «Буду рядом».
Освещает деятельность благотворительного фонда помощи бездомным животным «Буду рядом», помогает в поиске хозяев для животных, находящихся под опекой фонда, помогает расширить волонтёрский состав фонда, просвещает в области помощи бездомным животным.

Цель проекта
В процессе разработки сайта комплексно применить на практике знания, полученные в рамках программы переобучения «Frontend разработка».

Задачи проекта
Отработка на практике полученных навыков:
Разработки SPA;
Работы с фреймворком React JS;
Работы в среде Node.js;
Работы с Webpack;
Работы со спецификацией ECMAScript;
Вёрстки сайта с помощью HTML-разметки;
Адаптивной вёрстки;
Применения каскадных таблиц стилей CSS, включая фреймворк Bootstrap;
Разработки сайта на JavaScript;
Разработки собственной CMS;
Работы с базой данных MySql;
Работы с дебаггером Chrome Dev Tools;
Работы с системой управления версиями Git;
Работы с облачными провайдерами;
Командной работы над проектом.

Применённые технологии
Проект выполнен в формате single-page application(SPA) с помощью фрейморка React JS. Для его разработки были применены следующие технологии:
HTML;
CSS, включая фреймворк Bootstrap v4.0.0;
JavaScript;
ECMAScript;
Фреймворк React JS;
Webpack;
Node.js;
MySql;
PHP;
Git.

Применённые инструменты
Библиотека шаблонов https://freehtmlthemes.ru/categories/animals/template-260;
Фреймворк Bootstrap v4.0.0;
Библиотека Font Awesome;
Пакет Node.js "react-router-dom";
Пакет Node.js "react-owl-carousel";
Разметка HTML;
Каскадные таблицы стилей CSS;
Динамическое обновление с помощью JavaScript;
База данных MySQL;
Пакет «SunEditor»;
Обработка запросов на стороне backend в формате PHP.

Структура проекта.
Меню
Представлено во всех разделах
Служит для навигации по сайту
Компонент в React JS «Menu»

Структура проекта.
Главная страница
Баннер
Карусель с фотографиями подопечных фонда
Кнопка “ВЫБРАТЬ ДРУГА” с ссылкой на раздел «ВЫБРАТЬ ДРУГА»
Тезисы о деятельности фонда
Компоненты в React JS: «Menu», «Header», «MainPage», «Footer»

Общая навигация по галереям с животными с ссылками на разделы «СОБАКИ» и «КОШКИ»
Компоненты в React JS: «Menu», «Gallery», «Footer»
Структура проекта.
Раздел «ВЫБРАТЬ ДРУГА»

Информация о деятельности фонда
Фотография директора фонда
Кнопка “ПОМОЧЬ” с ссылкой на раздел “ПОМОЧЬ”.
Компоненты в React JS: «Menu», «AboutFund», «Footer»
Структура проекта.
Раздел «О НАС»

Галерея фотографий собак, находящихся под опекой фонда, для которых фонд ищет хозяев
Каждая фотография с ссылкой на раздел с подробным описанием изображённого на ней животного
Компоненты в React JS: «Menu», «Dogs», «Footer»
Структура проекта. Раздел «СОБАКИ»

Галерея фотографий кошек, находящихся под опекой фонда, для которых фонд ищет хозяев
Каждая фотография с ссылкой на раздел с подробным описанием изображённого на ней животного
Компоненты в React JS: «Menu», «Cats», «Footer»
Структура проекта.
Раздел «КОШКИ»

Галерея фотографий животного
Текст с описанием характера животного
Компоненты в React JS: «Menu», «OneCat/OneDog», «Footer»
Структура проекта. Подробное описание животного

Информация о способах помощи c ссылкой на раздел «ПАРТНЁРЫ ФОНДА»
Тематическое фото
Форма для записи в волонтёры фонда, отправляемая на электронную почту фонда с последующей автоматической переадресацией на главную страницу сайта
Компоненты в React JS: «Menu», «Help», «Footer»
Структура проекта.
Раздел «ПОМОЧЬ»

Логотипы партнёров фонда с описанием их деятельности и ссылками на их сайты
Компоненты в React JS: «Menu», «Partners», «Footer»
Структура проекта.
Раздел «ПАРТНЁРЫ ФОНДА»

Список названий информационных статей с ссылкой на каждую статью
Компоненты в React JS: «Menu», «Articles», «Footer»
Структура проекта.
Раздел «ПОЛЕЗНЫЕ СТАТЬИ»

Заголовок и текст статьи
Компоненты в React JS: «Menu», «OnePost», «Footer»
Структура проекта.
Раздел «Информационная статья»

Контактная информация
Форма обратной связи, отправляемая на электронную почту фонда с последующей автоматической переадресацией на главную страницу сайта
Компоненты в React JS: «Menu», «Contacts», «Footer»
Структура проекта.
Раздел «КОНТАКТЫ»

Создан для добавления администратором сайта информации в разделах: «СОБАКИ», «КОШКИ», «ПОЛЕЗНЫЕ СТАТЬИ», в подробном описании животного и в информационной статье
После авторизации через логин и пароль через кнопку «Войти» происходит переход в раздел с подтверждением входа
Компоненты в React JS: «Menu», «Auth», «Footer»
Структура проекта.
Раздел «КАБИНЕТ»

После нажатия на кнопку «Пройдите к добавлению животных и статей» происходит переход в раздел выбора объекта для добавления
Компоненты в React JS: «Menu», «Cabinet», «Footer»
Структура проекта.
Подтверждение авторизации входа в личный кабинет

Раздел выбора объекта для добавления: «Добавить кошку», «Добавить собаку», «Добавить статью»
По умолчанию стоит опция «Добавить кошку»
Компоненты в React JS: «Menu», «AdminMenu», «Footer»
Структура проекта.
Раздел выбора объекта для добавления

Форма с WYSIWYG для добавления подробного описания животного и его фотографий
Изменение и удаление информации о животном
Компоненты в React JS: «Menu», «AddCat», «Footer»
Структура проекта.
Раздел «Добавить кошку»

Форма с WYSIWYG для добавления подробного описания животного и его фотографий
Изменение и удаление информации о животном
Компоненты в React JS: «Menu», «AddDog», «Footer»
Структура проекта.
Раздел «Добавить собаку»

Форма с WYSIWYG для добавления информационной статьи с фотографиями
Изменение и удаление информационных статей
Компоненты в React JS: «Menu», «AddPost», «Footer»
Структура проекта.
Раздел «Добавить статью»

Представлен во всех разделах
Содержит навигацию по сайту и контактную информацию
Компонент в React JS «Footer»
Структура проекта.
Футер

Над проектом работали

Расположение проекта
Репозиторий на GitHub: https://github.com/skipkris7/charity-fund
Хостинг:
http://skipkris7.beget.tech/