brahimmade/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 config - use 'sqlite' insted of 'postgres' if you want to use default sqlite3.
DB_MANAGEMENT='postgres'

Local postgres development database
DB_HOST='localhost'
DB_PORT='5432'
DB_NAME='media_review_app_dev'
DB_USER='postgres'
DB_PASSWORD='1234'

Cloudinary details (Media hosting is done by cloudinary)
CD_NAME=''
CD_API_KEY=''
CD_API_SECRET=''
CD_API_ENV_VAR=''

Cypress dashbord access
CYPRESS_KEY=''

For test only change database name but it's already done in npm script with cross-env, no need to set it on your .envrc
DB_NAME='media_review_app_test'

Deepgram Speech-to-Text AI
SECRECT_KEY_DEEPGRAM=''

Installation

It is a mono repo for both front-end and back-end. Front-end is build with react, back-end is build with Python and Django.

Clone this project to local drive:

  git clone https://github.com/memoryInject/media-review-app.git
  
  cd media-review-app

**None: You just need to clone this repo if you decided to run this project on docker, if you want to run this on local continue the steps below.

Install with npm for root and front-end:

  npm install && npm install --prefix frontend

Create a Python environment and install with pip for back-end:

  pip install -r requirements.txt

Migrate django in the back-end:

  cd backend
  python manage.py migrate

Seed databse in django (Optional):

  npm run load-data-dev

Running Tests

Testing in Docker

**Note: Make sure to install docker and docker-compose on your computer first Build the docker image with docker-compose at the root: This will execute docker-compose.test.yml, if you are using windows open the appropriate .sh file in a text editor and copy those command and run it in the shell.

  ./compose/test/bin/build.sh

Docker-compose up all the build containers:

  ./compose/test/bin/up.sh

Open another terminal window and run frontend test:

  ./compose/test/bin/test-frontend.sh

Open another terminal window and run backend test:

  ./compose/test/bin/test-backend.sh

Open another terminal window and run end-to-end test with cypress:

  ./compose/test/bin/cypress-run.sh

Testing in Local (without docker)

Run the test with npm at the root:

  npm test

This will run both front-end react test and back-end server test.

For End-to-End Cypress test, first run both front-end and back-end dev server on test mode then open cypress.

  npm run dev-test

Open Cypress on another bash:

  npm run cypress-open

For Cypress CLI test ( make sure CYPRESS_KEY environent is set ):

  npm run cypress-test

Development

Docker

Create .env.development.local file at root and add all the environment variable mentioned above plus add API_HOST='http://backend:8000'

Build and up with docker-compose:

  docker-compose up --build

Open another terminal window and seed the data base (Optional)

  ./compose/local/bin/seed-data.sh

Create superuser for django:
**Note: Make sure to provide username, email and password when creating superuser, use this email and password for login into frontend

  docker-compose exec -it backend python manage.py createsuperuser

The frontend running at port 3000 and backend running at port 8000. Now you can live edit the files and see the results. There is also an nginx proxy running at port 3050, you can use it instead of frontend port 3000. Celery flower dashbord running at port 5558.

Local (without docker)

Before doing anyting make sure to migrate and seed the database,
also make sure to run postgres and create media_review_app_dev database and
check all the environement variables.

Migrate database:

  cd backend
  python manage.py migrate

Seed database ( optional ):

  cd backend
  python manage.py loaddata user userprofile project review asset media feedback

Create superuser for django:
**Note: Make sure to provide username, email and password when creating superuser, use this email and password for login into frontend

  cd backend
  python manage.py createsuperuser

Build front-end and setup static files on back-end:

  npm run build

Make sure redis server is running on port 6379. Run celery worker on a new terminal:

  cd backend
  celery -A config worker -l INFO

Run celery flower on a new terminal:

  cd backend
  celery -A config flower --port=5555

Run development servers (react and django) at root:

  npm run dev

By default react dev server running on port 3000 and django server running on port 8000. Celery flower running at port 5555.

API Reference

insomnia-api-spec.json: for API testing with Insomnia

All the API Reference are at: https://media-review.herokuapp.com/api/v1/

Deployment

This project build with CI/CD in mind, it's recommend to use a CI/CD platform to deployment.
This project use CircleCI with Heroku for deployment.

Tech Stack

Client: React, Redux, Bootstrap

Server: Django, Django REST framework, Django Channels, Python, Redis, Celery

Database: Postgres, Sqlite3

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

MIT

Support

For support, email msmahesh@live.com.
More info: memoryinject.io