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
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
Permissive 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
Top comments (6)
Great as usually 💯
Let me know if there any bug or feature request 💖
It's nice to see a B2B app !
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.
Interesting app
Thanks 🧋