Website Project 1: HowMuchIsThatMeetingCosting? Introduction

 

As mentioned, I am trying to 'level up' my business and development skills as part of building a side hustle software-as-a-service business.   

For my first 'skill up' exercise I have decided to build and host a simple front-end only website using a 'modern' JavaScript stack. 

The website is https://howmuchisthismeetingcosting.com and it was inspired by the large amounts of seemingly unnecessary meetings that infest cubicle life.  The website simply lets you enter the number of participants in the meeting and an average cost per hour for each participate, then it calculates the running total of how much money is being wasted by corporate blather. 

(There are lots of other sites out there that do the same thing, but I like this idea for a skill up project because it is simple and achievable while providing enough complexity to make it a useful learning exercise for a new tech stack,  but still make something somewhat 'useful')

This article will explain the technical stack I chose. In later articles I'll try and capture some of the things that I learned from building the site.

Side Hustle Technology Stack - Front End - Version 1

Note:  technology caveat #1- choosing a technology stack is  inherently an opinionated exercise. There is rarely 'one true choice' for which technology set to use to solve a problem and there are always non-functional trade offs, skill set dependencies and personal biases that will come into play.  A choice that makes sense in one set of circumstances will often be a choice that would not make sense in a different environment or for different people.  The technology choices I present here are just the ones that I chose that make sense to me.  There are certainly other options that would make more sense to other people in other circumstances.  The key is to try and understand the pros and cons of each choice and make an informed decision.

For this project,  the technology stack I ended up with is as follows:

• JavaScript Framework: VueJS + Typescript
• CSS Framework:  Vuetify
• JS Tooling/Runner: Vite
• JS Package Manager: npm
• IDE: Visual Studio Code
• VCS: Github
• Host: CloudFlare

This stack will probably make some people seethe, and maybe a few people nod wisely but I'll try and justify the choices below.

Vue.JS and Typescript.    

Why Vue?  This is as much a personal choice as anything I can justify technically. I want to use a current JavaScript framework and I've played with Angular and React enough in the past to want to try something different.  In my part of the world Angular is still the 'corporate' choice and would be the smart framework to dive into to build employability...but to be honest I wanted to try something fresher.  Similarly I didn't really enjoy React when I last tried it (admittedly that was years ago).    After playing with Vue a little it seemed like a great balance between Angular's heavyweight approach and React's skinny approach to JS development. I also really like the SFC component way of separating HTML, CSS and script concerns while keeping everything  related to single UX component in the same file.  

OK, so why TypeScript?  I am used to coding in strongly typed languages and prefer the compiler to catching stupid errors before they hit runtime. Learning Typescript seems to add some initial overhead but should pay off by helping to avoid runtime issues in the future.  When I build my SAAS I want it to be robust, and Typescript seems to be an appropriate choice to make that happen.  

Vuetify

I suck at web UX, so I need a lot of help. I have had previous experience with Bootstrap and even (gasp) JQuery but that's about it. 

Vuetify seems like a  robust a UX framework that works well out of the box with Vue and it seems easy enough to use for a UX novice.  The documentation and examples also seems complete and easy to follow. I particularly like the fact that each example has a live code option that you can use to experiment with. The alternatives out there seem to be either less supported, or more low level approaches like Tailwind, which seems a step too far at the moment. Vuetify seems to have the features that I need and to work enough 'out of the box' to get started with. 

Vite

Since I landed on Vue and Vuetify, I decided to bootstrap the project using the Vuetify 'getting started' example project:  https://vuetifyjs.com/en/getting-started/installation/. The first recommended tooling option there is Vite, and after looking into it it seems to dovetail nicely with Vue and Vuetify. In fact the three technologies seem to form a nicely integrated set for front-end development. 

NPM

I stuck with NPM as a package manager because I am familiar with it and it seems to work well enough. It also still seems to be mainstream enough to be well supported.  The major downside that I can see is the potential duplication of node modules in each project, but I can live with that for now. 

VSCode

VSCode seems like a no-brainer for Typescript and Vue development. It is free, highly customizable and works well on multiple Operating Systems. I've being using it for years - and it seems to still be improving.   Eventually I may move to a cloud based IDE, but for now it seems to do everything I need.  

GitHub

Every project needs a version control system. GitHub also seems like a no-brainer here. I can't think of a reason not to use it or a viable alternative that offers better features.

CloudFlare

I ended up using CloudFlare as a free hosting option.  I used CloudFlare to register the DNS name for the site and using the same provider to host the site for free seemed to make sense.  I'll probably post more about this in a future article.

That's probably enough to introduce the project. In future posts I'll look at some of the things I learned and how this project contributed to my side hustle journey.

Concepts of a plan

 

If the core of this blog is going to be about my journey to build a side business 'brick by brick', then I had better share some intent as to how that is going to happen.

I do have an end goal in mind - a 'concept of a plan' if you will - but I am not quite ready to share that in detail. For now, suffice it to say that I want to build a software-as-a-service (SAAS) business (based around the industrial use of augmented reality technologies. I have been working with AR/VR technologies for years now and I think I see a niche where I can build a product that will add significant value.  Let's call that the 'big SAAS goal' and park it for now because there are some steps I think I need to complete before starting.

Building an enterprise grade SAAS solution is not easy, and may not even be feasible as a side-hustle.  Before I commit to building a complex distributed solution that is likely to take months of development, I want to start smaller and build some confidence (and competence!) by tackling some smaller projects.

My development experience is largely in  enterprise integration and XR  development, focusing on .NET,  Unity and Microsoft Azure Enterprise technologies.  This means that I am most comfortable with back-end development and working in a Microsoft Azure environment, but it also means that I don't have a lot of current experience with non-MS hosting options and with front-end (e.g. web/mobile UX) development.

There are a few reasons why this concerns me:  

Firstly, Azure is expensive.   Anything based on Azure is likely to cost more money than I prepared to invest right now.   I am going to try and get this side hustle going for $0 dollars.  This means that I need to start making money before considering a paid hosting option.

Yes - there are startup programs and free monthly credits etc etc and I am aware of them but a quick look at their hosting costs for a simple webapp + SQL database gives me concern.  Azure is great when someone else is paying for it, but if it is my money then I want to look at other options before committing.  

Secondly,  my big SAAS idea has a user design component that is going to need some web-centric UX development.  While I could potentially use Blazor for this, I would like to try improving my JavaScript skills with a JS first web/UX technology.

Thirdly, a key motivation of this whole exercise is to avoid boredom.  While I want to eventually make some money I wan't to enjoy the journey - and for me learning new technologies is both something I enjoy and something that makes me more employable if the whole 'side hustle' thing doesn't work out.

I love RPG games. So to use an RPG analogy I need to grind some experience and level up before taking on the Big Bad Evil Guy.   Also, like RPG games I have a skill tree that I need to complete as part of this levelling up process before I feel comfortable with starting development for The Big Idea.

The first skill I want to 'unlock' is JS web development.  So, the first project I am going to tackle is to build and host a simple front-end only web site.  

Introductions

 This is the ParsecXR blog. Welcome.

This blog is about eXtended Reality, side-hustles, software development and whatever else I feel like rambling about. It may also be a form of therapy.  At the very least it could be a way for me to improve my writing skills. Let's see how that goes. 

I am going to try and use it to track my progress with building  my own side business and sharing what I learn on the way. The aim here is for a win-win proposition. I keep myself on track by journaling what I learn, and you get to (hopefully) learn from my mistakes along the way.

Firstly, let's some introductions and caveats.

Allow me to introduce...myself.  I am a 50+ year old software engineer with a family, house, an old dog and a steady (but dull) job. Having ticked most of the 'game of life' boxes, I am looking to build a side business that I can transition to instead of working 9-5 in a cubicle.  I've lived the Dilbert cubicle life for 25+ years and I am beyond done with that way of working.  It gets a little harder to stomach each day.

But, I am also financially restrained and I'm not ready to turn off the tap on a reliable income stream just yet.  I'd rather build something on the side 'brick by brick' in my own time instead of taking a leap into the unknown.   Building something on the side will (hopefully) keep me sane during the endless scrum meetings. 

Now the caveats.  I am a competent programmer, but not a great one.  If other developers are artists then I am a house painter.  I'll get the job done and your house will even look nice, but don't expect me to paint anything that you'd want to hang in an art gallery.   This won't be a blog about programming excellence, but will hopefully have enough practical tips to make it worth visiting occasionally.  

I am also a massive introvert. I hate socialising.  Crowds freak me out., and I am deeply uncomfortable with people I don't know.  Also, the internet is full of crazies, and some of you out there are real weirdos. For those reasons, this blog is going to be more or less anonymous. 

For the purposes of imagination - if you feel the need to picture me - think about a cross between Arnold Rimmer and Joe 90.  If that doesn't scare you off then feel free to read on.