Решения 26/11/2021

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

Редактор новостей

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

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

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

Node.js.

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

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

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

отправка счетов, квитанций, смет, предложений и счетов по электронной почте;
создание и отправка/скачивание по электронной почте счета, квитанции, сметы, расценки и счета в формате PDF;

Онлайн-курс Frontend-разробник від Powercode academy.

Курс на якому ти напишеш свій чистий код на JavaScript, попрацюєш із різними видами верстки, а також адаптаціями проектів під будь-які екрани. .

Зарееструватися

установка даты оплаты;
автоматическое изменение статуса при добавлении записи об оплате;
раздел истории платежей для каждого счета с записью о дате платежа и способе оплаты;
запись частичной оплаты счета;
регистрация нескольких пользователей;
аутентификация с помощью 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 — для шифрования данных;

Онлайн-курс "Business English for Marketers" від Laba.

Опануйте професійну англійську для маркетингу.Розширте карʼєрні можливості для роботи з іноземними колегами: від розробки нових продуктів до презентації стратегії бренду.

Детальніше про курс

Nodemailer — для отправки счета по электронной почте;
html-pdf — для создании PDF-файлов счет-фактур.

База данных

MongoDB (MongoDB Atlas).

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

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

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

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

перейдите в cd client и создайте в корне клиентского каталога файл .env;

Курс Power Skills For Tech від Enlgish4IT.

Зменшіть кількість непорозумінь на робочому місці та станьте більш ефективним у спілкуванні в мультикультурній команді. Отримайте знижку 10% за промокодом ITCENG.

Реєстрація на курс

используйте следующие учетные данные.

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 сервера;
используйте следующие учетные данные.

Онлайн-курс "Computer Vision" від robot_dreams.

Застосовуйте Machine Learning / Deep Learning та вчіть нейронні мережі розпізнавати об’єкти на відео. Отримайте необхідні компетенції Computer Vision Engineer.

Дізнатись більше про курс

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

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

Онлайн-курс "Project Manager" від Laba.

Станьте проджектом, що вміє передбачати ризики наперед і доводити проєкт до результату, який хочуть замовники. Поділиться досвідом Павло Харіков, former Head of PMO в Kyivstar.

Програма курсу і реєстрація