Приложение Cardus - приложение для управления персональными запасами с открытым исходным кодом

Что я создал

Cardus - это веб-приложение, которое позволяет пользователям создавать и управлять собственным складом вещей. Пользователи могут добавлять предметы на свой склад и быстро определять, в какой коробке хранится какая вещь. Пользователи также могут делиться своим складом или контейнером с другими пользователями, позволяя им сотрудничать.

Ссылка на приложение

Веб: https://cardus-app.vercel.app/

Play Store: TBD

Описание

Cardus App - это веб-проект, который ставит перед собой задачу расширить границы веб-разработки для мобильных пользователей. Приложение построено на Next.js, фреймворке React, и развернуто на Vercel. Приложение также является PWA, которое можно устанавливать на мобильные устройства. Приложение также использует Trusted Web Activity, что позволяет устанавливать его на устройства Android. Приложение также использует Google Cloud Platform для хранения изображений и запуска моделей TensorFlow.js для автоматического обнаружения объектов на изображениях предметов.

Я хочу, чтобы приложение было бесшовным, как родное приложение. Есть экраны приветствия, красивые переходы и плавная анимация. В приложении также есть темный режим, обязательный атрибут любого современного приложения.

Ссылка на исходный код

Cardus App: репозиторий GitHub

Лицензия

Apache-2.0 лицензия

Предыстория

⚡ Проблема

Сложно маркировать ящики для хранения
Трудно узнать, где находится ящик для хранения
Трудно узнать, какие предметы хранятся в каком хранилище

Управление личным складом/хранилищем - непростая задача.

💡 Решение

Создать веб-приложение, которое позволяет пользователям создавать и управлять собственным складом вещей
Пользователи могут добавлять предметы на свой склад и быстро определять, в какой коробке хранится какая вещь
Пользователи также могут делиться своим складом или коробкой с другими пользователями, позволяя им сотрудничать

Как я это построил

📚 Технологический стек

Next.js
React
MongoDB
Google Cloud Platform
TensorFlow.js
PWA
Trusted Web Activity

📖 Процесс

Мы начали с создания приложения Next.js, а затем создали кластер MongoDB Atlas. Мы хотели легко общаться с MongoDB, поэтому использовали ORM с Prisma. Наша цель - мобильное веб-приложение, поэтому мы заботимся о настольном компьютере только после того, как приложение будет запущено. Мы сделали его PWA, нижнюю панель навигации, верхнюю панель и темный режим. Мы также планируем сделать его Trusted Web Activity, чтобы мы могли установить его на устройства Android.

По пути мы столкнулись с множеством проблем. Использование API Google Cloud Storage с бессерверной функцией требует работы. Просто с помощью этого мы уже столкнулись с целым рядом препятствий. Некоторые из них можно решить, прочитав форум; некоторые требуют обходного пути. Пользователи любят умные вещи, поэтому мы также хотим сделать приложение интеллектуальным. Мы хотим, чтобы приложение могло обнаруживать объект на изображении, поэтому мы используем для этого TensorFlow.js. Мы также хотим, чтобы приложение могло сканировать QR-код, поэтому мы используем для этого ZXing.

📝 Что я узнал

Как использовать Next.js для создания веб-приложения
Как использовать MongoDB Atlas для хранения данных
Как использовать Google Cloud Platform для хранения изображений
Как использовать TensorFlow.js для запуска моделей в браузере
Как использовать PWA, чтобы сделать приложение устанавливаемым
Как использовать Trusted Web Activity, чтобы сделать приложение устанавливаемым на устройства Android