---> Work in progress <--

An application to make it faster, easier and more accessible to edit audio and video interviews using automatically generated transcriptions form STT service.

See intro and slides for more info on the project and user journey for a high level overview of the user journey.

It's a React, Express, Electron, Adobe CEP, AWS stack to be able to deploy one modular code base as a Web app or Cross platform Desktop app (for Mac, win and linux).

The project is organised across these repository

• pietrop/digital-paper-edit-client - React Client - npm
• pietrop/digital-paper-edit-storybook - React Storybook for Client components - npm.
• pietrop/digital-paper-edit-api - Express server API - npm
• pietrop/digital-paper-edit-infrastructure - AWS infrastructure for API server and Client.
• pietrop/digital-paper-edit-electron - Electron, Cross Platform Desktop app - Mac, Windows, Linux
• pietrop/digital-paper-edit-cep Adobe CEP (Common Extensibility Platform) - Premiere Pro Plugin Panel

Micro services for web app backend

• pietrop/digital-paper-edit-stt-proxy - An express server to connect to STT service
• pietrop/digital-paper-edit-video-preview-converter - An express server to generate an mp4 video preview using ffmpeg
• pietrop/digital-paper-edit-audio-converter - An express server to generate an audio file with the stt specs to be able to send it to STT Proxy.

See here to see them as a list in github.

See modular architecture section for more details on the stack and the Modular Architecture ADR for more info on the implementation

The projects use npm semantic versioning

The project is divided into concurrent milestones as described here

And there are github project board for each milestone

• 1 - Transcript - Editing
• 2 - Transcript - Annotating
• 3 - Paper-editing

With UX being an overarching milestone that cuts across these different parts

• UX

See UX Approach in docs guides for more info.

See optional getting setup with the visual code workspace to get up and running with the various repository needed for this project.

git clone [email protected]:pietrop/digital-paper-edit-client.git

cd digital-paper-edit-client

Optional step to setup nvm to use node version 10, otherwise just use node version 10

nvm use || nvm install`

in root of project

npm install

In root of the client project (cd digital-paper-edit-client) start React

npm run start

To developer for the web app you will need to start setup and the API server as well.

Runs the app in the development mode.
Open https://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

The project is also publicly available in the npm registry @pietrop/digital-paper-edit-client

you can add it to your project

npm install @pietrop/digital-paper-edit-client

and eg in an express server you can serve the static build as follows

app.use("/", express.static(path.join(__dirname, '..', 'node_modules/@pietrop/digital-paper-edit-client')));

Client - React, is setup using Create React App.

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

• npm > 6.1.0
• node v 10 - lts/dubnium
• see .eslintrc in the various packages for linting rules

Node version is set in node version manager .nvmrc

See docs folder

• docs/features-list overview of main features of the app.
• docs/user-journey/user-journey.md overview of main features of the app.
• docs/notes/ contains unsorted dev notes on various aspects of the project (think of it as drafts).
• docs/guides/ contains good to know/how to on various aspects of the project.
• docs/adr/ contains Architecture Decision Record.

An architectural decision record (ADR) is a document that captures an important architectural decision made along with its context and consequences.

We are using this template for ADR

npm run build

Build of react client side will be in build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See docs for more information on how this works with Electron.

In public/index.html:

if(window.process && window.process.versions.electron){
        const ElectronWrapper = require('../src/ElectronWrapper/index.js');
        window.ElectronWrapper = ElectronWrapper;
}

ElectronWrapper needs to be on the Electron render process otherwise (i.e. from the main process) the app will hang.

1. run npm run build which will output a build folder
2. move the build folder to digital-paper-edit-electron repository
3. from digital-paper-edit-electron, run npm run start:prod

Running in development (npm start:dev) in digital-paper-edit-electron will not work. In development mode, the electron-main.js looks for the app served by webpack in src/ElectronWrapper/index.js, which doesn't resolve as that is in a different repository.

TBC

Test coverage using jest, to run tests

npm run test

During development you can use

npm run test:watch

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

.env contains environment variables config for the React client side app.

Do not store credentials in .env during development.

REACT_APP_NAME App name is used in browser title and navbar component.

npm run publish:public

for more info on Create React app deployment:

See the section about deployment for more information.

To update demo on github pages pietrop.github.io/digital-paper-edit-client

npm run deploy:ghpages

See CONTRIBUTING.md guidelines and CODE_OF_CONDUCT.md guidelines.

See LICENCE

Despite using React and DraftJs, this repo is not promoting any Facebook products or other commercial interest.