Skip to content

Latest commit

 

History

History
82 lines (59 loc) · 3.63 KB

Readme.md

File metadata and controls

82 lines (59 loc) · 3.63 KB

Личный проект Kekstagram

JavaScript Node NPM


Не удаляйте и не изменяйте самовольно файлы и папки: .editorconfig, .eslintrc, .gitattributes, .gitignore, package-lock.json, package.json., .github


О проекте

«Кекстаграм» — веб-сервис просмотра и загрузки изображений. Проект представляет из себя реализацию клиентской части этого сервиса. Разработка осуществлялась на чистом JavaScript, без использования фреймворков.

Основные сценарии использования сайта:

  • Получение постов всех пользователей с сервера;
  • Вывод миниатюр всех постов на странице;
  • Отображение подробной информации о посте по клику на миниатюру, в результате чего в модельном окне выводятся:
    • изображение,
    • описание,
    • хештеги,
    • автор,
    • комментарии,
    • количество лайков;
  • Порционная загрузка комментариев к посту по клику на кнопку;
  • Фильтрация постов:
    • По умолчанию в порядке возрастания id;
    • В случайном порядке (выводится 12 случайных постов);
    • Самые обсуждаемые (по количеству комментариев);
  • Создание нового поста:
    • Загрузка нового изображения;
    • Просмотр загруженного изображения;
    • Изменения размера и масштаба загружаемого изображения;
    • Применение одного из нескольких цветовых фильтров к изображению, установка интенсивности фильтра;
    • Добавление комментария и хештегов к загружаемому изображению;
    • Отправка данных на север.
  • Валидация всех форм.

Обзор проекта

Видео

Начало работы

Чтобы развернуть проект локально или на хостинге, выполните последовательно несколько действий:

  1. Клонируйте репозиторий:
git clone [email protected]:kiipod/1622797-kekstagram-26.git kekstagram
  1. Перейдите в директорию проекта:
cd kekstagram
  1. Установите зависимости, выполнив команду:
npm install
  1. Для запуски локального сервера по адресу http://localhost:3001 с помощью Browsersync используйте команду:
npm run start
  1. Для запуска линтера используйте команду:
npm run lint

Техническое задание

Посмотреть техническое задание проекта