home-inventory

Learn about the ideas and technogolies used in home-inventory

Open ProjectView on GitHub

2 min read

— views

Introduction

home-inventory is a web application to keep track of items in your house such as food items, medical supplies, tech, etc.

Idea

I wanted to know what kinds of tech, foods, and miscellaneous items I have in my house, so I could know when I should buy new ones or know when they almost expire. But that wasn't all, I wanted: a modern and good-looking UI, a "quick-view dashboard" to see what is low on quantity or is almost expired.

Sorting, filtering and categorization was also a must. Filtering and sorting was done with @tanstack/react-table. Administrators could manage the categories that could be given to an item. Another cool feature was to authenticate with an OAuth provider, I chose Google Oauth because it is the most popular. Administrators can also add or remove users from their houses.

Future ideas

A way to import or export items will definitely be needed for faster and easier management.

Technologies

home-inventory is built with Next.js and React.js with a tRPC API. I chose this tech to learn about tRPC and see what I could build with it. At the same time, I also learned how to use react-query.

I will most likely use tRPC again in future projects because it's so fast to set up and easy to use.

I'm using Tailwind CSS to style the UI. Using tRPC with react-query to manage server-state, client-state uses React.useState for local state. Using react-hook-form for building forms, validating them with zod schemas. The API uses the same schema as the frontend for body validation.

home-inventory's data is saved in a MongoDB database, I found it the easiest way to store the data in the cloud. Personally, I think Prisma is the best decision for database ORM.

Features

  • Manage products
    • Set a name, price, quantity, category, expiration date and more.
    • Advanced sorting, filtering and selection
  • Create/edit categories to categorize products
  • Manage users
    • Add users to a house
    • Delete users from a house.
  • Great UI/UX
  • Privacy focused

Full tech stack

Web/API

  • React.js
  • Next.js
  • Tailwind CSS
  • tRPC
  • Prisma
  • MongoDB

Other

  • Docker Compose
  • Husky
  • ESLint
  • Prettier
  • TypeScript