Markdown Note Board

Project roadmap

1. 01

   Create the project

   ~1h

   Install Node.js (LTS version) and create a React + TypeScript project with npm create vite@latest using the react-ts template. Add zod and react-markdown. Replace the default page with a two-column layout: a note list on the left and an editor on the right. Done when: npm run dev shows the empty layout.

2. 02

   Define the note type with Zod

   ~1h

   Define a Zod schema for a note: id (a string), title (1 to 100 characters), body (a string), tags (an array of strings) and updatedAt (a number). Infer the TypeScript type from it with z.infer, so the type and the validation always match. Done when: the Note type is inferred from the schema and used in your components.

3. 03

   Create, edit and delete notes

   ~2h

   Keep the notes in state with useState (or useReducer). Add a New note button, a list showing each note's title and tags, and an editor with a title field, a tags field (comma-separated) and a textarea for the body. Editing updates the note and its updatedAt. Add a delete button that asks for confirmation. Done when: notes can be created, edited and deleted.

4. 04

   Show a safe Markdown preview

   ~1.5h

   Render the note's body next to or below the editor with react-markdown, which doesn't render raw HTML by default, so a note containing <script> or <img onerror> can't run code. Make links open in a new tab with rel="noopener noreferrer". Done when: headings, lists, code and links render correctly, and a note containing a <script> tag shows it as plain text without running it.

5. 05

   Filter by tag and search

   ~1.5h

   Show every tag in use as a clickable chip above the list; clicking one shows only notes with that tag, and clicking again removes the filter. Add a search box that matches the title and body, ignoring upper and lower case. Sort notes with the most recently updated first. Done when: tag filtering and search work together.

6. 06

   Save to localStorage and validate on load

   ~1.5h

   Save the notes to localStorage whenever they change (with useEffect). On startup, load them and validate them with the Zod schema using safeParse. If the data is invalid, keep the valid notes, skip the broken ones and show a small warning instead of crashing. Done when: notes survive a page reload, and manually corrupting the saved data doesn't break the app.

7. 07

   Write tests

   ~1.5h

   Install Vitest and React Testing Library. Test the Zod schema with valid and invalid notes, the filter and search function, and a component test that creates a note and checks it appears in the list. Done when: npm test passes.

Resources

• DocsReact with TypeScript
• DocsZod documentation
• Docsreact-markdown
• DocsWindow.localStorage (MDN)
• DocsVite getting started