InstaLife

Содержание

• О проекте
• Процесс разработки
• Staсk технологий
• Запуск проекта
• Функционал проекта
• Структура проекта
• Полученные опыт и навыки

О проекте

Цель проекта: реализация доступной среды для обмена контентом. Суть проекта заключается в том, чтобы предоставить людям возможность делиться событиями из жизни, эмоциями и впечатлениями.

Процесс разработки

• 📌 — Планирование проекта
• 📌 — Выбор макета
• 🛠 — Вёрстка страниц
• 🛠 — Разработка логики
• ☑️ — Code review
• 🚀 — Публикация
• ⭕ — Улучшение продукта
• ⭕ — Доработка всех страниц

Staсk технологий

• JavaScript - язык программирования
• HTML 5 - язык гипертекстовой разметки
• CSS 3 - язык описания внешнего вида документа (веб-страницы)
• Figma - графический онлайн - редактор

Запуск проекта

Запуск проекта осуществляется путём подключения расширения Visual Studio Code Live Server для динамической подгрузки JavaScript модулей.

Функционал проекта

• 🔐 Авторизация пользователя
• 🔏 Хранение/изменеине личных данных и информации о себе
• ✅ Создание поста с функцией отложенной публикации
• 🙂 Индивидуализация аватара пользователя
• 👀 Возможность просмотра созданных постов
• 💬 Возможность оставалять комментарии
• ❤️ Возможность ставить лайки под постами
• 🔍 Возможность поиска других пользователей

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

app
├── assets                          - основной каталог ресурсов проекта
|   ├── all-css                     - общие стили проекта
|   ├── all-fonts                   - общие шрифты
|   ├── all-images                  - общие картинки и иконки
|   ├── all-scripts                 - общие скрипты
|   ├── index                       - подключение общих и сбрасывающих стилей
|   ├── authorization               - компоненты для страницы авторизации
|   ├── profile                     - компоненты для страницы профиля
|   ├── search-user                 - компоненты для страницы поиска пользователей
|   └── settings                    - компоненты для страницы настроек профиля
└── pages                           - основной каталог страниц проекта
    ├── Authorization.html          - страница авторизации, точка входа
    ├── Profile.html                - страница профиля пользователя
    ├── Settings.html               - страница натроек профиля
    └── Search-user.html            - страница поиска пользователей                     

Полученные опыт и навыки

• ⚡️ Сетевые запросы
• ⚡️ Промисы, async/await
• ⚡️ Хранение данных в браузере
• ⚡️ JS модули
• ⚡️ Обработка ошибок
• ⚡️ Загрузка документа и ресурсов
• ⚡️ DOM
• ⚡️ Интерфейсные события
• ⚡️ Формы, элементы управления
• ⚡️ Работа с массивами, объектами
• ⚡️ Семантическая и адаптивная вёрстка
• ⚡️ Структурированный подход к разработке