Simple code review tool

A client-side-only app where you can upload a project and write code review comments.

You can write line-level comments (for ranges of lines in particular files), file-level comments (for whole files), or project-level comments (for the whole project).

"Uploading" a project

On the homepage, you can drag-and-drop a project folder into the browser.

This is not really an "upload", since no data is sent to a server. Everything happens in your browser using localStorage. For example, I use this tool to review student submissions, and I don't want their code to leave my computer.

The intention is to use this for short-time-frame projects (e.g., for grading student submissions). localStorage also remembers a folder's comments so you can re-"upload" a project to continue adding comments. This is useful if you pause for a bit, but is not a very persistent state-saving solution. See MDN's documentation about Storage quotas and eviction criteria. According to the linked page:

• Each origin has about a 5 MB limit for local storage, depending on space availability.
• That limit is rarely reached by any origin.

Re-using comments

Leaving old comments hanging around in localStorage is also useful because it enables Gradescope-style suggested feedback comments.

The application uses fuzzysort to fuzzily search for similar comments you've written for the same assignment. This helps when you find yourself commenting on the same or similar issues for multiple submissions. Previously-commented-upon submissions are treated as part of the same project if they have the same prefix as the current project. For example, if you're reviewing project-4-ayaankazerouni, the application will search comments for all projects in localStorage whose names start with project-4-.

Exporting your review

When you're finished reviewing a student's submission, click the "Export" button (or \ + e) to download a standalone HTML file containing the project files and your comments. You can send this file to the student, who can open it in their browser to see your comments inline with their code.

Then, click "Reset" (or \ + r) to reset the app state and review another project.

Keyboard shortcuts

Once you've "uploaded" a project, you can use these keyboard shortcuts:

Scope	Shortcut	Action
Navigation within a file	j	Move down one line
	k	Move up one line
Line selection	Shift + V	Select the current line, start line selection mode
	j	Move down, selecting lines as you go
	k	Move up, selecting lines as you go
	Esc	Exit line selection, unselect lines
Leaving comments	/	If there are selected lines, leave a line-level comment on those lines; otherwise, leave a file-level comment
	Cmd + /	Leave a project-level comment
	Ctrl + Enter or Cmd + Enter	Submit the comment you're writing or editing and focus back to file navigation
	Ctrl + Space	While typing a comment, show a list of suggested comments you've written for the same assignment
General	\ + e	Export the current review as a standalone HTML file
	\ + r	Reset the app state (clear the current project and comments)
	Ctrl + \ or Cmd + \	Collapse the sidebar showing file tree (useful on small screens)

To build this project

Install dependencies.

1. Node.js. I am using v22.13.1.
2. yarn package manager. You can install it via npm: npm install -g yarn.

Clone and build.

1. Clone this repository.

git clone git@github.com:ayaankazerouni/code-feedback.git

2. Enter the directory and install node dependencies

cd code-feedback
yarn

3. Run the server

yarn dev