French Courseware Application
The Flipped French project was a courseware web application built to reinforce French language lessons for second-year students at Northwestern University.
My responsibilities consisted of building reusable web components, architecting communication between components across the application, creating animations for user events, handling dynamic audio streams, and generating unit tests to help automate regression testing.
I was also responsible for defining the data structure that would serve as input for the components in different areas of the application. This data structure will serve as the basis for web server responses in the back-end.
This full-featured web front-end application was built with Angular 6 and its core libraries helped greatly with animations, interactivity, and logic. The styling was helped tremendously by the use of Sass as the CSS preprocessor. Each component was built using HTML5 elements only, with no use of external design systems such as Google Material or Bootstrap.
Picture 1 - Main landing page for app.
Picture 2 - Section questions list
Picture 3 - Question types indicate correct answer after incorrect response submitted.
Picture 4 - Those custom check marks were troublesome.
Picture 5 - The type-in input field has a helper component that aids the student enter characters with diacritic marks.
Picture 6 - The type-in component was so versatile that it could handle multiple entry boxes in paragraph and give back feedback for each in sequence.
Picture 7 - Components could have pictures to aid students answer questions.
Picture 8 - Loading transition screen.
