Application Cardus - Application de gestion d'inventaire open source et personnelle

Ce que j'ai construit

Cardus est une application web qui permet aux utilisateurs de créer et de gérer leur propre entrepôt d'articles. Les utilisateurs peuvent ajouter des articles à leur entrepôt et identifier rapidement quelle boîte stocke quel objet. Les utilisateurs peuvent également partager leur entrepôt ou leur conteneur avec d'autres utilisateurs, ce qui leur permet de collaborer.

Lien de l'application

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

Play Store: A déterminer

Description

Cardus App est un projet d'application web visant à repousser les limites du développement web pour un utilisateur mobile. L'application est construite avec Next.js, un framework React, et déployée sur Vercel. L'application est également une PWA, ce qui nous permet de l'installer sur des appareils mobiles. L'application utilise également Trusted Web Activity, ce qui permet de l'installer sur des appareils Android. L'application utilise également Google Cloud Platform pour stocker des images et exécuter des modèles TensorFlow.js pour détecter automatiquement les objets dans les images d'articles.

Je souhaite que l'application soit transparente, comme une application native. Il y a des écrans d'accueil, de belles transitions et des animations fluides. L'application possède également un mode sombre, un must pour toute application moderne.

Lien vers le code source

Cardus App: GitHub Repository

Licence permissive

Licence Apache-2.0

Contexte

⚡ Problème

Difficile d'étiqueter la boîte de stockage
Difficile de savoir où se trouve la boîte de stockage
Difficile de savoir quels articles se trouvent dans quel stockage

Il est difficile de gérer un entrepôt/stockage personnel.

💡 Solution

Créer une application web qui permet aux utilisateurs de créer et de gérer leur propre entrepôt d'articles
Les utilisateurs peuvent ajouter des articles à leur entrepôt et identifier rapidement quelle boîte stocke quel article
Les utilisateurs peuvent également partager leur entrepôt ou leur boîte avec d'autres utilisateurs, ce qui leur permet de collaborer

Comment je l'ai construit

📚 Pile technologique

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

📖 Le processus

Nous avons commencé par créer une application Next.js, puis nous avons créé un cluster MongoDB Atlas. Nous voulions communiquer facilement avec MongoDB, nous avons donc utilisé ORM avec Prisma. Notre objectif est une application web mobile, nous ne nous soucions donc que du bureau après un certain temps. Nous en faisons une PWA, une barre de navigation inférieure, une barre supérieure et un mode sombre. Nous prévoyons également d'en faire une Trusted Web Activity afin de pouvoir l'installer sur des appareils Android.

Nous rencontrons de nombreux problèmes en cours de route. Utiliser l'API Google Cloud Storage avec une fonction serverless nécessite du travail. Rien qu'en utilisant cela, nous rencontrons déjà une série d'obstacles. Certains peuvent être résolus en lisant un forum ; d'autres nécessitent une solution de contournement. Les utilisateurs aiment les choses intelligentes, nous voulons donc également rendre l'application intelligente. Nous voulons que l'application puisse détecter l'objet dans l'image, nous utilisons donc TensorFlow.js pour cela. Nous voulons également que l'application puisse scanner le code QR, nous utilisons donc ZXing pour cela.

📝 Ce que j'ai appris

Comment utiliser Next.js pour construire une application web
Comment utiliser MongoDB Atlas pour stocker des données
Comment utiliser Google Cloud Platform pour stocker des images
Comment utiliser TensorFlow.js pour exécuter des modèles dans le navigateur
Comment utiliser PWA pour rendre l'application installable
Comment utiliser Trusted Web Activity pour rendre l'application installable sur les appareils Android