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.
- Front-end: React Testing Library with Mock Service Worker
- Back-end: Django REST framework test
- End-to-end: Cypress
- CI/CD: CircleCI with Heroku
https://media-review.herokuapp.com 👍
More info: memoryinject.io
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=''
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 frontendCreate a Python environment and install with pip for back-end:
pip install -r requirements.txtMigrate django in the back-end:
cd backend
python manage.py migrateSeed databse in django (Optional):
npm run load-data-dev**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.shDocker-compose up all the build containers:
./compose/test/bin/up.shOpen another terminal window and run frontend test:
./compose/test/bin/test-frontend.shOpen another terminal window and run backend test:
./compose/test/bin/test-backend.shOpen another terminal window and run end-to-end test with cypress:
./compose/test/bin/cypress-run.shRun the test with npm at the root:
npm testThis 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-testOpen Cypress on another bash:
npm run cypress-openFor Cypress CLI test ( make sure CYPRESS_KEY environent is set ):
npm run cypress-testCreate .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 --buildOpen another terminal window and seed the data base (Optional)
./compose/local/bin/seed-data.shCreate 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 createsuperuserThe 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.
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 migrateSeed database ( optional ):
cd backend
python manage.py loaddata user userprofile project review asset media feedbackCreate 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 createsuperuserBuild front-end and setup static files on back-end:
npm run buildMake sure redis server is running on port 6379. Run celery worker on a new terminal:
cd backend
celery -A config worker -l INFORun celery flower on a new terminal:
cd backend
celery -A config flower --port=5555Run development servers (react and django) at root:
npm run devBy default react dev server running on port 3000 and django server running on port 8000.
Celery flower running at port 5555.
insomnia-api-spec.json: for API testing with Insomnia
All the API Reference are at: https://media-review.herokuapp.com/api/v1/
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.
Client: React, Redux, Bootstrap
Server: Django, Django REST framework, Django Channels, Python, Redis, Celery
Database: Postgres, Sqlite3
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.
For support, email msmahesh@live.com.
More info: memoryinject.io