Projects en français

Home Inventory App

Project Overview

This project was completed as part of the RNCP certification Application Developer Designer, in collaboration with Pierre Pedrono.

It consists of building a web application called Home Inventory App, aimed at helping users list, organize, and categorize their personal items in a structured way. The app also aims to simplify sharing and collaborative management within a household or between multiple users.

The main goal was to create an intuitive, functional application tailored to real user needs for managing personal belongings.

Tech Stack and Tools

Design

We first defined the key features through personas, then moved on to database architecture and wireframes.

Entity-relationship diagram showing users linked to homes, rooms, and items, with permission tables.
Logical Data Model (LDM).

The database design followed a progressive approach, starting from a Conceptual Data Model (CDM) to identify key entities and relationships (users, homes, rooms, items, media), and then translating it into a Logical Data Model (LDM).

Many-to-many relationships were normalized via junction tables (UserHome, UserRoom, etc.), enabling fine-grained permission management while ensuring data consistency. This structure facilitates multi-user collaboration and allows flexible item relocation between homes.

Wireframes created in Figma, showing pages such as item detail, item creation, home settings, and related modals.
Some project wireframes in Figma.

Created in Figma, the wireframes define the interface structure and user flows. They laid the groundwork for navigation, admin pages (dashboard, settings, forms), and helped validate usability before visual design.

High-fidelity mockup of the dashboard, showing recently added items, recently modified rooms, and items with expiring warranties.
One high-fidelity mockup in Figma.

The high-fidelity mockups turned wireframes into complete interfaces, incorporating the design system (Geist font, accessible colors, shadcn/ui components). Desktop and mobile versions were created and served as the direct basis for development.

Accessibility was prioritized at this stage, with sufficient contrast, clear hierarchy, and the use of components that follow accessibility standards (ARIA, semantic HTML, etc.).

Layered Architecture

A diagram of the overall project architecture, showing frontend/backend communication and used technologies.
Global architecture diagram.

The application follows a modular layered architecture, with a clear separation between the frontend and backend. The project is split across two Git repositories. This makes it easier to test or replace each part independently in the future.

Backend Structure

The backend is structured into distinct layers:

Screenshot of 'item' routes with middlewares.
Routes with middleware.

Frontend Structure

The frontend adopts a hybrid approach, combining two methods. First, the Next.js app router system, which structures the organization of pages according to the application's folders. And secondly, a Domain-Driven Design (DDD)-inspired modular organization for everything else.

Each domain includes a standardized internal structure:

Screenshot of the 'home' domain structure showing hooks, types, endpoints, and context.
Example domain structure.

Implementation

We chose not to implement media/file upload due to time constraints (1 day per week).

Dashboard screenshot showing 9 most recently added items.
A home's dashboard.
Screenshot of the item creation page, showing fields: name, description, price, purchase date, followed by room and visibility selectors, and a warranty toggle.
Item creation page.
Screenshot of the home settings page with panels for managing rooms and users.
Home settings page.

Home administrators can create invite codes to let users join the home.

Screenshot of the account settings page with fields to update name, email, and password.
Account settings page.

Users can, of course, delete their account, along with everything linked to it.

Dashboard screenshot with dark mode enabled.
Dark mode was also implemented, as it's always nice to have the choice.

Security

User data security was integrated from the early stages of development. Authentication relies on a JWT-based system stored in secure, HTTP-only cookies to prevent XSS or CSRF attacks. On the backend, every sensitive route is protected by middlewares that check both the user's identity and permissions.

User input is sanitized automatically before being saved to the database via a sanitization middleware. Finally, all sensitive actions are double-checked — first in the frontend, then on the server — ensuring security against URL/API tampering.

Testing

The app includes unit tests on the backend and end-to-end (E2E) tests on the frontend. Backend tests (written in Jest) validate critical API functions like item retrieval or updates with permission checks. On the frontend, Cypress E2E scenarios cover full user flows like account creation, joining a shared home, or editing restrictions for items owned by others.

Deployment

The app is fully self-hosted on a VPS provided by Hetzner. Deployment is managed via Coolify, which simplifies container orchestration. The frontend, backend, and PostgreSQL database each run in separate containers. Improving service isolation and making maintenance easier.

A CI/CD pipeline is set up using GitHub Actions. On each push to main or dev, tests are run, code is auto-formatted, a build is generated, and if successful, a webhook triggers a redeploy on Coolify.

Improvements