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

Содержание

Слайд 2

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

Освещает деятельность

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

Слайд 3

Цель проекта

В процессе разработки сайта комплексно применить на практике знания, полученные в

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

Слайд 4

Задачи проекта

Отработка на практике полученных навыков:
Разработки SPA;
Работы с фреймворком React JS;
Работы

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

Слайд 5

Применённые технологии

Проект выполнен в формате single-page application(SPA) с помощью фрейморка React JS.

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

Слайд 6

Применённые инструменты

Библиотека шаблонов https://freehtmlthemes.ru/categories/animals/template-260;
Фреймворк Bootstrap v4.0.0;
Библиотека Font Awesome;
Пакет Node.js "react-router-dom";
Пакет Node.js "react-owl-carousel";
Разметка

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

Слайд 7

Структура проекта. Меню

Представлено во всех разделах
Служит для навигации по сайту
Компонент

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

Слайд 8

Структура проекта. Главная страница

Баннер
Карусель с фотографиями подопечных фонда
Кнопка “ВЫБРАТЬ ДРУГА” с

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

Слайд 9

Общая навигация по галереям с животными с ссылками на разделы «СОБАКИ» и

Общая навигация по галереям с животными с ссылками на разделы «СОБАКИ» и
«КОШКИ»
Компоненты в React JS: «Menu», «Gallery», «Footer»

Структура проекта. Раздел «ВЫБРАТЬ ДРУГА»

Слайд 10

Информация о деятельности фонда
Фотография директора фонда
Кнопка “ПОМОЧЬ” с ссылкой на раздел “ПОМОЧЬ”.

Информация о деятельности фонда Фотография директора фонда Кнопка “ПОМОЧЬ” с ссылкой на

Компоненты в React JS: «Menu», «AboutFund», «Footer»

Структура проекта. Раздел «О НАС»

Слайд 11

Галерея фотографий собак, находящихся под опекой фонда, для которых фонд ищет хозяев
Каждая

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

Структура проекта. Раздел «СОБАКИ»

Слайд 12

Галерея фотографий кошек, находящихся под опекой фонда, для которых фонд ищет хозяев
Каждая

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

Структура проекта. Раздел «КОШКИ»

Слайд 13

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

Галерея фотографий животного Текст с описанием характера животного Компоненты в React JS:
«Footer»

Структура проекта. Подробное описание животного

Слайд 14

Информация о способах помощи c ссылкой на раздел «ПАРТНЁРЫ ФОНДА»
Тематическое фото
Форма для

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

Структура проекта. Раздел «ПОМОЧЬ»

Слайд 15

Логотипы партнёров фонда с описанием их деятельности и ссылками на их сайты
Компоненты

Логотипы партнёров фонда с описанием их деятельности и ссылками на их сайты
в React JS: «Menu», «Partners», «Footer»

Структура проекта. Раздел «ПАРТНЁРЫ ФОНДА»

Слайд 16

Список названий информационных статей с ссылкой на каждую статью
Компоненты в React JS:

Список названий информационных статей с ссылкой на каждую статью Компоненты в React
«Menu», «Articles», «Footer»

Структура проекта. Раздел «ПОЛЕЗНЫЕ СТАТЬИ»

Слайд 17

Заголовок и текст статьи
Компоненты в React JS: «Menu», «OnePost», «Footer»

Структура проекта. Раздел

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

Слайд 18

Контактная информация
Форма обратной связи, отправляемая на электронную почту фонда с последующей автоматической

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

Структура проекта. Раздел «КОНТАКТЫ»

Слайд 19

Создан для добавления администратором сайта информации в разделах: «СОБАКИ», «КОШКИ», «ПОЛЕЗНЫЕ СТАТЬИ»,

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

Структура проекта. Раздел «КАБИНЕТ»

Слайд 20

После нажатия на кнопку «Пройдите к добавлению животных и статей» происходит переход

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

Структура проекта. Подтверждение авторизации входа в личный кабинет

Слайд 21

Раздел выбора объекта для добавления: «Добавить кошку», «Добавить собаку», «Добавить статью»
По умолчанию

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

Структура проекта. Раздел выбора объекта для добавления

Слайд 22

Форма с WYSIWYG для добавления подробного описания животного и его фотографий
Изменение и

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

Структура проекта. Раздел «Добавить кошку»

Слайд 23

Форма с WYSIWYG для добавления подробного описания животного и его фотографий
Изменение и

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

Структура проекта. Раздел «Добавить собаку»

Слайд 24

Форма с WYSIWYG для добавления информационной статьи с фотографиями
Изменение и удаление информационных

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

Структура проекта. Раздел «Добавить статью»

Слайд 25

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

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

Структура проекта. Футер

Слайд 26

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

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

Слайд 27

Расположение проекта

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

Расположение проекта Репозиторий на GitHub: https://github.com/skipkris7/charity-fund Хостинг: http://skipkris7.beget.tech/
Имя файла: Проект-Charity-Fund.-WEB-сайт-благотворительного-фонда-помощи-бездомным-животным-Буду-рядом.pptx
Количество просмотров: 56
Количество скачиваний: 0