DEV Community

Imamuzzaki Abu Salam
Imamuzzaki Abu Salam

Posted on • Updated on

Cardus App - Open Source Personal Warehouse Management App

What I built

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

Category Submission: Google Cloud Superstar

App Link

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

Screenshots

Onboarding Screen

Home Screen

Scan Screen

Box Screen

Add Item Screen

Add Box Screen

Description

Cardus App is a web app project to challange the boundry of web development for mobile user. The app is built with Next.js, a React framework, and deployed on Vercel. The app is also a PWA, which means it can be installed on mobile devices. The app also uses Trusted Web Activity, which allows the app to be installed on Android devices. The app also uses 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 seamlessly like native app, there are onboarding screen, beautiful transition, and smooth animations. The app also has a dark mode, which is a must for any modern app.

Link to Source Code

Cardus App: GitHub Repository

Permissive License

Apache-2.0 license

Background

⚡ Problem

My initial intention was just to help me manage the items stored in my parents' house. Because there they store things in cardboard boxes, and unfortunately when we need something, we forget where we put the things, so we look for them one by one and rearrange them whether we manage to find them or not.

I really don't like a lot of work that doesn't produce results, so I created this application so that we work a little but make sure we can find the items we need.

  • 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 easily identify what box is storing what item
  • Users can also share their warehouse or box with other users, allowing them to collaborate together

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 created a MongoDB Atlas cluster. We wanted to easily communicate with MongoDB, so we also using ORM with Prisma. Mobile web app is our focus here, so we don't care about the desktop at first. We make it a PWA, a bottom navigation bar, top bar, and a dark mode. We also planning to make it a Trusted Web Activity, so we can install it on Android devices.

There are a lot of problem we're facing along the way. Using Google Cloud Storage API with serverless function is not easy, just by using this, we already facing a bunch of obstacles. Some can be solved by reading a forum and some just need a workaround to deal with. User love something smart, so we also want to make the app smart. 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.

📝 What I learned:

  • How to use Next.js to build a web app
  • How to use MongoDB Atlas to store data
  • How to use Google Cloud Platform to store images
  • How to use TensorFlow.js to run models in the browser
  • How to use PWA to make the app installable
  • How to use Trusted Web Activity to make the app installable on Android devices

Additional Resources/Info

Top comments (6)

Collapse
 
syafiq1331 profile image
Syafiq Rizky Fauzi

Great as usually 💯

Collapse
 
imamdev_ profile image
Imamuzzaki Abu Salam

Let me know if there any bug or feature request 💖

Collapse
 
duranbe profile image
Benoît Durand • Edited

It's nice to see a B2B app !

Collapse
 
imamdev_ profile image
Imamuzzaki Abu Salam

Thanks 👍

Actually, my initial intention was just to help me manage the items stored in my parents' house. Because there they store things in cardboard boxes, and unfortunately when we need something, we forget where we put the things, so we look for them one by one and rearrange them whether we manage to find them or not.

I really don't like a lot of work that doesn't produce results, so I created this application so that we work a little but make sure we can find the items we need.

Collapse
 
syarifys profile image
Syarif Ys

Interesting app

Collapse
 
imamdev_ profile image
Imamuzzaki Abu Salam

Thanks 🧋