Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/sokoloff-rv/kekstagram

Клиентская часть веб-сервиса для просмотра и загрузки изображений. Проект разработан на чистом JavaScript, без фреймворков. Реализованы отправка и получение данных с внешнего сервера.
https://github.com/sokoloff-rv/kekstagram

javascript

Last synced: 14 days ago
JSON representation

Host: GitHub
URL: https://github.com/sokoloff-rv/kekstagram
Owner: sokoloff-rv
Created: 2022-06-07T07:55:21.000Z (over 2 years ago)
Default Branch: master
Last Pushed: 2023-10-07T12:23:36.000Z (over 1 year ago)
Last Synced: 2024-11-14T19:45:55.178Z (2 months ago)
Topics: javascript
Language: JavaScript
Homepage: https://kekstagram.sokoloff-rv.ru/
Size: 2.21 MB
Stars: 0
Watchers: 0
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: Readme.md
- Contributing: Contributing.md

Awesome Lists containing this project

README

# Kekstagram
![JavaScript](https://img.shields.io/badge/javascript-ES22-EFD81D)
![Node](https://img.shields.io/badge/node.js-%5E16.0-7FBF00)
![NPM](https://img.shields.io/badge/npm-%5E8.0-C53635)

## О проекте

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

Демонстрационная версия доступна по адресу https://kekstagram.sokoloff-rv.ru/.

## Функциональность

Основные возможности, реализованные в проекте:

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

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

[![Видео](https://sokoloff-rv.ru/share/github/kekstagram.webp)](https://youtu.be/A_3VCBBF2ww)

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

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

1. Клонируйте репозиторий:

```bash
git clone https://github.com/sokoloff-rv/kekstagram.git kekstagram
```

2. Перейдите в директорию проекта:

```bash
cd kekstagram
```

3. Установите зависимости, выполнив команду:

```bash
npm install
```

4. Для запуски локального сервера по адресу [http://localhost:3001](http://localhost:3001/) с помощью Browsersync используйте команду:

```bash
npm run start
```

5. Для запуска линтера используйте команду:

```bash
npm run lint
```

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

[Посмотреть техническое задание проекта](https://sokoloff-rv.notion.site/Kekstagram-bf107f4aa6ec46499198a6bb0803af1f?pvs=4)