—
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
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.
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…
Additional Resources / Info
Full product demo:
Deepgram feature demo:
—
Top comments (0)