Notes

Progressive Web App made with Vue.js 3 + TypeScript along with VueUse composables, TailwindCSS + DaisyUI components and Pinia for state management.

Demo

Project Setup

1. Clone the repository
2. Run npm ci to install dependencies
3. Run one of the following commands:

Compile and Hot-Reload for Development

npm run dev

Compile and Minify for Production

npm run build

Preview the Production Build

npm run preview

Lint with ESLint

npm run lint

Format with Prettier

npm run format

Test environment

Browser	Version
Google Chrome	114
Mozilla Firefox	114
Safari	16

Attributions

1. Irene for testing the project across numerous devices 🤝
2. Danny for inspiration by their repo;
3. DarkLite1 for an answer why Object is possibly 'null' in this stackoverflow reply*;
4. jcalz for clarifying TS extending interfaces in their post*;
5. Mohamed Raza for an elegant way of creating unique IDs in their post*;
6. neiya for solving not assignable to parameter of type never error in TypeScript in this post*;
7. Chris Coyier for the detailed guide on how to stick footer to the very bottom of the page in this CSS-Tricks article. I abandoned this approach later on, but it serves its purpose well enough on early stages;
8. kissu for showing the way to work with dynamic components in Vue 3 Comosition API *. This technique was adopted by me at first, but I switched to the reusable components instead at the end;
9. Adri HM for finding solution to their own issue on catching child events from RouterView perspective. Here's the solution*;
10. Raf1k for a simple yet great solution on filtering arrays in their stackoverflow post*;
11. CodingIntrigue for introducing findIndex method to find and update values in an array of objects. Here's their solution*;
12. Aaron Beall for a hint on a non-null operator in TS taken from this reply*;
13. Jasser Mark Arioste for a solution on how to close DaisyUI Dropdown written in great detail in their ReactHustle blog post;
14. Brian Bauman for clarifying how the activeElement works in their reply*;
15. Tyler Potts for inspiration in trying out PWA taken from this video;
16. Shawn Wildermuth for an example of Vite PWA plugin usage Shawn's YT video;
17. storyset for the image I used in this project's social preview.

* - all stackoverflow content is licensed by https://creativecommons.org/licenses/by-sa/4.0/

Contributing

If you get interested in this project, I'd be glad to see your contributions. Pull requests are welcome!