This is a training project built with React (TS + Tailwind) and Node.js (Express). The main goal was to create SPA with fully server-rendered seeded-random generation of realistic-looking data and music.
Deployed App: https://task5.miskaris.com
- Deterministic generation: Seeded random data generation, dynamic localization (EN and RU, can be expanded easily), independent parameters.
- Algorithmic music composition: Server-generated tracks, integrated music theory, client-side playback-synthesis.
- Visuals: Dual display modes (Table View with pagination, Gallery View with infinite scroll), seed-based SVG covers (with basic shapes and typography), interactive toolbar.
- Performance: Client-side MP3 encoding, batch async ZIP export, user safeguards.
As per requirements to this task, many libraries were used:
- Music theory: Tonal.js
- Fake data generation: faker-js (with own custom extensions of non-present music methods and data)
- Deterministic RNG (Xoroshiro128+): pure-rand
- Music synthesis (Web Audio): Tone.js
- View modes with Infinite scroll: React-Vistuoso
- MP3 Encoding: Lame.js (@gideonstele fork)
- ZIP creation: Zip.js
The project is fully containerized.
- Clone the repository.
- Rename
.env.exampleto.env. (double check the values and enter those that apply to your situation) - Run with Docker Compose:
docker-compose up --build
- Open http://localhost:3000 in your browser.