I am writing a blog about my journey to create a side-hustle software project brick-by-brick. I have an end goal solution in mind, but before I start on that solution I am building some projects to ‘level up’ the skills that I think I will need to build it.
For my first project, I decided to build a front-end only meeting timer website in Vue, using Vueitfy for UX framework and Vite as a tooling engine.You can find more information about why I chose these technologies in previous posts.
In this quick post I’ll link to the public repository for the site for anyone who wants to look
through the code.
Project 1 Code - initial version
You can find the source code for the initial version here Github
The best thing that can be said for this is probably that it works? This was my first experience using Vuetify bootstrap project and it probably shows. That being said, it gets the job done gave me enough of a boost with learning Vue that I think I’ll soon be ready to move onto something more ambitious.
- /index.html - this is the actual html page that loads the vue application.It runs the script in main.ts
- src/main.ts - this is the main typescript application entry point for the application. It bootstraps vue and creates the vue application, mounting the App.vue component
- src/App.vue - this is the main 'container' for the application. It sets up the vuetify layout system and the sets up a router view that renders sub components based on the URL path
- src/pages/index.vue this is the 'main page' of the meeting timer application. It initializes the timer and switches the various UI components on and off
- src/components/* these are the various UI components that handle the meeting settings form, the timer display and the focused display and the 'about' overlay
- src/components/utilities/timerstate.ts - this module maintains the state of the timer and handles the presentation logic.
