Cardus App - Aplicación de gestión de almacén personal de código abierto

Lo que construí

Cardus es una aplicación web que permite a los usuarios crear y administrar su almacén de artículos. Los usuarios pueden agregar artículos a su almacén e identificar rápidamente qué caja almacena qué cosa. Los usuarios también pueden compartir su almacén o contenedor con otros usuarios, permitiéndoles colaborar.

Enlace de la aplicación

Web: https://cardus-app.vercel.app/

Play Store: TBD

Descripción

Cardus App es un proyecto de aplicación web para desafiar el límite del desarrollo web para un usuario móvil. La aplicación está construida con Next.js, un framework de React, y desplegada en Vercel. La aplicación también es una PWA, que podemos instalar en dispositivos móviles. La aplicación también utiliza Trusted Web Activity, lo que permite instalar la aplicación en dispositivos Android. La aplicación también utiliza Google Cloud Platform para almacenar imágenes y ejecutar modelos de TensorFlow.js para detectar objetos automáticamente en las imágenes de artículos.

Quiero que la aplicación sea perfecta, como una aplicación nativa. Hay pantallas de incorporación, transiciones hermosas y animaciones suaves. La aplicación también tiene un modo oscuro, algo imprescindible para cualquier aplicación moderna.

Enlace al código fuente

Aplicación Cardus: Repositorio de GitHub

Licencia permisiva

Licencia Apache-2.0

Antecedentes

⚡ Problema

Difícil de etiquetar la caja de almacenamiento
Difícil saber dónde está la caja de almacenamiento
Difícil saber qué artículos están en qué almacenamiento

Es un desafío administrar el almacén/almacenamiento personal.

💡 Solución

Crear una aplicación web que permita a los usuarios crear y administrar su propio almacén de artículos
Los usuarios pueden agregar artículos a su almacén e identificar rápidamente qué caja almacena qué artículo
Los usuarios también pueden compartir su almacén o caja con otros usuarios, permitiéndoles colaborar

Cómo lo construí

📚 Pila tecnológica

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

📖 El proceso

Comenzamos creando una aplicación Next.js, y luego creamos un clúster de MongoDB Atlas. Queríamos comunicarnos fácilmente con MongoDB, así que usamos ORM con Prisma. Nuestro enfoque es una aplicación web móvil, por lo que solo nos preocupamos por el escritorio después de un tiempo. Lo convertimos en una PWA, una barra de navegación inferior, una barra superior y un modo oscuro. También estamos planeando convertirlo en una Trusted Web Activity para que podamos instalarlo en dispositivos Android.

Hay muchos problemas que estamos enfrentando en el camino. Usar la API de Google Cloud Storage con una función sin servidor requiere trabajo. Solo al usar esto, ya estamos enfrentando un montón de obstáculos. Algunos se pueden resolver leyendo un foro; algunos necesitan una solución alternativa. A los usuarios les encanta algo inteligente, por lo que también queremos hacer que la aplicación sea inteligente. Queremos hacer que la aplicación pueda detectar el objeto en la imagen, por lo que usamos TensorFlow.js para hacerlo. También queremos hacer que la aplicación pueda escanear el código QR, por lo que usamos ZXing para hacerlo.

📝 Lo que aprendí

Cómo usar Next.js para construir una aplicación web
Cómo usar MongoDB Atlas para almacenar datos
Cómo usar Google Cloud Platform para almacenar imágenes
Cómo usar TensorFlow.js para ejecutar modelos en el navegador
Cómo usar PWA para hacer que la aplicación sea instalable
Cómo usar Trusted Web Activity para hacer que la aplicación sea instalable en dispositivos Android