Media-Review: Cloud based collaborative media review application

Mahesh MS — Sat, 09 Apr 2022 20:28:24 +0000

—

Overview of My Submission

Media-Review PWA (Progressive Web App) is a platform for review media by team collaboration in cloud, integrates reviewers, creators, content and tools needs to be more engaged and effective review process.
I have been building this application for quite a long time, when I see the Deepgram x DEV Hackathon, I knew that I can use Deepgram in this application for practical use.
In the Media-Review app user creates a feedback by typing text or draw annotation.
Here Deepgram is a perfect match for feedback creation. Instead of typing feedback, user can use Speech-to-Text for creating feedback (especially user with an iPhone on the go).
Under the hood it uses MediaRecorder Web API on front-end for recording audio then it sends to the back-end for Deepgram, once the Deepgram response with transcript, back-end send back the transcript to the front-end.
This is a monolithic application and big, so below I have provided the right files on Github that point to the only Deepgram part of this application:

Front-end: React with Redux

React component to record audio and send to back-end:
https://github.com/memoryInject/media-review-app/blob/main/frontend/src/components/TranscriptModal.js

MediaRecorder Web API integration:
https://github.com/memoryInject/media-review-app/blob/main/frontend/src/utils/captureAudio.js

Back-end: Django and Django REST framework

Deepgram view:
https://github.com/memoryInject/media-review-app/blob/main/backend/transcript/views.py

NOTE:

I am a back-end developer, apologies for my messy front-end code (it's much harder for me to refactor React front-end code).

Submission Category:

Accessibility Advocates

Link to Code on GitHub

memoryInject / media-review-app

Media-Review PWA is a platform for review media by team collaboration in cloud, integrates reviewers, creators, content and tools needs to be more engaged and effective review process.

Media-Review App

Testing and CI/CD frameworks used:

Front-end: React Testing Library with Mock Service Worker
Back-end: Django REST framework test
End-to-end: Cypress
CI/CD: CircleCI with Heroku

Demo

YouTube:

https://media-review.herokuapp.com 👍
More info: memoryinject.io

Environment Variables

To run this project, you will need to add the following environment variables to your .envrc file

Secrect key from django settings.py
DJANGO_SECRECT_KEY='django-insecure-#key'

Django mode anything other than development will set DEBUG to False in settings.py
DJANGO_ENV='development'

Redis cache - for test use 'dummy' insted of 'redis'
DJANGO_MEMCACHE='redis'
REDIS_URL='redis://127.0.0.1:6379/1'

Email config - here setup email client to send email,
mailtrap and console output are used for test,
use 'console' insted of 'smtp' for console output for email
EMAIL_BACKEND='smtp'
EMAIL_HOST='smtp.mailtrap.io'
EMAIL_HOST_USER='mailtrap-user'
EMAIL_HOST_PASSWORD='mailtrap-password'
EMAIL_PORT='2525'

Databse Management…

View on GitHub

Additional Resources / Info

Full product demo:

Deepgram feature demo:

—

DEV Community: Mahesh MS