ErikKimsey / erikkimsey_gltengange

Erik Kimsey

GLTEngage UI Engineer Technical Challenge

Hello Andy and Aliaks! How are you? There was a 2-3 hour limit that I inadvertently surpassed, spending a lot of time simply reading about things like the Media Recorder/Stream API, learning about datatypes, and making decisions regarding persisting data (locally and hosted DB).

I've decided on Nextjs for frontend framework. The issue there was MediaRecorder required the "window" object, of the browser, in order to work. Taillwind for styling. After deliberation on persisting data, I would have implemented localstorage or IndexedDB. As for backend, I was planning to host video data on Supabase.

Thanks! Erik Kimsey

UI

Tools used (or potentially used):

• Nextjs • Material UI (icons and components) • Tailwind CSS • Context API • MediaRecorder API

Core Functionality

MediaRecorder API / MediaStream API, via "Webcam-React" npm package

MediaRecorder API / MediaStream API -vs- Nextjs:

• given that these APIs cannot function without first accessing the browser engine, consideration for SSR apps (e.g., Nextjs) is required.
• file-type download: mimetype (file-type and codec) options / limitations should be considered.
• [MDN API file format docs: ](https://developer.mozilla.org/en-US/docs/Web/Media/Formats)

Persistence / Backend:

• Localstorage or IndexedDB.
• Supabase (PostgreSQL, "firebase alternative")
• it came down to localstorage or SQLite. But, given I intended to solely persist a new performance recording, I opted for localstorage or IndexedDB.
• For a database, given the context of: a. the time-limit of this exercise and b. ease of implementation with Nextjs, I opted to use [Supabase ](https://supabase.com).

NEXT STEPS:

1. Finish state management on frontend. i.e.:

create functionality to push new recording data (recording title, recording blob, timestamp) from the NewPerformance component to Context state

subsequently, create functionality that triggers API call to post new recording data to DB.

REST call to pull user's updated/previous recordings

...

2. Clean-up / complete the UI DOM and styles. Therein:

Finish component above the prev-recordings list, that would house the "Create new Performance" components

Implement the "NewPerformance" component in a modal(?).

Replace all non-styled components with Material UI (ie, icons, buttons)

Provide a placeholder image for NewPerformance video component.

...

3. Other frontend:

Finish setting up dynamic state (i.e., via Context API) in all components (e.g., previous recording list-items: title, data, video thumbnail, video duration, and connect items' play/edit/delete buttons to subsequent functionality)

...

4. Backend:

Test saving a new Performance to localstorage. If localstorage is an issue, test IndexedDB.

Supabase... create tables, setup env variables, etc

Connect and Test API calls work properly from frontend

Surely, I'm forgetting about out other "next steps".

How to run this mess:

npm install
# then
npm run dev

Open http://localhost:3000 with your browser to see the result.