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

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

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

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

• MongoDB;
• Express;
• React;
Онлайн-курс “HR Business Partner” від Laba.
Підсилите звʼязок HR- та бізнес-процесів за допомогою вдосконалення аналітичних навичок. Навчіться розробляти HR-стратегії та планувати бюджети відповідно до цілей компанії. .
Детальніше про курс
• Node.js.

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

Интерфейс приложения

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

• отправка счетов, квитанций, смет, предложений и счетов по электронной почте;
• создание и отправка/скачивание по электронной почте счета, квитанции, сметы, расценки и счета в формате PDF;
Онлайн-курс "Голос. Озвучка. Дубляж" від Skvot.
Як монетизувати свій голос? Дізнаєшся за 25 занять на курсі з акторкою театру та кіно, яка озвучила 200+ фільмів, серіалів та мультфільмів та знає всі нюанси запису з домашньої студії. .
Про курс
• установка даты оплаты;
• автоматическое изменение статуса при добавлении записи об оплате;
• раздел истории платежей для каждого счета с записью о дате платежа и способе оплаты;
• запись частичной оплаты счета;
• регистрация нескольких пользователей;
• аутентификация с помощью jsonwebtoken (jwt) и Google auth;
• чистая панель администратора для отображения всей статистики по счетам, включая:
  • общую полученную сумму;
  • общую сумму к оплате;
  • последние платежи;
  Онлайн-курс "HR-менеджер" від Laba.
  За 10 тижнів у інтерактивній формі навчання під менторством exHRD у WorkUA ви отримаєте практичні навички й основні інструменти для старту кар’єри в HR. А також можливість стажування у Laba. .
  Детальніше про курс
  • общую сумму оплаченных, неоплаченных и частично оплаченных счетов.

Стек

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

Фронтенд

• React;
• Redux — для управления и централизации состояния приложения;
• React Router DOM —для управления маршрутизацией;
• Axios — для осуществления вызовов API ;
• Material UI и CSS Module — для пользовательского интерфейса;
Основи Web дизайну від Hillel IT School.
Цей онлайн-курс з основ веб-дизайну дозволить вам опанувати мистецтво створення ефективних та привабливих інтерфейсів для вебсайтів і застосунків. Ви оволодієте ключовими принципами UX/UI дизайну, створюватимете дизайн-макети та прототипи, розроблятимете адаптивні інтерфейси для різних пристроїв, готуючись до професійної кар'єри в галузі веб-дизайну.
Дізнатися більше
• React Simple Snackbar — для отображения уведомлений об успехах/ошибках;
• Cloudinary — чтобы пользователи могли загружать логотип компании;
• Apex Charts — для отображения истории платежей;
• React Google Login — для включения аутентификации с помощью Google.

Бэкенд

• Express;
• Mongoose;
• JWT — для аутентификации;
• bcryptjs — для шифрования данных;
Курс Full-stack developer від Mate academy.
Ідеальний курс для новачків - після закінчення гарантоване працевлаштування. Ви навчитесь працювати як з фронтендом, так і з бекендом сайта. .
Отримати знижку на курс
• Nodemailer — для отправки счета по электронной почте;
• html-pdf  — для создании PDF-файлов счет-фактур.

База данных 

• MongoDB (MongoDB Atlas).

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

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

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

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

• перейдите в cd client и создайте в корне клиентского каталога файл .env;
Онлайн-курс “Директор з маркетингу” від Laba.
Як оптимізувати маркетинг-функцію, створити сильну команду та впевнено виводити продукт на нові ринки — навчить Head of Marketing and Growth з 18-річним досвідом у стратегічному маркетингу. .
Детальніше
• используйте следующие учетные данные.

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 сервера;
• используйте следующие учетные данные.
Онлайн-курс "Digital Marketing" від Laba.
Розширте пул навичок у роботі з аудиторією. Навчіться запускати рекламні кампанії без зайвих витрат бюджету з сучасними інструментами діджитал-маркетингу, включаючи AI. .
Детальніше про курс

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. Демо проекта лежит здесь. 

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