/thread-js

Primary LanguageJavaScript

BSA 2019 JS - mini-project Thread

Описание

Thread - это SPA с готовой архитектурой и структурой, подключенным базовым стеком технологий и стартовым функционалом, предназначенный для самостоятельной практики студентов.

Тематика проекта - социальная сеть, похожая на Twitter.

Основная идея проекта - ознакомить студентов с нашим виденьем того, как реальный проект должен выглядеть изнутри, и дать возможность самостоятельно исследовать, как устроена архитектура и структура проекта, посмотреть его возможные конфигурации, попробовать покопаться и разобраться в чужом коде.

Технологии

Здесь перечислены основные фреймворки и библиотеки, используемые в проекте. Полный список используемых технологий для каждой части проекта находится в файлах package.json в папках client и server.

Common

  1. ES2018
  2. Git
  3. REST API
  4. JWT
  5. Socket.IO
  6. npm
  7. ESLint

Frontend

  1. React
  2. React Redux
  3. React Semantic UI
  4. Moment.js
  5. validator.js
  6. history

Backend

  1. Node.js
  2. Express
  3. Passport.js
  4. Sequelize
  5. axios
  6. bcrypt
  7. Babel
  8. nodemon
  9. dotenv
  10. jsonwebtoken

Database

  1. PostgreSQL

Установка

  1. Установить последнюю стабильную версию Node.js (LTS). Note: npm будет установлен автоматически. Проверьте корректность установки: для этого выполните в командной строке (терминале):

    node -v  // для проверки версии Node.js
npm -v // для проверки версии npm

  2. Установить последнюю стабильную версию PostgreSQL для вашей OS. Проверьте корректность работы - попробуйте создать базу, таблицу, - для этого можете использовать pgAdmin или другой удобный способ, который найдете.

  3. Создайте в PostgreSQL пустую базу данных для проекта. Например, thread.

  4. Установите Git.

  5. Склонировать репозиторий проекта:

    git clone git@github.com:BinaryStudioAcademy/thread-js.git

  6. Создать репозиторий на Bitbucket и вести дальнейшую разработку там.

Backend

  1. В командной строке (терминале) зайдите в папку server:

    cd /* путь к папке server */

  2. Установите все необходимы пакеты из package.json командой:

    npm install

  3. В папке server создайте файл .env и скопируйте в него содержимое из файла .env.example.

    Note: файл .env содержит реальные ключи проекта и не должен сохраняться в репозиторий.

    Замените в файле .env значения ключей на действительные. Для того, чтобы указать ключи для Imgur Storage, необходимо зарегистрироваться на сайте Imgur и зарегистрировать приложение указав Anonymous usage without user authorization. Затем в настройках профиля найдете ключи для Storage.

  4. Выполните миграции и сиды для того, чтобы заполнить базу данных демо-данными. Для этого в командной строке (терминале) в папке server выполните:

    npx sequelize-cli db:migrate
npx sequelize-cli db:seed:all

    Проверьте базу данных на наличие демо-данных.

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

    npm start

Frontend

  1. В командной строке (терминале) зайдите в папку client:

    cd /* путь к папке client */

  2. Установите все необходимы пакеты из package.json командой:

    npm install

  3. В папке client создайте файл .env и скопируйте в него содержимое из файла .env.example.

    Note: файл .env содержит реальные ключи проекта и не должен сохраняться в репозиторий.

    Замените в файле .env значения ключей на действительные.

  4. Для запуска клиента в командной строке (терминале) в папке клиента выполните:

    npm start

    Приложение должно само автоматически открыться в брузере по умолчанию.

Задания

Необходимо добавить следующие возможности:

  1. Поставить dislike посту.
  2. Обновить свой пост.
  3. Удалить свой пост. Soft deletion - пост должен остаться в базе данных.
  4. Обновить свой комментарий.
  5. Удалить свой комментарий. Soft deletion - комментарий должен остаться в базе данных.
  6. Поставить like комментарию.
  7. Поставить dislike комментарию.
  8. Фильтр - не отображать свои посты, а отображать только чужие.
  9. Фильтр - отображать только те посты, которым я (как пользователь) поставил лайк.
  10. Отобразить кто поставил like/dislike посту.
  11. Отобразить кто поставил like/dislike комментарию.
  12. Обновить собственный профиль. Добавить валидацию.
  13. Устанавливать статус пользователя (например, "А сегодня, в завтрашний день, не все могут смотреть. Вернее.."). Отображать его под username.
  14. Сбросить пароль (Forgot password). Отправить email с ссылкой на страницу изменения пароля.
  15. Отправить пользователю email, если его посту поставили like.
  16. Поделиться постом по email.

PS

Весь список тасков также можно найти на доске Trello в колонке Backlog Students. Доску нужно скопировать себе и по ней работать. Это поможет вам отслеживать весь процесс своей работы, а нам - определить, что уже готово. Таск будет считаться выполненным, если он полностью завершен и фича работает. Посмотрим на ее реализацию и оценим, правильно ли распределили логику в проекте. Это покажет, насколько вы разобрались в архитектуре. Также дадим комментарии по коду.

Основной результат работы можно определить тем, как глубоко вы смогли разобраться в проекте и понять его, и как далеко продвинулись в личном обучении.

Ссылки:

  1. Репозиторий.
  2. Trello.