Back to portfolio

Smidae Project


February 13, 2023


One of the things I kept from my Telecommunications Engineering career was the passion for electronics and DIY Projects. I started to accumulate a lot of components in my home office, Arduino boards, cables, tools like soldering iron, etc until I got to a point that actually wasn't aware of how much stock I had if they were already used and so on. So how can I solve it 🤔?

I started keeping a stock inventory in a Google sheet, but soon the "Frontend Urge" of doing a nice interface to control my electronic supplies was knocking on the door.

Smidae is one of the first products I conceptualized entirely from design to actual implementation. If you want to learn how I did it I invite you to read the rest of the content on this page.

Smidae Categories

The current version of SMIDAE is still a work in progress and is done in Vue.js along with Hasura as BaaS (Backend as a service) which use an awesome combination of Grapqhl as query language + Postgresql for the database.

For the images hosting, I use Cloudinary which is fairly awesome.

But it wasn't always like that, first versions were done in Angular 2 + Node Express backend. I decided to reboot the project as an excuse to get more proficient in Vue and learn Graphql. Which worked just perfectly.

Vue + BootstrapVue

I think it was my second or third app with vue. For convenience, I ended up transferring the responsibility for most of the components to BootstrapVue which helped me have a totally functional PoC without struggling too much with functionality and styling.

Hasura as BaaS

This was my favorite part of the whole app, for a long time I struggled to have a decent backend for my personal projects until I met Hasura.

Look at this integration to Hasura using Graphql queries using apollo-boost to create the apiClient:

import ApolloClient from 'apollo-boost';


const headers = {
  'x-hasura-admin-secret': HASURA_ADMIN_SECRET,

const cloudinaryHeaders = {
  'X-Requested-With': 'XMLHttpRequest',

export const apolloClient = new ApolloClient({
  uri: HASURA_URL,

Then with graphql-tag package, I was able to create the Graphql queries like a pro.

import gql from 'graphql-tag';

export const FETCH_PRODUCTS = gql`
  query($order_by: [products_order_by!]!) {
    products(order_by: $order_by) {
      category {
      media {
      tags {

As simple as calling this function from an Vuex action:

const getProducts = async () => {
  try {
    return apolloClient.query({
      query: FETCH_PRODUCTS,
      variables: {
        order_by: { created_at: 'asc' },
  } catch (e) {
    console.error('err', e);

So beautiful right?


For a short period of time, I was obsessed with Material Design and this app actually reflects that tendency. Highly inspired by Sparkfun the app mixes an e-commerce feeling on products (product gallery with images, prices, etc).

The Fritzing App was also a source of inspiration, I always liked the overall look-n-feel of the app, with the components SVG's and the OCR font which looks so good on headlines.

To complement the headlines I choose google font PT Sans with adds a nice contrast and legibility for reading.


This project was a nice way to reinforce my knowledge of Vue and Graphql and It's totally functional, my whole electronic stock is controlled by the app.

Probably one of the next steps is to refactor the code using Composition API which is an ideal use case for me to practice (the codebase is big and I will be happy to organize it in features and remove the mixins)

The app is hosted on a local server in my house since I don't really need it to be online, but if someone is interested to see in action I could deploy a mock version to Netlify, just ping me on Twitter @alvarosabu 😉