Plain Notes App

Note taking application that saves data locally in the user’s browser LocalStorage for convenient access.

Try it! notes.huaiyukhaw.com

---

Author

Huaiyu Khaw

• Initial work - Plain Notes App (GitHub)
• Released on Vercel
• My professional profile on LinkedIn

Showcase

This project was designed to demonstrate:

• Usage of React with Typescript and TailwindCSS
• Practice CRUD operations and array manipulation
• Create, delete, archive, or pin notes.
• Sync notes to browser's localStorage
• Drag and drop for sorting
• Keyboard shortcuts for convenience

Usage example

Sometimes while I'm working, I come across trivial tasks that I need to quickly note down in order to save mental energy and avoid repeatedly reminding myself. Later, before leaving my desk, I can review these notes and ensure that I have completed all necessary tasks.

Screenshots

---

Development setup

npm install
npm run dev

---

Built With

• React
• Typescript
• TailwindCSS
• Vite
• dnd-kit - drag & drop toolkit
• Web Storage API

---

Contributing

1. Fork it (https://github.com/huaiyukhaw/plain-notes-app/fork)
2. Create your feature branch (git checkout -b feature/fooBar)
3. Commit your changes (git commit -am 'Add some fooBar')
4. Push to the branch (git push origin feature/fooBar)
5. Create a new Pull Request