Development stacks!? I think this is my favorite assignment of 2020!

Now, I know you’re asking me to develop a technology stack for the AOPA app. The problem is… I hate that app. I know nothing about flying, pilot culture, flight procedures and, well, it’s a whole world that I am embarrassingly unfamiliar with. I am, however, very invested in the notion of developing apps for my own business and other businesses like it. So hopefully you’ll allow me some creative freedom here, on the last assignment of the term, and I can enthusiastically talk about the technology stack I’m working on in real life, and the reasons why I chose those technologies. I’d certainly love your feedback.

I also suspect there are a lot of similarities in the development stack for this app and the AOPA app. If you need me to stay on target with the AOPA process, ignore the Quick Project Pitch and skip to the technology stack and evaluate it for the AOPA app instead.

Quick Project Pitch

I own a window/exterior cleaning company. Just like any modern small business trying to be competitive in 2020 I have a website, CRM system, invoicing/quoting tool, call software, analytics software, and more. None of this technology natively talks to one another so I’ve tried my best to integrate them using the powerful API automation/integration tool, Zapier. There are, however, still areas of my business that I run off a spreadsheet because there’s just no better tool out there – building a quote is one example. This Frankenstein mess of different bits and pieces has been a major pain point for me for years.

I want to bring everything into my website. I want my customers to be users who can get unique benefits that they only get from being my customer. I want to provide commercial clients a platform for quickly and easily sending RFP’s on any of their properties, the details of which are captured, stored, and shared right there on my website. I want a quote tool I can stick in the hands of anyone to capture project data, but I don’t necessarily want them to know what the final quote amount was. I want all traffic, be it staff building a quote, users viewing a quote, paying an invoice, checking on the status or details of a scheduled service, to be happening on my business website which creates active usership, increased page hits, increased browse times, and overall generally improves the search rank and domain authority of my website, which in turn drives more organic traffic.

So, many months ago I decided to get interested in web development. I’ve been actively researching frameworks and libraries (I have to admit, I had no idea that React was a library until today – neat!) to understand exactly what I need in order to put it together. Finally, as this semester is wrapping up, I think I can speak confidently to my plan for the technology stack.

Frontend

Nuxt.js
Vuetify
HTML
CSS
JavaScript

I plan to use the frontend framework Nuxt.js for creating a responsive, dynamic website. The website will have static and dynamic pages. Static pages will need to have good SEO if I expect them to get seen by potential clients searching the web for exactly the services that I deliver, in the area I deliver them. It’s because of the importance of SEO that Nuxt is the perfect candidate. Nuxt is built on the Vue.js backbone and in many ways the two are very similar. Nuxt, however, has server-side rendering which allows pages to be put together before being served up to the client. That’s important because if you want crawler robots to index the full extent of your content, you need to serve up a page full of content – not promises.

The development of Nuxt pages and components is also a workflow that I really enjoy. I believe this is important when deciding what technologies your team is ultimately going to use. If I had a team of developers that had a specific set of skills in another framework, and really enjoyed working with that framework, so long as the technology fulfilled the needs of the application and satisfies the key elements of what it’s there to do, then I say go for it. When the developers are happy and engaged with the technology they’re working on then I believe that will directly influence their overall productivity and quality of work.

For the CSS framework I would probably choose Vuetify. CSS and beautiful design is not yet one of my strengths, so having a predefined style framework to work form will be a necessity. When an MVP is reached, I can always dive into the styles later to make changes as needed, but here the key function is fast and effective styling. More effective UI/UX styling changes can be made later in development. Vuetify is built to work with Vue apps (Nuxt is effectively Vue with extra features and slightly different function) and it seems to produce excellent results, has a healthy ecosystem as a popular Vue styling framework, and it’s overall easy to work with inside of a Nuxt application.

There is always a solid foundation of HTML, CSS, and JavaScript that will go into producing a functional Nuxt application. One of the awesome elements about Nuxt and styling is that it has scoped CSS styling which means that you can scope your CSS rules to a particular component. With Nuxt you also get HTML, CSS, and JS all in one .vue document. This means that you’re able to keep components clean, keep your file structure and dependencies more easily organized in your head while you’re writing code, and keep styling scoped to components to keep files small and modular instead of large and centralized.

Backend

Node.js
Axios
Google Firebase

Node is an open source and cross-platform environment for executing JavaScript code outside of a browser. Node effectively handles our API in our Nuxt application. Based on my research, it’s the most natural backend technology for our Nuxt application. Node is highly scalable, data intensive, and great for use in real-time backend services. Node is easy to get started with and great for prototyping. Node comes baked into the CLI installation of Nuxt.js.

Axios is a 3rd party JavaScript library which you can use in any JavaScript application. It leverages the power of asynchronous functions and promises to efficiently process requests and talk to our database. Axios has excellent browser support because it uses XML HTTP requests under the hood.  It’s fast, scalable, popular, efficient, and it works well with the technologies in our stack – more on that later.

Google Firebase offers some powerful server side functions and features. One feature in particular that I would most definitely like to roll into the app is Firebase Authentication. Simple, free, multi-platform sign-in, Firebase Authentication takes a lot of security topics off my plate as the developer while making it really easy to work into your app. This feature is essentially easy sign-in with any platform for our users and even for staff accounts. The authentication integration allows you to log in using your credentials for Google, Facebook, Twitter, GitHub, phone auth, and more, which creates a quick, easy, and hassle-free way for potential customers to sign up as a registered user of your services. There are also a number of other features of Firebase that I’ll skip over for the sake of time like scalable hosting, and integrations with Google Ads, Play Store, and more.

Databases

Google Cloud Firestore NoSQL DB
MySQL

I’m still a little bit green to NoSQL DB’s, so it might start out that I develop for a MySQL DB first for the MVP. What I understand about the problems with a SQL DB’s, the scalability isn’t there if I want to launch this into a product that I can turn around and sell to other exterior cleaning businesses. Ultimately, I want the power and flexibility of a NoSQL DB and I haven’t found anything that seems easier to use than Google Firebase Firestore.

Firestore is a flexible, scalable database for mobile, web, and server development. I feel a scalable NoSQL DB will be required at some point but I’d also like to use Firestore because it’s something I’m familiar with. I enjoy the way that I handle documents and data when bringing dynamic information into a Nuxt app. It seems to be the more flexible option overall.

Infrastructure

Google Cloud
GitHub

I’m not sure how much of the infrastructure you would consider as being part of the technology stack, but almost certainly I’d be using Google Cloud and GitHub for communication, documentation, version control, and more. I would consider this as an element of the stack because without it the stack becomes hard to manage and to develop in sync with each respective layer.

Mobile App

By building the web app as a responsive website I feel that the need for a platform-specific application isn’t a direction that I would go. I don’t necessarily want staff or users launching an app – instead I’d prefer to drive traffic to the website where they can login to use user features, and where their traffic logs and registers for improved search ranking. I’m not 100% sure that’s the way it works (I suppose only Google is 100% sure of the way their algorithm works) but I suspect that it would be a considerable improvement over competitors websites which should give me a noticeable edge.

 

Feature photo by Chokniti Khongchum from Pexels