javascript html css frontend markdown

Note Taking App

Build a markdown-enabled note-taking application with organization and search capabilities

โฑ๏ธ Time Breakdown

๐Ÿ“‹
Planning
~1 hours
๐Ÿ’ป
Coding
~2 hours
๐Ÿงช
Testing
~1 hours

๐Ÿ“Š Difficulty

MEDIUM

๐ŸŽ“ Learning Outcomes

  • โ€ข Working with REST APIs
  • โ€ข Managing application state
  • โ€ข Creating responsive layouts

Note Taking App

Create a feature-rich note-taking application that supports markdown formatting, note organization with tags/folders, and full-text search.

Project Checklist

  • Create note editor with markdown support and live preview
  • Implement note creation, editing, and deletion
  • Add note organization (folders, tags, categories)
  • Build search functionality to find notes by content or title
  • Use localStorage to persist notes
  • Add note list sidebar with sorting options

Bonus Project Checklist Items

  • Implement rich text editor with formatting toolbar
  • Add note sharing via URL generation
  • Create note templates for common note types
  • Add export options (Markdown, PDF, HTML)
  • Implement note versioning/history
  • Add dark mode and theme customization

Inspiration (Any companies/libraries similar)

  • Notion
  • Evernote
  • Obsidian

Hint/Code snippet to start

let notes = JSON.parse(localStorage.getItem('notes')) || [];

function createNote(title, content) {
  const note = {
    id: Date.now(),
    title,
    content,
    createdAt: new Date(),
    tags: []
  };
  notes.push(note);
  saveNotes();
  return note;
}

function searchNotes(query) {
  return notes.filter(note =>
    note.title.toLowerCase().includes(query.toLowerCase()) ||
    note.content.toLowerCase().includes(query.toLowerCase())
  );
}
โ˜ฐ

Project Requirements

Progress Tracker 0 of 7 completed

Share Project