Dart Web Markdown Notes App

Project roadmap

1. 01

   Create the project

   ~1h

   Create a project with dart create -t web notes, and add the web and markdown packages. Install webdev with dart pub global activate webdev and run webdev serve. Write the page layout in web/index.html: a sidebar, an editor (a textarea) and a preview area, with simple CSS. Done when: the page opens in the browser with the three areas.

2. 02

   Connect the editor

   ~1.5h

   In web/main.dart, find the elements with package:web (document.querySelector) and listen for input events on the textarea. For now, copy the typed text into the preview as plain text. Done when: typing in the editor updates the preview immediately.

3. 03

   Render Markdown safely

   ~1.5h

   Convert the text with markdownToHtml from the markdown package, using the GitHub-flavored extension set for tables and task lists. Insert the result into the preview with setHTMLUnsafe only after removing script tags and event attributes, or better, with a sanitizer (for example an allow-list of tags). Update the preview at most every 150 ms while typing (a debounce). Done when: headings, lists, links and code render correctly, and a <script> tag in a note doesn't run.

4. 04

   Save notes

   ~1.5h

   Create a Note class (id, title, content, updated at) with toJson and fromJson. Save all notes to localStorage as JSON a moment after typing stops, and load them when the page opens. The title is the first heading or line of the note. Handle broken saved data by starting fresh with a warning. Done when: notes are still there after reloading the page.

5. 05

   Add the notes sidebar

   ~2h

   List all notes in the sidebar sorted by last updated, with the selected note highlighted. Add a New note button, deleting a note (with confirmation), and a search box that filters notes by title and content. Remember the last opened note. Done when: you can switch between notes, search them and delete them.

6. 06

   Test and build

   ~1.5h

   Write tests with package:test for the Note class (JSON round trip and title extraction) and the search filter, and a browser test (dart test -p chrome) for rendering Markdown. Build the production version with webdev build and open it from a simple static server. Done when: the tests pass, and the built app works.

Resources

• DocsDart on the web
• Docspackage:web
• Docsmarkdown package
• Docswebdev tool
• DocsMDN: Window.localStorage