Фотосоцсетка

Соцсеть чтобы делиться фотками, лайкать их и меряться лайками. Учебный проект. Цель - закрепить навыки создания приложений на React и Express

Макет в Figma

Содержание

• Функции
• Что сделано
• Планы по доработке
• Стэк технологий
• Установка

Функции

• Регистрация и авторизация пользователей;
• Просмотр ленты фоток со счетчиком лайков, добавление фоток, простановка и снятие своих лайков;
• Редактирование никнейма и информации о себе.

Что сделано

• Настроена инфраструктура и создан сервер на express;
• Подключена база данных, созданы схемы и модели ресурсов API;
• Реализовано логирование, аутентификация и авторизация на сервере;
• Бэкенд задеплоен на Яндекс Облако;
• Свёрстаны компоненты на React, разметка портирована в его формат;
• Описана логика и вёрстка страниц регистрации, логина, редактирования профиля;
• Реализованы асинхронные GET- и POST-запросы к API;
• Проработаны авторизованные и неавторизованные состояния, простановка лайков.

Планы по доработке

• Добавление интернационализации с помощью i18next;
• Перевод на TypeScript для повышения надежности;
• Перевод проекта на Redux и SCSS для упрощения поддержки и расширения;
• Добавление функции смены e-mail;
• Добавление функции смены и восстановления пароля.

Стэк технологий

• HTML, CSS, js, БЭМ, Grid и Flexbox
• frontend на React (webpack через CRA), React hooks
• ООП, модульный подход, асинхронность
• роутинг, авторизация
• backend на Node.js и Express JS, деплой на Ubuntu в Яндекс.Облаке
• хехирование паролей, авторизация на токенах, сбор логов

Установка

• Склонируйте репозиторий [email protected]:SergeyKardashev/photo.git
• Установите зависимости npm install
• Запустите сервер npm run start

Результаты

Закрепил навыки создания приложений на React, Express с MongoDB

Системные требования

Node.js версии 18.16.0