Smidae

Webdev

Motivation

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.

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 HASURA_ADMIN_SECRET = process.env.VUE_APP_HASURA_ADMIN_SECRET;
const HASURA_URL = process.env.VUE_APP_HASURA_API_URL

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

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

export const apolloClient = new ApolloClient({
  uri: HASURA_URL,
  headers,
});

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) {
      id
      name
      qty
      unit
      price
      slug
      ref
      category {
        slug
        ref
      }
      media {
        id
        url
      }
      tags {
        id
        value
      }
      created_at
      updated_at
    }
  }
`;

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?

Design

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.

Summary

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 😉