My Development Lifecycle

Here's how I went from having an idea, to having it served as a production application.

  1. Conception from Ideas
    1. I think about a problem I have, that could really use some technology.
    2. In the past, I would use an Excel spreadsheet to track how much people owed me, and it was messy and prone to errors.
  2. Figure out Core Actions
    1. I then try to think about "What's one thing that if I do could save a lot of time?"
  3. Wireframing and Designing
    1. Afterwards, I work out a rough plan of the web app. Figma is my personal choice of UI design tool.
  4. Plan out my Tech Stack.
    1. Before starting the project, I would think about what sort of technologies am I expecting myself to utilize.
      1. For example, I needed an app-like experience for my web-app Quicktrack, and so I decided to go for Vue + Vue Router + PWA for the frontend.
      2. For my personal website, since it's going to have multiple different category of things and doesn't have a lot of business logic, I decided to go for Nuxt, and utilize it's rich support from modules.
      3. Otherwise, if I need to serve simple HTTPs with some backend functionality, I could go for Flask.
  5. Writing out the Code
    1. Usually how I go about big projects is I mostly doddle in business logic and core functionalities. Once I get those done then I will start working on the finer details such as styling, fonts and icons.
    2. Testing is also quite important especially on business logic to ensure that they are safe and are not prone to attacks.
  6. Deploying the Application.
    1. After ensuring that the app is ready for deployment, I would host it on a Digital Ocean server with the help of Dokku. Dokku makes multi-app deployment very easy, and has features like logging, SSL certificates, and more. It's based on Heroku, so if you have experience with it before, then the learning curve should be much better.

Techs I Like

  • vue: Having written quicktrack-lite in React and quicktrack in Vue, I found that I personally prefer SFC more. Maybe it's because I started out with Vue, but I find myself just having a better time with Vue, compared to React. I couldn't say the same pre-vue 3.0, however.
  • figma: I used to think that "If I need to roughly plan out a design, why not just write out the code?". Little do I know that Figma really made prototyping UI quick. From the ability to create component and auto-layout, all the way to generating the code for the UI, Figma just improves quality of life by quite a lot.
  • tailwindcss: allows me to write out CSS very fast. I don't have to think about names, which is amazing. If some form of DRY is needed, I can quickly turn the objects into a Vue primitive.
  • typescript: I have built a sort of love-hate relationship with TypeScript. When I was working on Quicktrack 2.0, I was having a lot of trouble with nulls and undefined errors resulted from dynamic typing (plus skill issue), and I was very close to done. At the time, I knew that typescript was a thing, but didn't know about it very well. after messing around in they playground, I was hooked and eventually moved to vite and typescript. However, I hate having to do type gymnastic around type and prop definitions, for sure.

My Tech Stack

Frontend

  • vite
  • vite-plugin-pwa - for spa
  • vue
  • pinia - for spa
  • vue-router - for spa
  • tailwindcss
  • typescript
  • axios - for spa

Backend

  • django - if auth and a lot of business logic is expected
  • nuxt - if not a lot of business logic is expected, but need spa
  • flask - if simple https with minor business logic is expected
  • postgresql - preferred db

Sysadmin

  • dokku - for managing deployment
  • digitalocean - preferred server

UI/UX

  • figma
  • simpleicons

Currently trying out

Serverless

  • vercel and vercel/postgres - trying out vercel in general
  • drizzle - for when working with nuxt