React Social App / forpes.ru

Главная
React Social App

React Social App +3

22.03.2021 09:48

aio350 0 1300 Источник

Доброго времени суток, друзья!

В поисках вдохновения наткнулся на этот замечательный туториал, посвященный разработке «социального» клиент-серверного приложения на MERN + GraphQL.

Решил его расшифровровать и немного доработать для заинтересованных. Расшифровка означает, что каждая строка кода снабжена подробным комментарием. Доработка состоит в добавлении аватара пользователя и исправлении нескольких критичных для работы приложения ошибок.

Код проекта находится здесь.

Основные возможности приложения

Регистрация/авторизация пользователей
Добавление/удаление постов
Лайк/дизлайк постов
Добавление/удаление комментариев к постам
Отображение количества лайков и комментариев

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

Сервер:

Apollo Server
GraphQL + GraphQL Tag
Mongoose
JSON Web Token
Bcrypt
Supervisor
Concurrently

Клиент:

React
ReactDOM
React Router DOM
Apollo Client
GraphQL + GraphQL Tag
JWT Decode
React Loader Spinner
Semantic UI React

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

- client - клиент
  - public
    - index.html - шаблон разметки
  - src
    - modules
      - components
        - CommentButton.js - кнопка для комментария
        - DeleteButton.js - кнопка для удаления поста или комментария
        - LikeButton.js - кнопка для лайка
        - MenuBar.js - панель навигации
        - PostCard.js - карточка поста, используемая на главной странице
        - PostForm.js - форма для добавления нового поста
        - index.js - агрегация компонентов
      - context
        - auth.js - контекст с информацией об аутентификации
        - ...
      - pages
        - Home.js - главная/домашняя страница
        - Login.js - страница авторизации
        - Register.js - страница регистрации
        - SinglePost.js - страница одного поста
        - index.js - агрегация страниц
      - utils
        - Loader.js - индикатор загрузки
        - MyPopup.js - всплывающая подсказка
        - authRoute.js - утилита для приватного роутинга
        - convertImg.js - утилита для преобразования изображения в base64-строку
        - formatDate.js - утилита для форматирования даты
        - useForm.js - кастомный хук для работы с формой
        - index.js - агрегация утилит
      - graphql.js - запросы и мутации graphql
    - ApolloProvider - провайдер, позволяющий установить связь с сервером
    - App.css - коррекция стилей semantic
    - App.js - основной компонент приложения
    - index.js - главный файл клиента, точка входа для Webpack
  - jsconfig.json - настройки компилятора
  - ...
- graphql
  - resolvers - операции, выполняемые с данными в ответ на запрос или мутацию graphql
    - comments.js - мутации для комментариев
    - posts.js - запросы и мутации для постов
    - users.js - мутации для пользователей
    - index.js - агрегация запросов и мутаций
  - typeDefs.js - определения типов (моделей) данных, запросов и мутаций
- models
  - Post.js - модель поста
  - User.js - модель пользователя
- utils
  - check-auth.js - утилита для проверки аутентификации
  - validators.js - валидаторы для регистрации и авторизации
- index.js - главный файл сервера
- ...

Инструкция по установке и запуску находится в репозитории проекта.