Note: This project depends on React 17. The Markdown editor and Markdown-to-HTML converter it relies on are not currently compatible with React 18 or later.
This project allows users to create, organize, edit, preview, and delete notes written in Markdown through a resizable split-panel interface. It is built with React, JavaScript, HTML, and CSS and uses Vite as the build tool. Users can write content with a live formatted preview, while notes are saved automatically as they type and ordered by their most recent updates. Notes are stored in the browser’s local storage, allowing them to persist between visits without a backend or database. React MDE provides the Markdown editing interface, Showdown converts Markdown into formatted HTML for the live preview, React Split manages the adjustable layout, and nanoid generates a unique identifier for each note.
Clicking the plus icon in the sidebar creates a new, blank note and selects it for editing right away. If no notes exist yet, the main view instead shows a message with a button to create the first one.
The sidebar lists every note with the most recently created or edited one always at the top, and the first line of a note's content is used as its title in the list. Selecting a note highlights it in the sidebar and opens it in the editor, where the "Write" tab provides a Markdown editor with a formatting toolbar. The divider between the sidebar and editor can be dragged to resize either panel.
Selecting the "Preview" tab renders the current note's Markdown as formatted HTML, letting users check how their note will look before switching back to continue editing.
Hovering over a note in the sidebar reveals a trash icon, and clicking it removes that note immediately.
| Layer | Technologies |
|---|---|
| Frontend | React, JavaScript, HTML, CSS |
| Libraries | React MDE (provides the Markdown editor with write and preview tabs), Showdown (converts a note's Markdown content into HTML for display), React Split (creates the draggable divider between panels) |
| Storage | Local storage |
| Build Tool | Vite |
The two main panels, the sidebar and the editor, are divided by React Split, which allows the divider between them to be dragged to resize either side. Notes are held in a single state array in the root component, initialized by reading directly from the browser's local storage, and every time that array changes, an effect writes the updated list straight back to local storage so notes persist across page reloads. Creating a note generates a new entry with a unique id from nanoid and adds it to the top of the list, while editing a note moves it back to the top and updates its content in place. The editor itself is built with React MDE for the writing interface and Showdown to convert the note's Markdown into HTML for the preview tab. Vite handles the local development server and production build, compiling the React components into files that can be deployed anywhere.
Several enhancements are planned to extend the functionality of the application:
- A confirmation step before deleting a note
- Search and filtering across notes
- Upgrading the markdown editor and converter to support React 18 and later
Follow the steps below to set up and run the application on your own machine.
Prerequisites
Make sure Node.js and npm are installed before you begin. You can check both by running the commands below, which should each print a version number.
node --version
npm --version1. Clone the repository
This downloads a copy of the project to your computer and moves you into the project folder.
git clone https://github.com/steph-xue/react-notes.git
cd react-notes2. Install the dependencies
This installs React 17 and everything else the project needs to run.
npm install3. Start the development server
This runs the application locally with Vite.
npm run devOnce the server is running, open the local URL shown in the terminal to start using the application.