Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/stanleymasinde/notes
A simple and fun notes application
https://github.com/stanleymasinde/notes
composition-api firebase notes notes-app pwa tailwindcss vite vue vue3 vuejs
Last synced: 19 days ago
JSON representation
A simple and fun notes application
- Host: GitHub
- URL: https://github.com/stanleymasinde/notes
- Owner: StanleyMasinde
- License: mit
- Created: 2022-05-21T23:29:06.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-01-05T12:35:27.000Z (about 1 year ago)
- Last Synced: 2024-05-27T19:15:49.935Z (8 months ago)
- Topics: composition-api, firebase, notes, notes-app, pwa, tailwindcss, vite, vue, vue3, vuejs
- Language: Vue
- Homepage: https://notes-n.netlify.app
- Size: 5.37 MB
- Stars: 9
- Watchers: 1
- Forks: 3
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
[](https://app.netlify.com/sites/notes-n/deploys)
# Notes App
> Inspired by Samsung notes. I wanted to create a web application with the same features as the Samsung notes web application.
### How it works
This application is meant to work completely offline. You only need to connect to the internet when installing it or when there is a new update. The underlying tech is the [indexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) API.
All your notes are stored on your device's browser storage so clearing your browser data will also delete your notes. You can try it [here](https://notes-n.netlify.app)
### Tech used
* [Tailwind.CSS](https://tailwindcss.com) for styling.
* [Dexie.JS](https://dexie.org) A wrapper around somewhat complex indexed db.
* [Vue.JS](https://vuejs.org) needs no introduction.
* [Vue Router](https://router.vuejs.org) The offlicial routing library for Vue.JS.
* [Netlify hosting](https://www.netlify.com) focus on the product not hosting.
* [Marked](https://marked.js.org) For Markdown support.
* [Vite](https://vitejs.dev) Next generation frontend tooling.
* [Cypress](https://cypress.io) Test. Automate. Accelerate.
* [Vitest](https://vitest.dev) Blazing Fast Unit Test Framework.
* [Vue Test Utils](https://test-utils.vuejs.org) The official testing suite utils for Vue.js 3.
### Features
* Installable as a PWA.
* Works fully offline.
* Share text from other apps to this one.
* Dark mode uses the system preference.
* Super small in size (This is where we beat native apps).
* You can search your notes.
### Screenshots
### Development
This project uses [PNPM](https://https://pnpm.io) for as a package manager. Please maker sure it is installed.
1. Clone this repositoty
2. Install dependencies with `pnpm install`
3. Run `pnpm run dev` and you make changes.
4. Preview live changes on while editing
#### TDD
When developing features that are not UI specific e.g component behaviour, it will be a better experience to use the TDD format. Both testing tools in this project support this.
##### Use cases
- When building Vue components (SFCs)
- When working on a user flow e.g how the application handles typing
1. For SFCs `pnpm run test:unit`. This will launch vitest and you can continue to build your application with tests running on every save. This assumes you have already written tests for your expected behaviour. You can also use Cypress for [component testing](https://docs.cypress.io/guides/component-testing/overview). The Vitest version uses [Vue test utils](https://test-utils.vuejs.org).
2. For end to end testing, this project uses [Cypress](https://cypress.io). To get started, run
```shell
pnpm run build
pnpm run test:e2e
```
### Contributions && suggestions
This project uses both [Vitest](https://vitest.dev) and [Cypress](https://cypress.io) for testing.
Write your unit test in the \_tests_ directory and e2e tests in `cypress/e2e` directory.
All contributions are welcome. If you have suggestions or you'd like to raise a bug raise an issue.
Thank you for Stopping by.