I have decided to remake what i had made in the first software inventory app. The decision comes from the fact that i felt it needed something, something that would be hard to incorporate into the existing project.

As with most of my projects including a website it’s going to be based on Vue3 but without Tailwind, Vuetify or similar frontend framework / library. I made this decision to get better at the visual part of web development but also to get complete control over even the smallest parts of the system. I choose to include VueUse for things that seem redundant like making HTTP requests.

The Frontend so far

Below is an image of the login page so far, as seen the style is really basic with lots of room for improvement.

I18n

I choose to support I18n as i want to learn more about accessibility on the web and ways to make a website more user friendly. I’m currently using a tool called Accent, which i’m selfhosting on my homelab.

Validation

Something i thought that should be included no matter what was Vuelidate, because it makes validations simpler and easier to understand - and it is really easy to expand with custom validators.

Below i have an example of how i’m using vuelidate on the login page.

// ... imports

const userInfo = ref({
    email: "",
    password: ""
});

const rules = {
    email: {
        required: helpers.withMessage(t("validators.required"), required),
        email: helpers.withMessage(t("validators.email"), email)
    },
    password: {
        required: helpers.withMessage(t("validators.required"), required)
    }
}

const v = useVuelidate(rules, userInfo);

/// rest of the code.

With this i can just call await v.value.$validate() to return a boolean with the validation state. In the view i’m using custom input components with the following code which shows a error on failure.

<input class="input" :type="type" v-model="modelValue" @blur="v.val.$touch" />
<div v-for="error of v.val.$errors" :key="error.$uid">
    <div class="error-message"></div>
</div>

The backend

The backend is developed in NextJS with typescript and Postgres as the database using TypeORM. I’m currently trying to port the v1 codebase to the v2 repository, while trying to extend it with some neat new features like a Glances integration for host monitoring.

Conclusion

I’m still actively developing the project, codenamed S.I.M.S v2 - for Sebastian’s Infrastructure Management System.

The plan is to make more integrations like Glances in the future.

Roadmap

• Service Autodiscovery
• Ansible Integration