Git Product home page Git Product logo

thread-js-1's Introduction

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 [email protected]: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.

thread-js-1's People

Contributors

alikrakhmonov avatar o-kovalov avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.