Client-side Development

CSCI-432 Client-side Development

This course covers the design and development of rich reactive web UI's using front-end JavaScript frameworks such as Bootstrap, Angular.js, React.js and Vue.js.

Assignments

Students are expected to demonstrate their software solution to the homework assignments to the class at the beginning of lecture on the dates specified below.

Date	Assignment Due	Lecture	Required Reading
01/08		Introduction to Vue and the Toolchain Vite	Introduction Quickstart (up to Using Vue from CDN) Creating an Application
01/13	A1. Live Demo A1. Create a New Vue SPA A1. Create and Test a Production Build A1. Create a GitHub Distribution Repo A1. Hosting an App on Digital Ocean	Component Basics Demo Component Basics Demo Code Component Basics Demo Code (Github) Props, Fallthrough Attr, Class & Styles Demo Props, Fallthrough Attr, Class & Styles Demo Code (Github)	Single File Component SFC Syntax Specification Component Registration Component Basics Props Fallthrough Attributes Class and Style Bindings
01/20	A2. Live Demo A2. Description and Grading Rubric Setting Up A New Clean Vue Project Deploying a New App	Slots Demo Slots Demo Code (Github) <component> Demo <component> Demo Code (Github) Reactivity Reactivity Demo Code (Github)	Slots <component> <KeepAlive> Reactivity Fundamentals ref() reactive() Computed Properties computed() Watchers watch()
01/27	A3: Guess the Person	🌨 ️ 🌨 ️ 🌨 ️ A3 demos
02/03	A4: Book Record	Template syntax, lists, events, forms Demo Demo Code (Github)	Template Syntax Event Handling Conditional Rendering List Rendering Form Input Bindings Component v-model Provide/Inject Events
02/10	A5: Sharing Data Between Components Using a Pinia Store	A5 demos Storing data in a Pinia store, localStorage, and sessionStorage The Vue Router	State Management The Pinia Documentation Storage (localStorage, sessionStorage) Routing The Vue Router Documentation
02/17	A6: Navigation Using a Vue Router	A6 demos Using fetch() with API specifications	Fetch API fetch()
02/24	A7: Components that display data obtained from an API server.	A7 demos Designing apps & designing apps with Figma Professional CSS & theming	SFC CSS Features
03/03 Spring Break
03/10	A8. App Prototype	A8 demos Loading Screens & Modals Async Components	Suspense Teleport Async Components
03/17	A9: Implement Create Account, Login (without reset) and Logout	A9 demos Reusibility	Composables Custom Directives Plugins
03/24	A10: Implement View Contest List & View Selected Contest	A10 demos Transition, TransitionGroup and other Animation techniques	Transition TransitionGroup Animation Techniques
03/31	A11: Implement Create & Edit Contest (without missions)	A11 demos Vue and Web Components	Vue and Web Components
04/07 Founders Day	A12: Implement Create and Edit Missions (without addl. Judges), Update View Selected Contest to show Missions	A12 demos
04/14	A13: Implement Search Contests	A13 demos Reactivity and Rendering (how Vue does it)	Reactivity in Depth Reactive API Rendering Mechanism Render Functions & JSX
04/21	A14: Implement Upload Single File Submissions (for Contestant) and Evaluate Single File Submissions (for Judges)	A14 demos Best Practices	Production Deployment Performance Accessibility Security

CSCI-432 Client-side Development

Course Administration

Resources

Live sites

Assignments