Полезный опенсорс: приложение на React для фрилансеров и бизнеса с открытым кодом

Разработчик программного обеспечения под ником Panshak опубликовал туториал по созданию приложения для выставления счетов. Оно выполнено на стеке MERN и подойдет для фрилансеров и малого бизнеса. По словам автора, кейс направлен на повышение навыков разработки ПО, а также на расширение портфолио необычным проектом. 

Особенности приложения

Стек MERN похож на стек MEAN, на его клиенте располагаются следующие инструменты: 

• MongoDB;
• Express;
• React;
• Node.js.

Вот что должно получиться: 

Особенности приложения: 

• отправка счетов, квитанций, смет, предложений и счетов по электронной почте;
• создание и отправка/скачивание по электронной почте счета, квитанции, сметы, расценки и счета в формате PDF;
• установка даты оплаты;
• автоматическое изменение статуса при добавлении записи об оплате;
• раздел истории платежей для каждого счета с записью о дате платежа и способе оплаты;
• запись частичной оплаты счета;
• регистрация нескольких пользователей;
• аутентификация с помощью jsonwebtoken (jwt) и Google auth;
• чистая панель администратора для отображения всей статистики по счетам, включая:
  • общую полученную сумму;
  • общую сумму к оплате;
  • последние платежи;
  • общую сумму оплаченных, неоплаченных и частично оплаченных счетов.

Стек

Рассмотрим технологии, которые были использованы в проекте. 

Фронтенд

• React;
• Redux — для управления и централизации состояния приложения;
• React Router DOM —для управления маршрутизацией;
• Axios — для осуществления вызовов API ;
• Material UI и CSS Module — для пользовательского интерфейса;
• React Simple Snackbar — для отображения уведомлений об успехах/ошибках;
• Cloudinary — чтобы пользователи могли загружать логотип компании;
• Apex Charts — для отображения истории платежей;
• React Google Login — для включения аутентификации с помощью Google.

Бэкенд

• Express;
• Mongoose;
• JWT — для аутентификации;
• bcryptjs — для шифрования данных;
• Nodemailer — для отправки счета по электронной почте;
• html-pdf — для создании PDF-файлов счет-фактур.

База данных 

• MongoDB (MongoDB Atlas).

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

Чтобы запустить проект локально, создайте форк и клонируйте репозиторий или загрузите его в формате .zip и распакуйте на своем устройстве. 

• откройте проект в редакторе кода;
• перейдите в терминал → Новый терминал (если используете VS code);
• разделите терминал на два, то есть запустите клиентскую часть на одном терминале, а сервер — на другом.

В первом терминале

• перейдите в cd client и создайте в корне клиентского каталога файл .env;
• используйте следующие учетные данные.

REACT_APP_GOOGLE_CLIENT_ID = 
REACT_APP_API = http://localhost:5000
REACT_APP_URL = http://localhost:3000

Чтобы получить Google ClientID для аутентификации, перейдите на страницу авторизации. Если у вас еще нет аккаунта, сначала создайте новый проект и выполните следующие шаги: 

• нажмите Создать учетные данные (Create Credentials) → Идентификатор клиента (OAuth client ID);
• выберите тип веб-приложения;
• назовите клиент OAuth и нажмите кнопку Создать (Create);
• не забудьте указать домен и URL перенаправления, чтобы Google определил исходный домен, на который он может вывести экран (http://localhost:3000 и  http://localhost:3000/login);
• скопируйте клиентский ID клиента и присвойте его переменной REACT_APP_GOOGLE_CLIENT_ID в файле .env.

$ cd client
$ npm install (to install client-side dependencies)
$ npm start (to start the client)

Во втором терминале

• перейдите в cd server и создайте в корне каталога файл .env сервера;
• используйте следующие учетные данные.

DB_URL = 
PORT = 5000
SECRET = 
SMTP_HOST = 
SMTP_PORT = 
SMTP_USER = 
SMTP_PASS =

Чтобы создать URL-адрес подключение к MongoDB, который будете использовать в качестве DB_URL, следуйте следующему руководству.

$ cd server
$ npm install (to install server-side dependencies)
& npm start (to start the server)

Примечание: при получении ошибки при попытке отправить или загрузить PDF выполните следующие действия в терминале сервера. 

$ npm install html-pdf -g
$ npm link html-pdf
$ npm link phantomjs-prebuilt

Вот и все! Исходный код проекта доступен на GitHub для всех желающих и распространяется по лицензии MIT. Демо проекта лежит здесь. 

Автор планирует расширять функции приложения, поэтому следите за обновлениями.