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 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

Tech used

• Tailwind.CSS for styling.
• Dexie.JS A wrapper around somewhat complex indexed db.
• Vue.JS needs no introduction.
• Vue Router The offlicial routing library for Vue.JS.
• Netlify hosting focus on the product not hosting.
• Marked For Markdown support.
• Vite Next generation frontend tooling.
• Cypress Test. Automate. Accelerate.
• Vitest Blazing Fast Unit Test Framework.
• Vue Test Utils 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 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 http://localhost:5137

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. The Vitest version uses Vue test utils.
2. For end to end testing, this project uses Cypress. To get started, run

pnpm run build
pnpm run test:e2e

Contributions && suggestions

This project uses both Vitest and Cypress 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.