# Welcome

to our Web Architectures Class. This course provides an advanced study of modern web application development with an emphasis on system design, scalable front-end architectures, and cloud-based data services. Students examine current frameworks, programming models, and development workflows used to build maintainable and responsive web applications. The course focuses on component-based front-end development using Vue.js, state management, asynchronous communication, and integration with cloud databases and authentication services. Additional topics include API design, client–server interaction, data modeling, and best practices for building secure and reliable web applications. Students complete a substantial project that integrates these concepts into a fully functional web application.

## Course Information

**Instructor:** Dr. Yong Zhuang

- <i class="fa fa-envelope"></i> **E-mail:** [yong.zhuang@gvsu.edu](mailto:yong.zhuang@gvsu.edu)
- <i class="fa fa-building"></i> **Office:** MAK D-2-234
- <i class="fa fa-building"></i> **Office Hours:** Monday, 12:00 pm - 2:00 pm
- <i class="fa fa-book"></i> **Course Page:** [Blackboard](https://lms.gvsu.edu/) and [Course Website](https://gvsu-cis658.github.io)
- <i class="fa fa-book-reader"></i> **Syllabus:** [View the syllabus here](assets/pdf/syllabus.pdf)
- <i class="fa fa-video"></i> **Zoom:** Meeting ID: 396 668 6420, Password: 587684

## Class Schedule

**Section 01**

- **Class Time:** Monday 6:00 pm--8:50 pm (in-person / synchronous) + asynchronous
- **Room:** DeVos Cntr Interprofess Health, Room 507 / [Zoom](https://gvsu-edu.zoom.us/j/3966686420?pwd=WGxpc0N4YWcvOU9aWGxWZGYxbXZUdz09)
- **Final Presentation:** April 27 (Monday), 6:00 pm--7:50 pm

## Tentative Schedule

| Week | Date | Topics | Resources |
| --- | --- | --- | --- |
| 1 | 01/12 | [Syllabus](assets/pdf/Syllabus-Intro.pdf) \| [Introduction](assets/pdf/Introduction.pdf) \| [Docker](assets/pdf/Docker.pdf) \| [HTML](assets/pdf/HTML.pdf) \| [Quiz 1](quizzes/1.md) | {ref}`resources <content:references:w1>` |
| 2 | 01/19 | **Martin Luther King, Jr. Recess (No Class)** | Resources |
| 3 | 01/26 | [CSS 1](assets/pdf/CSS-I.pdf) \| [CSS 2](assets/pdf/CSS-II.pdf) \| [CSS Grid and Flexbox](assets/pdf/CSS-Grid-Flexbox.pdf) \| [Quiz 2](quizzes/2.md) \| [Assignment 1](assignments/css-html.md) | {ref}`resources <content:references:w3>` |
| 4 | 02/02 | [TypeScript Intro](assets/pdf/TypeScript-I.pdf) \| [TypeScript Basics](assets/pdf/TypeScript-II.pdf) \| [Quiz 3](quizzes/3.md) | {ref}`resources <content:references:w4>` |
| 5 | 02/09 | [Term project](project/term.md) \| TypeScript (Higher-order Functions): [1](assets/pdf/TypeScript-III.pdf), [2](assets/pdf/TypeScript-IV.pdf) \| [Quiz 4](quizzes/4.md) | {ref}`resources <content:references:w5>` |
| 6 | 02/16 | [Interface, Generic Type](assets/pdf/TypeScript-V.pdf) \| [DOM Manipulation](assets/pdf/TypeScript-VI.pdf) \| [Sass](assets/pdf/SASS.pdf) | {ref}`resources <content:references:w6>` |
| 7 | 02/23 | [HTTP](assets/pdf/HTTP.pdf) \| [HTTPs](assets/pdf/HTTPS.pdf) \|[JS Modules](assets/pdf/JS-Modules.pdf) \| [Vue.js fundamentals](assets/pdf/VueJS-I.pdf) \| [Assignment 2](assignments/bm.md) | {ref}`resources <content:references:w7>` |
| 8 | 03/02 | [Vue.js 2](assets/pdf/VueJS-II.pdf) \| [Vue.js 3](assets/pdf/VueJS-III.pdf) \| [Assignment 3](assignments/cdm.md) \| [Quiz 5](quizzes/5.md) | {ref}`resources <content:references:w8>` |
| 9 | 03/09 | **Spring Break (No Class)** | Resources |
| 10 | 03/16 | [Promise](assets/pdf/Promise.pdf) \| [Pinia 1](assets/pdf/Pinia.pdf) \| [Pinia 2](assets/pdf/Pinia-II.pdf) \| [Assignment 4](assignments/bs.md) \| [Quiz 6](quizzes/6.md) | {ref}`resources <content:references:w10>` |
| 11 | 03/23 | [Vue Router](assets/pdf/Vue-Router.pdf) \| [Vuetify](assets/pdf/Vuetify.pdf) \| [Vuetify 2](assets/pdf/Vuetify-II.pdf) \| [Quiz 7](quizzes/7.md) | {ref}`resources <content:references:w11>` |
| 12 | 03/30 | [🎬](https://youtu.be/TJwJKIXvCUs),[Firestore 1](assets/pdf/Firestore-I.pdf) \| [🎬](https://youtu.be/G3VsozLdAug),[Firestore 2](assets/pdf/Firestore-II.pdf) \| [🎬](https://youtu.be/uP0G6pWWhL0),[Authentication](assets/pdf/FirebaseAuthentication.pdf) \| [Assignment 5](assignments/bpc.md) | {ref}`resources <content:references:w12>` |
| 13 | 04/06 | Fetch and Axios, ExpressJS | {ref}`resources <content:references:w13>` |
| 14 | 04/13 | TBD | {ref}`resources <content:references:w14>` |
| 15 | 04/20 | Final project studio | {ref}`resources <content:references:w15>` |
| 16 | 04/27 | **Final Project Presentation** |  |