Refactor code structure for improved readability and maintainability

diagrams/frontend/frontend3.puml

@@ -0,0 +1,20 @@
+@startuml
+
+actor Browser
+participant Frontend
+participant API
+participant Camera
+
+Browser -> Frontend : 1. Create project
+Frontend -> API : 2. POST /projects
+Browser -> Frontend : 3. Configure camera
+Frontend -> API : 4. POST /procedure/start
+API -> Camera : 4. Start capturing
+Camera --> API : 5. Capture images
+Browser -> Frontend : 6. Create video request
+Frontend -> API : 7. POST /videos
+Browser -> Frontend : 8. Render video
+Frontend -> API : 9. POST /videos/render/{id}
+Frontend --> Browser : 10. Display video & metrics
+
+@enduml