Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/eimwe/notes
CRUD PWA on Vue 3 + TS + Pinia
https://github.com/eimwe/notes
crud daisyui pinia progressive-web-app pwa tailwind-css ts typescript vue3 vuejs
Last synced: 3 months ago
JSON representation
CRUD PWA on Vue 3 + TS + Pinia
- Host: GitHub
- URL: https://github.com/eimwe/notes
- Owner: eimwe
- Created: 2023-05-28T14:42:10.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-07-02T08:32:25.000Z (over 1 year ago)
- Last Synced: 2024-08-01T22:02:17.308Z (7 months ago)
- Topics: crud, daisyui, pinia, progressive-web-app, pwa, tailwind-css, ts, typescript, vue3, vuejs
- Language: Vue
- Homepage: https://eimwe.github.io/notes/
- Size: 430 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Notes
Progressive Web App made with Vue.js 3 + TypeScript along with VueUse composables, TailwindCSS + DaisyUI components and Pinia for state management.
[](https://vuejs.org/) [](https://www.typescriptlang.org/) [](https://pinia.vuejs.org/) [](https://daisyui.com/) [](https://tailwindcss.com/) [](https://eslint.org/)
## Demo
[](https://eimwe.github.io/notes/)
## 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
```sh
npm run dev
```
### Compile and Minify for Production
```sh
npm run build
```
### Preview the Production Build
```sh
npm run preview
```
### Lint with [ESLint](https://eslint.org/)
```sh
npm run lint
```
### Format with [Prettier](https://prettier.io/)
```sh
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](https://www.youtube.com/@MakeAppswithDanny) for inspiration by [their repo](https://github.com/dannyconnell/vue-composition-api-course);
3. [DarkLite1](https://stackoverflow.com/users/2304170/darklite1) for an answer why Object is possibly 'null' in [this stackoverflow reply](https://stackoverflow.com/a/65106524)**\***;
4. [jcalz](https://stackoverflow.com/users/2887218/jcalz) for clarifying TS extending interfaces in [their post](https://stackoverflow.com/a/75365744)**\***;
5. [Mohamed Raza](https://stackoverflow.com/users/11043676/mohamed-raza) for an elegant way of creating unique IDs in [their post](https://stackoverflow.com/a/64511988)**\***;
6. [neiya](https://stackoverflow.com/users/5548351/neiya) for solving _not assignable to parameter of type never_ error in TypeScript in [this post](https://stackoverflow.com/a/60741864)**\***;
7. [Chris Coyier](https://css-tricks.com/author/chriscoyier/) for the detailed guide on how to stick footer to the very bottom of the page in [this CSS-Tricks article](https://css-tricks.com/a-clever-sticky-footer-technique/). I abandoned this approach later on, but it serves its purpose well enough on early stages;
8. [kissu](https://stackoverflow.com/users/8816585/kissu) for [showing the way](https://stackoverflow.com/a/72232713) 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](https://stackoverflow.com/users/10805872/adri-hm) for finding solution to their own issue on catching child events from RouterView perspective. [Here's the solution](https://stackoverflow.com/a/64619880)**\***;
10. [Raf1k](https://stackoverflow.com/users/15041521/raf1k) for a simple yet great solution on filtering arrays in [their stackoverflow post](https://stackoverflow.com/a/72530341)**\***;
11. [CodingIntrigue](https://stackoverflow.com/users/571194/codingintrigue) for introducing `findIndex` method to find and update values in an array of objects. [Here's their solution](https://stackoverflow.com/a/35206193)**\***;
12. [Aaron Beall](https://stackoverflow.com/users/2225281/aaron-beall) for a hint on a non-null operator in TS taken from [this reply](https://stackoverflow.com/a/52838793)**\***;
13. [Jasser Mark Arioste](https://reacthustle.com/about) for a solution on how to close DaisyUI Dropdown written in great detail in their [ReactHustle blog post](https://reacthustle.com/blog/how-to-close-daisyui-dropdown-with-one-click);
14. [Brian Bauman](https://stackoverflow.com/users/1803609/brian-bauman) for clarifying how the `activeElement` works in [their reply](https://stackoverflow.com/a/54933808)**\***;
15. [Tyler Potts](https://www.youtube.com/@TylerPotts) for inspiration in trying out PWA taken from [this video](https://youtu.be/5yuET794hDY);
16. [Shawn Wildermuth](https://www.youtube.com/@swildermuth) for an example of Vite PWA plugin usage [Shawn's YT video](https://youtu.be/YSGLw4T8BgQ);
17. [storyset](https://www.freepik.com/author/stories) for [the image](https://www.freepik.com/free-vector/add-notes-concept-illustration_8887086.htm#query=make%20notes&position=19&from_view=author) 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!