https://github.com/nerdo/code-reviewer
A tool for reviewing changes in code.
https://github.com/nerdo/code-reviewer
Last synced: about 1 year ago
JSON representation
A tool for reviewing changes in code.
- Host: GitHub
- URL: https://github.com/nerdo/code-reviewer
- Owner: nerdo
- Created: 2025-06-08T19:05:15.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-08T19:50:46.000Z (about 1 year ago)
- Last Synced: 2025-06-08T20:32:18.442Z (about 1 year ago)
- Language: TypeScript
- Size: 33.8 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @nerdo/code-reviewer
A modern, web-based visual git diff tool for reviewing code changes between commits, branches, and tags.
## Features
- 🔍 **Universal Search**: Search commits by hash, message, author, or date
- 📅 **Smart Date Filtering**: Quick presets (Today, Last 7 days, etc.) or custom ranges
- 🌲 **Branch & Tag Support**: Compare any combination of branches, tags, and commits
- 📁 **File Browser**: Navigate through changed files with syntax highlighting
- 👁️ **Multiple Views**: Side-by-side, inline, or unchanged file views
- 🎯 **Intelligent Highlighting**: Visual indicators for additions, deletions, and changes
- ⚡ **Fast & Responsive**: Built with React and optimized for performance
## Installation & Usage
### Quick Start (Recommended)
Run directly in any git repository:
```bash
npx @nerdo/code-reviewer
```
### Global Installation
```bash
npm install -g @nerdo/code-reviewer
code-reviewer
```
### Options
```bash
npx @nerdo/code-reviewer [options]
Options:
-p, --port Port to run on (default: 3001)
-h, --help Show help message
--version Show version
Examples:
npx @nerdo/code-reviewer
npx @nerdo/code-reviewer --port 8080
```
## How to Use
1. **Navigate to a git repository** in your terminal
2. **Run the command**: `npx @nerdo/code-reviewer`
3. **Your browser opens automatically** to the code review interface
4. **Select what to compare**:
- Choose FROM: branch, tag, or commit
- Choose TO: branch, tag, or commit
- Apply date filters if needed
5. **Review the changes**:
- Browse files in the left sidebar
- View diffs in side-by-side or inline mode
- Use universal search to find specific commits
## Interface Overview
### Selection Controls
- **Branch/Tag Tabs**: Switch between branches and tags
- **Autocomplete Search**: Type to filter and find branches, tags, or commits
- **Date Filters**: Filter commits by time ranges (Today, Last 7 days, custom dates)
- **Universal Search**: Search commits by hash, message, author, or date
### Diff Views
- **Side-by-side**: Traditional two-column diff view
- **Inline**: Unified diff with changes highlighted inline
- **Unchanged**: View complete file content without diff highlighting
### File Browser
- **Tree Structure**: Navigate files and folders
- **Change Indicators**: See which files were added, modified, or deleted
- **Quick Navigation**: Click any file to jump to its diff
## Requirements
- **Node.js**: Version 16 or higher
- **Git**: Must be run from within a git repository
- **Browser**: Modern browser with JavaScript enabled
## Development
### Available Scripts
- `npm run dev` - Start both client and server in development mode
- `npm run test` - Run the test suite
- `npm run test:watch` - Run tests in watch mode
- `npm run lint` - Run ESLint
- `npm run typecheck` - Run TypeScript type checking
- `npm run build` - Build the production bundle
### Project Structure
```
src/
├── components/ # React components
│ ├── ui/ # shadcn/ui components
│ ├── FileBrowser.tsx # File tree navigation
│ └── DiffViewer.tsx # Diff display component
├── domain/ # Core business logic
│ ├── entities/ # Domain entities
│ ├── repositories/ # Repository interfaces
│ └── services/ # Domain services
├── infrastructure/ # External integrations
│ └── git/ # Git repository implementations
├── server/ # Express.js API
│ └── routes/ # API endpoints
└── services/ # Frontend API client
```
## Testing
The project includes comprehensive tests for:
- Domain services (DiffService, FileTreeService)
- React components (FileBrowser, DiffViewer)
- Git repository implementations
- Core entities and business logic
Run tests with:
```bash
npm test
```
## Technologies Used
- **Frontend**: React, TypeScript, Tailwind CSS, shadcn/ui
- **Backend**: Node.js, Express.js, TypeScript
- **Git Integration**: simple-git
- **Testing**: Jest, React Testing Library
- **Build Tools**: Vite, TypeScript compiler
- **Linting**: ESLint
## License
MIT License