cmda-minor-web · Hoa0 · Apr 17, 2023 · Apr 17, 2023 · Apr 17, 2023 · Apr 17, 2023
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,104 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
diff --git a/README.md b/README.md
@@ -1,6 +1,38 @@
 # Real-Time Web @cmda-minor-web 2022 - 2023
 
+## Demo
+
+[Bekijk link omgeving](https://rtw-2023.adaptable.app/)
+
+```commandline
+git clone
+```
+
+NPM, geüpdatet versies ophalen
+
+```commandline
+npm install
+```
+
+Project starten
+
+```commandline
+npm start
+```
+
+Project starten met nodemon
+
+```commandline
+npm run dev
+```
+
+Week 1 bronnen
+
+- https://github.com/cmda-minor-web/real-time-web-2223/blob/main/course/week-1.md#assignment-1-make-it-so
+- https://socket.io/get-started/chat/
+
 ## Table of Contents
+
 - [Synopsis](#synopsis)
 - [Description](#description)
 - [Communication](#communication)
@@ -9,112 +41,130 @@
 - [Programme](#programme)
 
 ## Synopsis
+
 - Course: Real-Time Web
 - Course Coordinator: Justus Sturkenboom ([@ju5tu5](https://github.com/ju5tu5))
 - Minor Coordinator(s): Robert Spier ([@roberrrt-s](https://github.com/roberrrt-s)) & Vasilis van Gemert ([@vasilisvg](https://github.com/vasilisvg))
 - Lecturers: Shyanta Vleugel ([@shyanta](https://github.com/shyanta)) & Justus Sturkenboom ([@ju5tu5](https://github.com/ju5tu5))
-- Student Assistants: 
+- Student Assistants:
 - Credit: 3 ECTS credits
 - Academic year: 2022-2023
 - Programme: Communication and Multimedia Design (full time bachelor)
 - Language: Dutch instructions and English resources
 
 ## Description
+
 During this course you will learn how to build a real-time application. You will learn techniques to setup an open connection between the client and the server. This will enable you to send data in real-time both ways, at the same time.
 
 ## Communication
+
 - [Github](https://github.com/cmda-minor-web/real-time-web-2223)
 - [Microsoft Teams](https://teams.microsoft.com/l/channel/19%3a61df853840064eae8ae6fc2dc9fc4566%40thread.tacv2/09%2520Real%2520Time%2520Web?groupId=c8b97eb6-ad53-4531-ad66-5c3c6297951c&tenantId=0907bb1e-21fc-476f-8843-02d09ceb59a7)
 - [Brightspace](https://dlo.mijnhva.nl/d2l/home/456154)
 
 If you have questions:
+
 - [Look at the additional resources]()
 - [Use a search engine like startpage](https://www.startpage.com/)
 - [Ask questions on MS Teams](https://teams.microsoft.com/l/channel/19%3a61df853840064eae8ae6fc2dc9fc4566%40thread.tacv2/09%2520Real%2520Time%2520Web?groupId=c8b97eb6-ad53-4531-ad66-5c3c6297951c&tenantId=0907bb1e-21fc-476f-8843-02d09ceb59a7) (please help each other!)
 - [Contact a student-assisstant](#synopsis)
 - [Contact a lecturer](#synopsis)
 
 ## Goals
+
 After finishing this program you can:
+
 - _deal with real-time complexity;_
 - _handle real-time client-server interaction;_
 - _handle real-time data management;_
 - _handle multi-user support._
 
 ## Grading
+
 Your efforts will be graded using a single point rubric (see below). You will have to pass the criterion (centre column) to pass the course. During the test you will be consulted and will be given feedback on things we think deficient and things we think are an improvement on the criterion.
 
-| Deficiency | Criterion | Improvement |
-|:--|:--|:--|
-|  | *Project* Your app is working and published on Heroku. Your project is thoroughly documented in the `README.md` file in your repository. Included are a description of the data-lifecycle, real-time events and external data source used by your app. |  |
-|  | *Complexity* You’ve implemented enough real-time functionality for us to test your comprehension of the subject. A lot of functionality is self-written. You are able to manipulate online examples live. |  |
-|  | *Client-server interaction* By interacting with the app, a user can influence the data model of the server in real time by directly modifying data OR by influencing API requests between server and source. The student has set up the data manipulations. |  |
-|  | *Data management* The server maintains a data model and each client is continuously updated with the correct data. |  |
-|  | *Multi-user support* Multiple clients can connect to the server. Interaction works as expected and is not dependent on the number of clients. You can explain how your app approaches this. |  |
+| Deficiency | Criterion                                                                                                                                                                                                                                                   | Improvement |
+| :--------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------- |
+|            | _Project_ Your app is working and published on Heroku. Your project is thoroughly documented in the `README.md` file in your repository. Included are a description of the data-lifecycle, real-time events and external data source used by your app.      |             |
+|            | _Complexity_ You’ve implemented enough real-time functionality for us to test your comprehension of the subject. A lot of functionality is self-written. You are able to manipulate online examples live.                                                   |             |
+|            | _Client-server interaction_ By interacting with the app, a user can influence the data model of the server in real time by directly modifying data OR by influencing API requests between server and source. The student has set up the data manipulations. |             |
+|            | _Data management_ The server maintains a data model and each client is continuously updated with the correct data.                                                                                                                                          |             |
+|            | _Multi-user support_ Multiple clients can connect to the server. Interaction works as expected and is not dependent on the number of clients. You can explain how your app approaches this.                                                                 |             |
 
 ## Programme
 
 ### Daily Schedule
+
 To keep things simple we use a daily schedule that will be used during normal course days (monday/tuesday). We make exceptions for fridays, on these days a different schedule will be given.
 
-| Time | Who | Activity |
-|:--|:--|:--|
-| *~09:00* | *(Shyanta \|\| Justus)* | *Standup* |
-| 09:30 | Tribe *+(Shyanta \|\| Justus)* | Talk with crucial information (make sure you attend!) |
-| 11:00 | Tribe | Work on the (day)assignment |
-|  | Per table *+(Shyanta \|\| Justus)* | Standup |
-| 13:00 | Tribe *+(Student assistants)* | Continue work on the (day)assignment |
-| 16:00ish | Tribe | Wrapup |
+| Time     | Who                                | Activity                                              |
+| :------- | :--------------------------------- | :---------------------------------------------------- |
+| _~09:00_ | _(Shyanta \|\| Justus)_            | _Standup_                                             |
+| 09:30    | Tribe _+(Shyanta \|\| Justus)_     | Talk with crucial information (make sure you attend!) |
+| 11:00    | Tribe                              | Work on the (day)assignment                           |
+|          | Per table _+(Shyanta \|\| Justus)_ | Standup                                               |
+| 13:00    | Tribe _+(Student assistants)_      | Continue work on the (day)assignment                  |
+| 16:00ish | Tribe                              | Wrapup                                                |
 
 ### Week 1 - Getting a grip
+
 Goal: Build and deploy a simple but unique real-time app
 
-#### Monday 17 April 
+#### Monday 17 April
+
 **Talk subjects:** Hit the ground running... [(slides)](https://docs.google.com/presentation/d/1MLSch_uKNEDyfz7fo71jbJrprunxQwd9GtgTse8wWpo/edit?usp=sharing) Course objective and explanation of the assignment, examples from last year, explanation of real-time, (live coded) bare bone chat app and deployment on Heroku.\
-**Day assignment:** [(assignment)](./course/week-1.md#assignment-1-make-it-so) Make it so *(as a team)*: Implement (code/style/discuss/deploy) basic chat (or other realtime) functionality on your teampage!
+**Day assignment:** [(assignment)](./course/week-1.md#assignment-1-make-it-so) Make it so _(as a team)_: Implement (code/style/discuss/deploy) basic chat (or other realtime) functionality on your teampage!
 
 #### Tuesday 18 April
+
 **Talk subjects:** My first realtime web app! [(slides)]() Short recap, (local) data management, using (wire) flows for realtime web apps.\
-**Day assignment:** [(assignment)](./course/week-1.md#assignment-2-make-it-so) Make it so *(individually)*. i) Create (code/style/discuss/deploy) a chat app (or other realtime functionality) based on the examples and ii) add your own unique feature!
+**Day assignment:** [(assignment)](./course/week-1.md#assignment-2-make-it-so) Make it so _(individually)_. i) Create (code/style/discuss/deploy) a chat app (or other realtime functionality) based on the examples and ii) add your own unique feature!
 
 #### Friday 21 april
 
 Friday afternoon we will have a [peer review session](./course/peer-review.md). You will read, comment and fire issues on each others code. Doing this is really good for your programming insight and helps others refining/refactoring their code.
 
-| Time | Who | Activity |
-|:--|:--|:--|
-| 14:00 | Tribe *+(Shyanta \|\| Justus)* | Peer review |
+| Time  | Who                            | Activity    |
+| :---- | :----------------------------- | :---------- |
+| 14:00 | Tribe _+(Shyanta \|\| Justus)_ | Peer review |
 
 ### Week 2 - Sockets and data
-Goal: Store, manipulate and share data between server-client   
+
+Goal: Store, manipulate and share data between server-client
 
 #### Monday 24 April
+
 **Talk subjects:** Data driven development?! [(slides)]() Feedback about last week, final assignment and conditions (rubric), explanation of data management, Long polling vs Websockets. \
-**Day assignment:** [(assignment)](./course/week-2.md#assignment-1-proof-of-concept) (Proof of) Concept *(individually)*. i) Create a (3 > 1) concept based on existing data from an API and ii) map this data using modelling techniques.
+**Day assignment:** [(assignment)](./course/week-2.md#assignment-1-proof-of-concept) (Proof of) Concept _(individually)_. i) Create a (3 > 1) concept based on existing data from an API and ii) map this data using modelling techniques.
 
 #### Tuesday 25 April
+
 **Talk subjects:** Above all else, show the data. [(slides)]() Securing real-time web apps, offline support, the publication/subscription model and (case study) Quek!\
-**Day assignment:** [(assignment)](./course/week-2.md#assignment-2-proof-of-concept) Proof of concept *(individually)*: i) Create (code/style/discuss/deploy) part of the core functionality for your concept and ii) show the  corresponding data lifecycle diagram.
+**Day assignment:** [(assignment)](./course/week-2.md#assignment-2-proof-of-concept) Proof of concept _(individually)_: i) Create (code/style/discuss/deploy) part of the core functionality for your concept and ii) show the corresponding data lifecycle diagram.
 
 ### Week 3 - Dealing with multiple users
-Goal: Handle data sharing and multi-user support 
+
+Goal: Handle data sharing and multi-user support
 
 #### Monday 8 May
+
 **Talk subjects:** Roll your own... [(slides) ]() Data management, the functional programming trinity (map, filter and reduce). OAuth?!
 **Day assignment:** [(assignment)](./course/week-3.md#assignment-1-data-management)
 
 #### Tuesday 9 May
+
 **Talk subjects:** Not ignoring the UI-Stack! [(slides)](). Usability, feedback, feedforward etc. in real-time web apps, (case study) postNL loader and FAQ.
 **Day assignment:** [(assignment)](./course/week-3.md#assignment-2-user-testing)
 
 #### Friday 12 May
+
 We will have a final [peer review session](./course/peer-review.md). You will read, comment and fire issues on each others code. Doing this helps others dotting the i’s on their project.
 
-| Time | Who | Activity |
-|:--|:--|:--|
-| 14.00 | Tribe *+(Shyanta \|\| Justus)* | Peer review |
-| 15.30 | Tribe *+(Shyanta \|\| Justus)* | Finalize your assignment |
-| 16.00 | Tribe *+(Shyanta \|\| Justus)* | (drinks?!) |
+| Time  | Who                            | Activity                 |
+| :---- | :----------------------------- | :----------------------- |
+| 14.00 | Tribe _+(Shyanta \|\| Justus)_ | Peer review              |
+| 15.30 | Tribe _+(Shyanta \|\| Justus)_ | Finalize your assignment |
+| 16.00 | Tribe _+(Shyanta \|\| Justus)_ | (drinks?!)               |
 
 <!-- Here are some hints for your projects Readme.md! -->