Celluloid

What is it?

Celluloid is a collaborative video annotation application designed for educational purposes.

Find a YouTube video, choose an educational objective, annotate the video, share it with your students, collect their answers, answer their questions.

Demo

Head to www.celluloid.camp, create an account and click where you think you should!

We'd appreciate your feedback about the application UX and design, as well as bug reports - don't hesitate to report an issue!

Who's behind it?

Celluloid was born from a research project lead by Michaël Bourgatte and Laurent Tessier, two senior lecturers at the Catholic University of Paris. Their work focus on educational science and digital humanities.

Celluloid is maintained by Erwan Queffélec, and we are actively looking for contributors and mainteners. Don't hesitate to drop us a line on gitter!

Setup

Prerequisites

Environment

Celluloid was designed to run on a Linux server.

To deploy and install Celluloid, knowing your way around the command-line is required. Using an OSX or Linux workstation is highly recommended.

Tools

• install the latest and greatest version of git (obviously)
• install the latest version of nodejs
• install the latest version of Yarn and use it instead of NPM. The project is organized as a monorepo so it needs yarn to leverage Yarn workspace

Databsse

You'll need a working PostgreSQL server, version 9.6 or later.

For development purpose, you can use this docker image.

Then:

1. create a user for celluloid
2. create a database owned by this user. You can follow this tutorial to get setup quickly.

Emails

A working SMTP server is required to send account confirmation emails.

For development purpose, you could use your email account SMTP credentials, for instance gmail, or a dedicated service, such as mailtrap

Installation from source

First steps

Fire up a terminal and run the following commands:

git clone https://github.com/celluloid-edu/celluloid
cd celluloid/
yarn

Configuration

In a terminal, at the root of the repository, run

cp sample.env .env

Open the newly created .env file with your favorite text editor and replace the content between <> with the values that work for you.

Database provisioning

Make sure your PostgreSQL server is up. In a terminal, at the root of the repository, run

./bin/create_schema.sh

If this fails, you most certainly got your PostgreSQL server configuration or your .env file wrong.

Running the app in development mode

At the root of your repository, run

yarn watch

This will trigger an interactive build, open up the app in a browser window while continuously watching the source files for modifications.

that's it! if everything worked without errors, you should be all set. If not, please carefully review the instructions above.

Building and starting the app in production mode

At the root of your repository, run

yarn build
yarn start

You should be able to access your app at http://localhost:3001

Building and starting the app as a docker container

Open a terminal at the root of your repository, then run

docker run -f Dockerfile.webapp

(make sure Docker is properly installed beforehand!)

Contributing

We are actively looking for motivated contributors!.

Do not hesitate to open a pull request, contact us on gitter or report a bug!

Roadmap

• Administration GUI: content curation and moderation, user administration
• Add more video backends (Vimeo)
• Real-time annotation and comment updating using Websockets or SSE
• Private video hosting (video upload, ingest, dash transcoding)

Technical Stack

Before contributing to the development of Celluloid, you should get familiar with some of the following technologies:

• everywhere: TypeScript
• frontend: React, Redux and Material UI
• backend: node.js, Express and knex
• storage: PostgreSQL

File structure

The project is organized as a monorepo with 4 distinct packages residing in the packages directory.

All paths are relative to the root of the repository.

• packages/server: server-only files
• packages/client: client-only files
• packages/validators: validation scripts, shared by the client and server
• packages/types: TypeScript definitions shared by the client and server