NoteTag

A Notion-inspired notes app with tagging, search, and checkout export.

---

Setup and run instructions

Prerequisites: Node.js 16+, npm

git clone https://github.com/YOUR_USERNAME/notetag-app.git
cd notetag-app
npm install
npm start

Opens at http://localhost:3000. To build for production: npm run build

---

Technology stack

• React 18 (Create React App) — component-based UI
• JavaScript / JSX — no TypeScript config overhead for this scope
• Plain CSS with CSS custom properties — no build plugins required
• React hooks (useState, useMemo, useCallback) — built-in state management, no Redux needed
• Inter font via Google Fonts — clean, readable, Notion-inspired typography
• No external UI libraries — all components hand-written

---

Assumptions made during development

1. In-memory storage only. Notes reset on page refresh. The brief did not specify a backend or database, so persistence was left out of scope.
2. "Checkout" means export/review. The feature was interpreted as selecting multiple notes and copying them as plain text — similar to a cart checkout applied to notes.
3. Tags are single-word slugs. Spaces auto-convert to hyphens and special characters are stripped to keep tags consistent.
4. No authentication. The app is single-user with no login, as the brief made no mention of user accounts.
5. Seed data included. Five sample notes are pre-loaded so the app is immediately demonstrable.

---

Features

• Create & edit notes — title, content, and tags with live validation
• Tag system — inline tag entry, colour-coded badges, sidebar tag navigation
• Search — real-time search across title, content, and tags simultaneously
• Filter by tag — click tags in the sidebar or use the filter pills above the grid
• Checkout / Export — select notes and copy them as plain text
• Toast notifications — feedback on every create, update, and delete

---

Project structure

notetag-app/
├── public/
│   └── index.html
├── src/
│   ├── components/
│   │   ├── CheckoutModal.jsx   # Export modal
│   │   ├── NoteCard.jsx        # Individual note card
│   │   ├── NoteForm.jsx        # Create / edit form with validation
│   │   ├── Sidebar.jsx         # Navigation sidebar with tag list
│   │   ├── TagInput.jsx        # Inline tag entry field
│   │   ├── TagPill.jsx         # Coloured tag badge
│   │   └── Toast.jsx           # Status notification
│   ├── data/
│   │   └── seed.js             # Sample notes loaded on startup
│   ├── utils/
│   │   └── helpers.js          # uid, formatDate, tagPalette, noteEmoji
│   ├── App.js                  # Root component and state management
│   ├── App.css                 # Global styles and design tokens
│   └── index.js                # React entry point
├── package.json
└── README.md