Home

ClassTranscribe

ClassTranscribe, aka "Netflix for learning" - is a new education video-based application developed at University of Illinois, with features that are focused on i) Improving learning outcomes for university students and ii) Providing equitable access and support for non-native speaking students and students with disabilities (including motor, cognitive, vision, and hearing).

The front-end of ClassTranscribe is built using React + Redux frame. Here is a brief instruction about how to contribute to the front-end.

Getting Started

• Tutorials to React JS + Redux JS
• Run ClassTranscribe Front-End (Front-End Only, No Docker)
• Run ClassTranscribe With Docker (Full Stack Development)
• Front-End File Structure
• Contributing to ClassTranscribe

Useful Links

Accessibility

• Web Content Accessibility Guidelines (WCAG)

UI Components

• React Router - React Router is a collection of navigational components that compose declaratively with your application.
• Semantic UI React
• Material-UI
• React Bootstrap
• mk-guide - A light JavaScript library to guide the user to focus the important part, including fix element.

Data handlers (Client Side)

• Axios - Promise based HTTP client for the browser and node.js.
• Lodash - A modern JavaScript utility library delivering modularity, performance & extras.
• Dentist - NodeJS string dedenting module – make your template strings look nice!
• js-file-download - Client side file downloader.
• adm-zip - A pure JavaScript implementation for zip data compression for client-side NodeJS.
• Papa Parse - Fast and powerful CSV (delimited text) parser that gracefully handles large files and malformed input.

Other Tools

• classnames - A simple JavaScript utility for conditionally joining classNames together.
• Showdown - A Javascript Markdown to HTML converter that can be used client side or server side.
• uuid - A Cryptographically-strong random ID Generator
• react-ace - Ace is an embeddable code editor written in JavaScript.
• react-device-detect - Detect device, and render view according to the detected device type.