Code Review Application

Aplikasi code review yang dibangun dengan Node.js backend dan React frontend. Memungkinkan user untuk melihat kode dan menambahkan komentar pada baris atau seleksi teks tertentu.

Project Structure

├── code-review-backend/     # Backend Node.js application
│   ├── server.js           # Main server file
│   ├── package.json        # Dependencies
│   └── submission/         # Sample files for review
│       ├── index.html
│       ├── assets/
│       │   ├── style.css
│       │   └── script.js
│       └── ...
├── code-review-frontend/   # Frontend React application
│   ├── src/
│   │   ├── components/
│   │   │   ├── ui/         # Shadcn UI components
│   │   │   ├── FileList.tsx
│   │   │   └── CodeViewer.tsx
│   │   ├── hooks/
│   │   │   └── useApi.ts
│   │   ├── types/
│   │   │   └── index.ts
│   │   └── App.tsx
│   └── package.json
└── README.md

Backend

Features

• File listing: Mendapatkan daftar semua file dalam folder submission
• File reading: Membaca konten file berdasarkan path
• CORS support: Mengizinkan request dari frontend
• Security: Validasi path untuk mencegah directory traversal

API Endpoints

Get Files

GET /api/files

Response:

[
  {
    "name": "index.html",
    "path": "index.html"
  },
  {
    "name": "style.css",
    "path": "assets/style.css"
  }
]

Read File

GET /api/read?path={path}

Response: Content of the specified file

Running Backend

cd code-review-backend
npm install
node server.js

Server akan running pada http://localhost:3001

Frontend

Features

• File browser: Daftar file yang tersedia untuk direview
• Syntax highlighting: Mendukung berbagai bahasa pemrograman
• Line commenting: Tambah komentar pada baris tertentu
• Selection commenting: Tambah komentar pada teks yang dipilih
• Comment management: Lihat dan hapus komentar
• Responsive design: Bekerja di desktop dan mobile

Technologies

• React 19: Frontend framework
• Vite: Build tool dan development server
• Tailwind CSS v3.4: Styling framework
• Shadcn/ui: Component library
• React Syntax Highlighter: Code highlighting
• Lucide React: Icons

Running Frontend

cd code-review-frontend
npm install
npm run dev

Frontend akan running pada http://localhost:5174 (atau port lain jika 5173 sedang digunakan)

Usage

1. Start backend server terlebih dahulu
2. Start frontend development server
3. Buka browser ke http://localhost:5174
4. Pilih file dari daftar di sidebar kiri
5. Klik pada baris atau pilih teks untuk menambah komentar
6. Lihat semua komentar di bagian bawah code viewer

Adding Files for Review

Tambahkan file ke dalam folder code-review-backend/submission/ untuk direview. Struktur folder akan secara otomatis terdeteksi oleh aplikasi.

Development Notes

• Backend menggunakan built-in Node.js http module tanpa framework tambahan
• Frontend menggunakan TypeScript untuk type safety
• CORS sudah dikonfigurasi untuk development
• Error handling sudah diimplementasikan di kedua sisi

Future Enhancements

• User authentication
• File upload functionality
• Real-time collaboration
• Comment threads
• Diff viewer for code changes
• Export review reports