App can be used here and here is video commentary
Given that reviewers saw my open homeworks on the GitHub, I took a less over-engineering approach to make this project faster - within 8 hours
I needed to calculate with firebase introduction. This was new for me so I allocated around 2 hours for that.
Another time was allocated to learn 'new' technology WebRTC connected with some research around video element. This sums up to around 2 hours total too.
Leftover time was dedicated to development.
Due to a lot of possible corner cases with video / audio functionality it is possible you will hit some visual bug. In such a case try to refresh the page, it helps :)
This is a type of project which is possibly taking a shape of a dashboard. The most common practice to develop these is to use the SPA approach. After some thinking, I decided to go with CRA v5 to try it and see what's changed.
I personally don't take wars in NPM vs Yarn, but in this case, I inclined to use a project-specific package-manager and went with the current stable release of yarn yarn set version stable.
Even though I described that I tried to not over-engineer the solution, I still went with some libraries I personally would use in the more advanced stage. Amond these is form solution React Hook Form and Yup validation schema. I personally acknowledge that it is overkill for two inputs, but I really like yup :)
Another over-engineering is via Tailwind. Again, more personal taste no specific reason for that - given the requirement wasn't to have nice visuals. I mainly used it for very easy and readable visual adjustments like paddings.
All components - e.g. Button or Input are very trivialized. In real-world, these would take much more time than the whole project now. So I went only with props I decided are needed.
For time constraints I didn't properly sanitize video uploads, make sure you don't upload big files. I assume optimistic path :)
I introduced some concepts in the projects presented manually without 3rd parties. One of these is route guard AuthGuard. Though particularly not a block itself, I was solving for quite a time reason why getAuth(app).currentUser returns null though I have the correct user. After some time I understood in reality even it is not written, it is still async value. Solution for that is here
In all my projects I try to use correct semantic approaches. This is always in fights with time restrictions. In this case, I wanted to take a look into the successor of react-axe -> @axe-core/react and try it out. This step proved to be technically challenging and I didn't count the setup into the final 8 hours. It was just for my personal research. Note that CRA v5 due to webpack5 has compatibility issues. I'd advise you to stick with CRA v4 for now. If you are interested in more, we can discuss it. The solution though not optimal was to use an external CRA override approach - like Craco with this I config I made.
None were developed for this demo - the reason is that I filled the time limit. IF you are still interested, feel free to check my different homework, where these are included.