[A] JavaScript SPA

This assignment focus on building a single page application (SPA) that works like a desktop environment in the browser where you can run a few applications in the window like environment.

The application we call a "Personal Web Desktop" (PWD). Have a look at this recording to get a better view of the assignment.

Johan Leitet is showing off how a PWD can look like.

You will, within this window-like personal web desktop, implement the following applications, within their own "windows".

  • A Memory game using mouse and keyboard events
  • Chat using WebSockets API
  • An application of you own choice and implementation, for example the quiz application

The backend (server-side code) of the chat will be given and your job is to write the client-side code.

Grading

This assignment is graded as F, Fx, E-A and it is worth 4 credit/hp.

Preconditions

You have access to the course environment on GitLab.

You have knowledge of HTML and CSS.

You have knowledge in JavaScript, DOM, Events and the browser environment.

Get going

Get going with the assignment by cloning and preparing the assignment repo.

Clone the assignment repo

  1. You have a git repo on GitLab named "a3-spa", available below your lnu student acronym in the course at GitLab. Start of by cloning the repo to your computer ("xxx" is your lnu-username):
‌‌‌‌‌

Add the development tools and Vite

Setup the repo with the same development environment used in A2. The assignment for A2 contains the details on how to do that.

Requirements

The requirements are divided into Feature sections (F1, F2 and so on).

All feature sections are mandatory, except those marked with "(OPTIONAL)" which can be implemented to reach a higher grade.

Please check that your application meets the requirements below before submitting your final version.

F1: PWD Functional requirements

  1. The PWD application should be a single page application.

  2. The user shall be able to open multiple windows (not browser windows/tabs but custom windows created using the DOM) within the application.

  3. The user shall be able to drag and move the windows inside the PWD.

  4. The user shall be able to open new windows of the desired application by clicking or double clicking an icon at the desktop.

  5. The icon used to close the window should be represented in the upper bar of the window.

  6. Windows should get focus when clicked/dragged.

  7. The window with focus shall be on top of all other windows.

  8. The following three window applications should at least be included in the desktop application:

    • A memory game.
    • A chat connected to a central chat channel using websockets.
    • One, by you, designed and decided application (perhaps the quiz or another application).

F2: PWD Non functional requirements

  1. The application shall be visually appealing.

  2. The README.md should contain a short description on the application with a representative image. It should also explain how the user can start the application.

  3. A complete git commit history should be present for assessment. For this assignment somewhere between 30 and 200 commits is normal.

  4. The code shall be organized in appropriate ES modules.

  5. All exported functions, modules and classes should be commented using JSDoc.

  6. The code standard standard should be followed.

  7. The linters (html, css, javascript) should pass without notices when running npm run lint.

  8. Build the distribution code and verify that it works. The distribution code should be saved in dist/.

F3: Memory game window application

Read for a description of the memory application.

These are the requirements for the Memory application that should exists as a window application in the PWD.

  1. The user should be able to open and play multiple memory games simultaneously.

  2. The user should be able to play the game using only the keyboard (accessability).

  3. One, by you decided, extended feature for the game.

F4: Chat window application

Read the description of the chat application.

The chat application should exists as a window application in the PWD. The chat application shall be connected to other students chat clients via the web socket-server.

  1. The user should be able to have several chat applications running at the same time.

  2. When the user opens the application for the first time the user should be asked to write his/her username.

  3. The username should remain the same the next time the user starts a chat application or the PWD is restarted.

  4. The user should be able to send chat messages using a textarea.

  5. The user should be able to see at least the 20 latest messages since the chat applications was opened.

  6. One, by you decided, extended feature.

F5: An additional window application

You should add one additional window application to your PWD. It should be developed by yourself and it can for example be the Quiz application or another application you choose to develop.

F6: An enhanced chat application (OPTIONAL)

This is an optional feature that might help you to a higher grade.

Fulfill some (at least four) requirements to enhance your chat application. Here are suggestions and feel free to add your own enhancements.

  • Ability to choose which channel to listen to.
  • Caching message history.
  • Added support for emojis.
  • Added support for writing code.
  • Ability to change username.
  • Encrypted messages on a special channel to allow secret communication.
  • Added functionality to the "chat protocol". Discuss with others in the course and agree upon added functionality to add to the sent messages.
  • Use the messages to play memory against an opponent. Perferably using a seperate channel.
  • Define your own enhancement.

F7: Additional enhancements (OPTIONAL)

This is an optional feature that might help you to a higher grade. You need to have implemented F6 to be able to solve this requirement.

You may implement and document additional enhancements to your PDW and the applications to make it more personal, flexible and usable. You may define these requirements on your, document them and explain how they works.

Write and explain how you improved the following parts.

  • The PWD itself.
  • The Memory application.
  • The extra application.
  • Maximize and normalize window size
  • Resize windows.
  • Keep track on open windows, minimize them.

You may also add an extra extra application, developed by yourself.

F8: Documentation on code structure (OPTIONAL)

This is an optional feature that might help you to a higher grade. You need to have implemented F7 to be able to solve this requirement.

Write a documentation of your code, explaining in your own words how the code is structured, what classes/modules you have and how they relate to each other. Write 15-30 sentences.

Add at least one picture showing the code modules and how they relate to each other.

Write this in the README.md file or direct in the issue.

Grading

These are a few notes on how your submission is graded.

Grade E, D

Fulfill all mandatory features and requirements to a satisfactory level where they work as expected.

Document all your features in your submission issue and present your solution with a proper video.

Grade D, C

As above and your application, documentation and presentation has a high level of quality.

The outcome is visual appealing and has a high level of usability.

You have implemented at least one optional requirement.

Grade B, A

Your application, documentation and presentation has an excellent level of quality, usability and fulfillment of all the features and their requirements.

You have fulfilled all of the optional features and you have produced an outcome to an excellent level without any issues.

Presentation

You are to record a video presentation of your project where you show how your project implements the features and fullfills the requirements. You should also present a few highlights from your source code and elaborate on why you feel the code is good/bad.

The video scene should contain a cam where your face is visible.

The tool OBS is a free and opensource tool you can use to record the presentation video.

The video should be 5-7 minutes.

Submission

This is how to submit this assignment.

  1. Add a tag v1.0.0 to your repo when you are done. If you make updates then add another tag like v1.0.1 or v1.1.0 and so on.

  2. Ensure you have committed and pushed all your changes, including the tags, to GitLab.

  3. Create an issue on the repo and answer the following questions in it. Write freely with 15 to 30 sentences of text.

    1. Add the URL to your presentation video, you may store it non-public on youtube, google drive, dropbox or equal.

    2. For each feature (F1, F2 ... F8) you have implemented, write a 5-10 sentences text about it and let the teacher know how you solved it. This is essential. There is no grade if you fail to write about the features.

    3. Write a concluding text, 5-10 sentences, about your implementation of the project. Write reflective about hard/easy, troubles/solutions, and so on, things you encountered and thought of during the project and its implementation.

    4. What is your TIL for this course part?

    5. What is your overall TIL for this course (this far)?

  4. When you are done, assign the issue to the teacher, to show that you are ready for grading. The teacher will be notified by mail.