Build a Notes App

• Claude Code installed and working
• Completed at least one other tutorial
• Familiarity with JavaScript basics

Paste this prompt:

Create a notes app with a two-panel layout:

LEFT SIDEBAR (250px wide):
- Search input at the top
- "New Note" button
- List of all notes showing title and preview (first 50 chars)
- Each note shows last modified date
- Click a note to open it in the editor

RIGHT PANEL (flexible width):
- Note title input (large, bold)
- Textarea for note content
- Show "Last saved" timestamp at the bottom

Use HTML, Tailwind CSS, and vanilla JavaScript. Store notes in localStorage. Each note should have: id, title, content, createdAt, updatedAt.

Make it dark themed and clean looking.

Paste this prompt:

Add search functionality to the notes app:

1. As the user types in the search box, filter the notes list in real-time
2. Search should match against both title and content
3. Highlight matching text in the results
4. Show "No notes found" when search has no results
5. Clear the search when pressing Escape
6. Add a small X button to clear the search

Make the search feel instant (no delay).

Paste this prompt:

Add markdown support to the notes:

1. Add a toggle button to switch between "Edit" and "Preview" modes
2. In Edit mode, show the raw markdown text
3. In Preview mode, render the markdown as HTML
4. Support these markdown features:
   - Headers (# ## ###)
   - Bold (**text**) and italic (*text*)
   - Lists (- item and 1. item)
   - Links [text](url)
   - Code blocks (```code```)
   - Inline code (`code`)

Use the marked.js library via CDN for parsing.

Paste this prompt:

Add auto-save functionality:

1. Save the note automatically 1 second after the user stops typing (debounce)
2. Show a "Saving..." indicator while saving
3. Show "Saved" with a checkmark after successful save
4. Update the "Last saved" timestamp
5. Also save immediately when switching to a different note
6. Add Cmd/Ctrl + S keyboard shortcut to force save

The save indicator should be subtle but visible.

Paste this prompt:

Add categories to organize notes:

1. Add a category selector above the notes list: "All Notes", "Personal", "Work", "Ideas", "Archive"
2. Each note can belong to one category
3. When creating a note, use the currently selected category
4. Add a dropdown in the editor to change a note's category
5. Show category badges on notes in the sidebar
6. Allow creating custom categories

Use different colors for each category badge.

Paste this prompt:

Add pin and delete functionality:

PINNING:
1. Add a pin icon button in the editor toolbar
2. Pinned notes appear at the top of the list with a pin icon
3. Click the pin again to unpin

DELETING:
1. Add a delete button in the editor toolbar
2. Show a confirmation dialog: "Delete this note? This cannot be undone."
3. After deleting, select the next note or show empty state
4. Add a "Trash" category that holds deleted notes for 30 days
5. Add "Restore" and "Delete permanently" options in trash

Paste this prompt:

Add keyboard shortcuts:

- Cmd/Ctrl + N: New note
- Cmd/Ctrl + S: Save note
- Cmd/Ctrl + F: Focus search
- Cmd/Ctrl + E: Toggle edit/preview mode
- Cmd/Ctrl + P: Pin/unpin note
- Cmd/Ctrl + Backspace: Delete note (with confirmation)
- Escape: Clear search / close dialogs

Add a small "?" button that shows a shortcuts help modal.

• Add note templates (meeting notes, daily journal, etc.)
• Add tags for cross-category organization
• Add word count and reading time
• Add export to PDF
• Add image support (drag and drop)
• Sync to Supabase for multi-device access
• Add note sharing with public links