Awesome

Digital Paper Edit - Client

---> 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.

Github project board (for my forks) - across linked repos

Project Architecture

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

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

See UX Approach in docs guides for more info.

Setup

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

git clone git@github.com: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

Usage - development

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 http://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.

Usage - production

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')));

System Architecture

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.

Development env

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

Documentation

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

Build

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!

Electron

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.

run npm run build which will output a build folder
move the build folder to digital-paper-edit-electron repository
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.

Tests

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.