This project was developed for Billor as part of a required internship program for my university.
The idea was to build an Application Catalog Manager, somewhat similar to SAP LeanIX, but in a smaller scope and more focused on what we needed for the internship project.
The main goal was: have a place where applications could be registered, documented, related to each other, and managed in a more structured way.
The problem
When a company has multiple internal systems, services, tools, and platforms, it can get hard to understand what exists, who owns what, and how everything connects.
You can probably keep this in spreadsheets for a while, but at some point it starts getting messy.
So, the idea here was to create a catalog where each application could have its own fact sheet with useful information about it.
Things like: Status, Application type, Providers, Owners, Lifecycle dates, Security Information, Notes, etc.
Basically, a central place to understand an application.
Tech stack
This project was built with:
- React
- TypeScript
- React Router v7
- React Query
- Tailwind CSS
- Firebase Authentication
- Firestore
- Firebase Storage
React Router was used for the routes and page structure.
React Query was used to deal with the data fetching and cache invalidation, which was pretty helpful because most of the app is basically CRUD with related entities. It was my first time using React Query, and I really enjoyed the developer experience!
Firebase was used as the backend, handling authentication, database storage, and file uploads.
Application fact sheet
The main page of the app is the application detail view, or the fact sheet.
This is where most of the information about an application lives.
One thing I wanted to avoid was having a bunch of separate edit pages for every field. So sections are editable inline.
You click edit, change the data, save it, and stay on the same page.
It makes the UI feel more direct, and for this kind of internal tool I think that works better than making the user jump around too much.
Relations between applications
One of the more interesting parts of the project was modeling relationships between applications.
An application can have predecessors and successors, and it can also have integrations with other applications.
So, for example, one system can depend on another one, or send data to another one through a specific kind of integration.
To make this easier to understand, I added a relations explorer.
The idea is to show these connections visually, instead of only showing them as plain lists.
It is not meant to be a full enterprise architecture visualization tool, but it helps a lot when trying to understand how one application is connected to the rest of the catalog.
Permissions
The app also has a simple access control flow.
Users can sign up, but they start as pending users. An admin needs to approve them before they can use the catalog.
There are also different roles, like viewer, editor, and admin.
This was important because even for an internal tool, not everyone should be able to change catalog data or manage users.
What I learned
This project was a good exercise in building a full application, not just isolated components.
Some things I got to work with:
- Using React Query for async state
- Building inline editing flows
- Modeling relationships between entities
- Working with Firebase Auth, Firestore, and Storage
- Writing access rules
- Thinking about UX for internal tools
The relations part was probably the most interesting one, because it forced me to think beyond simple CRUD.
It is one thing to store applications in a database. It is another thing to make their connections understandable.
Final thoughts
This ended up being more than just a CRUD application.
The interesting parts were around modeling relationships, keeping the fact sheet easy to edit, handling permissions, and making the catalog useful without overcomplicating it.
Of course, this is not SAP LeanIX, and it was never supposed to be.
But building a smaller and more focused version of that kind of tool was a good exercise in turning a business need into an actual product.