Для проекта CookWithUs был разработан удобный и стильный сайт, который сочетает в себе интуитивную навигацию и элегантный дизайн. высокую производительность. Сайт спроектирован так, чтобы пользователи легко находили нужные рецепты и могли делиться своими кулинарными находками. Структура сайта включает:
- Главная страница.
- Страница рецепта.
- Редактирование рецепта.
- Добавление нового рецепта.
Дизайн реализован в нежной светло-голубой палитре, которая подчеркивает красочные изображения блюд и делает восприятие контента комфортным.
Техническая сторона проекта:
- Backend – построен на Node.js Express, что обеспечивает высокую скорость работы.
- Стилизация сайта проведена с помощью CSS-фреймворка Bootstrap.
- База данных – MongoDB.
CookWithUs – это не просто сайт с рецептами, а интерактивная платформа для вдохновения и обмена кулинарными идеями!
Домашняя страница
Главная страница сайта CookWithUs спроектирована так, чтобы пользователи могли сразу увидеть самые востребованные рецепты и легко выбрать то, что их заинтересует. Здесь размещены самые популярные рецепты, отобранные по количеству лайков и отзывов. Каждый рецепт представлен в карточке, которая включает яркое фото блюда, его название, количество лайков, категорию рецепта и кнопку Show More (Показать больше). При нажатии на нее открывается страница с описанием рецепта и отзывами на него.
Категории рецептов
Для удобства пользователей сайт оснащен интуитивным меню навигации (navbar), позволяющим быстро находить нужные рецепты. Доступные следующие категории рецептов: 1) Breakfast (Завтраки); 2) Lunch (Обеды, ланчи); 3) Salads (Салаты) и 4) Desserts (Десерты). Каждая категория содержит карточки с рецептами, в которых указана красочная фотография, название блюда, его ингредиенты, краткое описание приготовления; 5) кнопка Show More, которая ведёт на страницу с рецептом.
Страница с описанием рецепта
Эта страница предоставляет детальную информацию о выбранном блюде, а также интерактивные функции для зарегистрированных пользователей. В карточке рецепта отображены его название, красочное фото, ингредиенты, пошаговый процесс приготовления, категория. Зарегистрированные пользователи могут оставлять отзывы о рецептах с помощью специальной формы, в которой предусмотрено поле для комментария, звёздочки для выставления оценки и возможность загрузить своё фото с блюдом. Все оставленные отзывы отображаются внизу страницы. Для обеспечения корректной работы сайта и сохранности данных, только автор отзыва может его удалить.
Добавление рецепта
Каждый зарегистрированный пользователь может поделиться своим любимым рецептом на сайте, воспользовавшись удобной формой добавления. В панели навигации размещена ссылка Add a Recipe (Добавить рецепт). При нажатии на неё пользователь переходит на страницу с формой для создания рецепта. Форма добавления рецепта включает: название блюда, ссылку на фотографию, категорию, ингредиенты, пошаговое описание приготовления. Если в процессе заполнения формы требуется добавить еще один ингредиент, это легко сделать: нужно нажать на кнопку Add Ingredient (Добавить ингредиент), и появится новое поле для ввода.
Редактирование рецепта
На сайте предусмотрена возможность редактирования рецепта, но только для его автора – пользователя, который изначально добавил его. В этом случае на странице с описанием рецепта в карточке отображаются две кнопки: Edit (Редактировать) и Delete (Удалить). При клике на Edit пользователь попадает на страницу редактирования, где может: изменить название блюда, заменить или добавить фотографию, добавить, удалить или изменить ингредиенты, обновить описание приготовления, переключить категорию рецепта. После внесения изменений нужно сохранить рецепт, нажав кнопку Save Changes (Сохранить изменения). Этот функционал позволяет авторам рецептов поддерживать их в актуальном состоянии и улучшать их при необходимости.
