967 reads

How I Built a Warehouse Management App Called Cardus

by Imamuzzaki Abu SalamJanuary 11th, 2023

Too Long; Didn't Read

Cardus is a web app that allows users to create and manage their warehouse of items. Users can also share their warehouse or container with other users, allowing them to collaborate. The app is built with Next.js, a React framework, and deployed on Vercel. It also uses Trusted Web Activity, which allows the app to be installed on Android devices.

featured image - How I Built a Warehouse Management App Called Cardus

Cardus is a web app that allows users to create and manage their warehouse of items. Users can add items to their warehouse and quickly identify what box is storing what thing. Users can also share their warehouse or container with other users, allowing them to collaborate.

App Link

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

Play Store: TBD

Description

Cardus App is a web app project to challenge the boundary of web development for a mobile user. The app is built with Next.js, a React framework, and deployed on Vercel. The app is also a PWA, which We can install on mobile devices. The app also uses Trusted Web Activity, which allows the app to be installed on Android devices. The app also uses the Google Cloud Platform to store images and to run TensorFlow.js models to auto-detect objects in item images.

I want the app to be seamless, like a native app. There are onboarding screens, beautiful transitions, and smooth animations. The app also has a dark mode, a must for any modern app.

Link to Source Code

Cardus App: GitHub Repository

Permissive License

Apache-2.0 license

Background

⚡ Problem

Difficult to label the storage box
Hard to know where is the storage box
Hard to know what items are in which storage

It's challenging to manage personal warehouse/storage.

💡 Solution

Create a web app that allows users to create and manage their own warehouse of items
Users can add items to their warehouse and quickly identify what box is storing what item
Users can also share their warehouse or box with other users, allowing them to collaborate

How I built it

📚 Tech Stack

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

📖 The Process

We started by creating a Next.js app, and then we made a MongoDB Atlas cluster. We wanted to communicate easily with MongoDB, so we used ORM with Prisma. Our focus is a mobile web app, so we only care about the desktop after a while. We make it a PWA, a bottom navigation bar, a top bar, and a dark mode. We are also planning to make it a Trusted Web Activity so that we can install it on Android devices.

There are a lot of problems we're facing along the way. Using Google Cloud Storage API with a serverless function takes work. Just by using this, we are already facing a bunch of obstacles. Some can be solved by reading a forum; some need a workaround. Users love something clever, so we also want to make the app intelligent. We want to make the app able to detect the object in the image, so we use TensorFlow.js to do that. We also want to make the app able to scan the QR code, so we use ZXing to do that.