Author: Siméon Azogbonon (simeonaz.netlify.app)
GitHub Repo: https://github.com/simeonaz/devnotepad
🎯 Objective
Build a simple, fast, and local web application that allows a developer to:
- jot down ideas, code snippets, or TODOs while working,
- smartly categorize these notes,
- quickly find them via a filtering system,
- and copy or delete them with a single click.
Real goal: Demonstrate my ability to design a useful, UX-friendly, well-structured, and high-performance tool, without a backend.
📌 Features
- Add notes
- A form at the top lets you add a note with: title, free content (text or code), category (HTML, CSS, JavaScript, TODO, Others)
- Each note is instantly stored in
localStorage
- Display and manage notes
- List of notes as cards or accordion
- Shows title, content, and category
- Buttons: 🗑️ Delete, Edit, 📋 Copy (Clipboard API)
- Filter by category
- Persistence
- Data is stored client-side (
localStorage)
- No backend required, fast to deploy, offline ready
🧠 Why is it smart?
- Mimics a real developer need: capture an idea or code snippet without leaving the keyboard
- Minimalist and efficient UX
- Thoughtful features: one-click copy, instant filtering, local save
💡 Possible improvements
- Export/import notes (JSON)
- Edit existing notes
- Markdown support
- GitHub sync
- Keyboard shortcuts (e.g., Ctrl+Enter to submit)
🚀 Quick Start
Installation
# pnpm
pnpm install
# npm
npm install
# yarn
yarn install
Development
# pnpm
pnpm dev
# npm
npm run dev
# yarn
yarn dev
Production
# pnpm
pnpm build
pnpm preview
# npm
npm run build
npm run preview
# yarn
yarn build
yarn preview
📚 Documentation
**