A markdown note-taking app that syncs your notes to a GitHub repository. Built with React + Vite on the frontend and Express on the backend.
- Markdown editor with syntax highlighting (CodeMirror 6), dynamic heading sizes, and a formatting toolbar (Bold, Italic, Heading, Lists, Tables, Links, and more)
- Live preview — toggle between editor and rendered markdown (Ctrl+Shift+P)
- GitHub sync — push and pull notes to/from any GitHub repository via a Personal Access Token
- Auto-save — notes are saved locally every 2 seconds; Ctrl+S pushes to GitHub
- Folder organisation — notes are stored in folders mirrored as directories in the GitHub repo
- Markdown cheatsheet — quick reference modal (
?button in the toolbar) - JetBrains Mono font with adjustable size (12–20 px) via Settings
- Status bar — live cursor position, word count, character count, reading time, file size, and GitHub sync status
- Remote change detection — automatically detects when the GitHub remote is ahead of local and alerts you to pull
| Layer | Technology |
|---|---|
| Frontend | React 18, Vite, Zustand, CodeMirror 6 |
| Backend | Node.js, Express |
| GitHub API | @octokit/rest |
| Markdown | react-markdown, remark-gfm |
| Testing | Vitest (client), Jest + Supertest (server) |
- Node.js 18+
- A GitHub Personal Access Token (PAT) with
reposcope - A GitHub repository to store your notes (can be empty)
git clone https://github.com/YOUR_USERNAME/gitnote.git
cd gitnote
npm install
npm install --prefix client
npm install --prefix servernpm run devThis starts both the Vite dev server (http://localhost:5173) and the Express API server (http://localhost:3001) concurrently.
- Open the app at
http://localhost:5173 - Click the Settings icon (⚙️) in the left rail
- Enter your GitHub Personal Access Token, username, and repository name
- Click Connect
Your notes will now sync to github.com/YOUR_USERNAME/YOUR_REPO.
gitnote/
├── client/ # React + Vite frontend
│ └── src/
│ ├── components/ # Editor, FilePanel, Toolbar, StatusBar, …
│ ├── store/ # Zustand stores (notes, sync)
│ └── api.js # Fetch wrappers for the Express API
├── server/ # Express backend
│ ├── index.js # App entry point
│ └── routes/
│ ├── notes.js # CRUD for local .md files
│ ├── config.js # PAT + repo config
│ └── github.js # GitHub push / pull / sync check
├── notes/ # Local note storage (git-ignored)
├── scripts/
│ └── kill-port.js # Clears port 3001 before dev start
└── package.json # Root dev script (concurrently)
| Shortcut | Action |
|---|---|
Ctrl+S |
Push notes to GitHub |
Ctrl+Shift+P |
Toggle preview mode |
MIT