Skacube
Skacube is a demonstration project utilising Next.Js and a Flask backend to render a FITS file cube in 3d. I want to demonstrate my experience and skills with UI/UX, simple containerisation, design systems and my Agentic workflow process.
Live: https://skacube-blond.vercel.app
Why I built this
I am very interested in working at SKA-Low as I like the UX challenge of communicating complicated technical instructions to a wide audience. I am not from a STEM background, so even in dissecting the SKA-Low docs and api, I was finding it very difficult to parse. I feel there is a good meeting point where design and UI can meet the extrodinarily exciting and technical disoveries the SKA-Low radioscope provides and demonstrate it to a wide audience.
Run it
Everything, one command:
docker compose up --build
Then open http://localhost:3000. Details in docs/docker.md.
For day-to-day development (ADR 0025):
cd api && uv run flask run # http://localhost:3001/health
cd web && pnpm dev # http://localhost:3000
Checks, the same ones CI runs:
cd api && uv run ruff check && uv run ruff format --check && uv run mypy && uv run pytest
cd web && pnpm lint && pnpm format:check && pnpm typecheck && pnpm test && pnpm build
docker compose -f compose.yaml -f compose.e2e.yaml run --rm --build e2e # Playwright + axe, see e2e/README.md
Layout
| Path | What |
|---|
web/ | Next.js (App Router, TypeScript) front end |
api/ | Flask API: GraphQL for metadata, REST for the binary volume |
e2e/ | Playwright and axe tests, run in Docker against the whole stack |
data/ | Processed volume and its README (the raw FITS file is not committed - taken from SKA-Low website) |
docs/ | Overview, architecture, design, background, ADRs |
backlog/ | Epics, stories and tasks |
Data
The dataset is SKAO's simulated 21 cm Epoch of Reionisation cube (Bonaldi et al. 2025, arXiv:2503.11740), downloaded from the SKA-Low page. The 981 MB raw file is not committed. uv run data/ingest.py <fits> reduces it to a 256³ volume of about 10 MB, which is. See data/README.md.
Decisions and design
- In this demonstration I have ingested and compressed the FITS file locally, then have committed the compressed file. In a real life situation, this would have to be hosted somewhere, accessed probably with a presigned URL, processed as a batch job then streamed to client in a blob or chunks. The files are far too big to download and display in the client.
How it maps to the role
| React / Next.js | web/, architecture |
| Flask and GraphQL | api/, ADR 0005 |
| Version control, CI/CD, testing, docs | SDLC, .github/workflows/ |
| UX and reusable components | design system |
| Linux and containers | Dockerfiles, compose.yaml, ADR 0025 |
Docs
Start at docs/README.md. Every significant choice has an ADR.
Licence
MIT.
