Source.dev Log Viewer Assignment

Architecture

Backend

• The backend is written in Python and FastAPI.
• Package Management is done with uv.
• The logs are directly read from disk without any database. Logs are served from /data directory.
• Three API points are provided
  1. List all available logs
  2. Read a section of the log. This API takes a file, start and size and returns size bytes of file from start bytes along with some other data.
  3. Search. This takes a file, a search query and optionally a start. This returns the byte offsets of matches.

Frontend

• The frontend is written in Typescript and VueJS.
• Syntax highlighting is done via Shiki.
• API interaction is done with fetch and a proxy set up via vite. In production, this would be a nginx proxy pass or something similar.

Setup

Logs

• Create a data dir: mkdir data
• Download and unzip the logs in data.
• At this stage, your directory tree should look like this.

.
├── data/
│   ├── build_log_example_1.txt
│   ├── build_log_example_2.txt
│   ├── build_log_example_3.txt
│   └── build_log_example_4.txt
├── frontend/
│   └── ...
├── main.py
├── pyproject.toml
├── README.md
└── uv.lock

Backend

• Install uv for package managment
• Run uv run fastapi dev main.py. This will download the dependencies and then start a FastAPI dev server.

Frontend

• Install NodeJS and npm
• cd frontend
• Install dependencies: npm install
• Run vite dev server: npm run dev

At this point both the backend and frontend should be running. You can visit

• localhost:5173/ to view the frontend
• localhost:8000/docs to view the API documentation (swagger)