Skip to content

Practical work 3

Objectives

Prove that you can create a web application using Javascript with communication between a frontend and a backend.

Group composition

You will work in groups of no more than two students.

Grading criteria

  • 0 point - The work is not done
  • 1 point - The work is insufficient
  • 2 points - The work is done

Maximum grade: ((46 points \ 46) * 5) + 1 = 6

Category 1 - Repository

# Criterion Points
0 Someone else who doesn't know the project is capable of understanding it and taking it over 2
1 The project is on GitHub 2
2 The project has a README file to present your project and its idea 2
3 The README contains instructions on how to prepare the development environment, run and build the project with Node.js 2
4 The README contains instructions on how to to build and run the project with Docker and Docker Compose 2
5 There is a .gitattributes file at the root of the project 2

Category 2 - Frontend

# Criterion Points
6 The frontend is a Node.js application using a frontend framework (e.g., Vue, React, Angular, Svelte) 2
7 The frontend is linted and formatted using ESLint and Prettier to ensure quality 2
8 The frontend has a .gitignore that ignores all unnecessary files on Git 2
9 The frontend has a Dockerfile to build and run the application with Docker 2
10 The frontend has an intuitive interface for the end-user to use 2

Category 3 - Backend

# Criterion Points
11 The backend is a Node.js application using a backend framework (e.g., Express, Fastify, NestJS) 2
12 The backend is linted and formatted using ESLint and Prettier to ensure quality 2
13 The backend has a .gitignore that ignores all unnecessary files on Git 2
14 The backend has a Dockerfile to build and run the application with Docker 2
15 The backend exposes an API for the frontend to use 2
16 The backend has a documented API so that everyone can use it with their own clients (CLI tools, another frontend, etc.) 2
17 Some unit tests allow to test the backend (e.g., Jest, Mocha, Chai) 2
18 Some integration tests allow to test the backend (e.g. Jest, Superrequest) 2

Category 4 - Communication

# Criterion Points
19 The frontend and the backend communicate using HTTP (e.g., Axios, Fetch) or WebSockets (e.g., Socket.io) 2
20 Diagrams present how the frontend and the backend communicates 2
21 Some examples are made with screenshots of the project 2

Category 5 - Containerization

# Criterion Points
22 A Docker Compose file allows to build, start and run both backend and frontend locally 2

Remarks

  • You can use any frontend framework you want, Vue, React, Angular, Svelte, etc.
  • You can use any backend framework you want, Express, Fastify, NestJS, etc.
  • You can use any package manager you want, npm, yarn, pnpm, etc.
  • You can use Swagger/Open API to document your API.
  • You can replace Docker with one of its alternatives (Podman, Buildah, etc.)
  • You can use anything you want to create your website as long as you specify the source.
  • You can use Material UI, Bootstrap, Tailwind, etc. to style your website. You do not need to deploy your website.

Submission

The deadline is the 28th of January 2024 at 22h00 (Sunday)

Any commit after the deadline will not be taken into account. Each day of delay will result in a penalty of -1 point on the final grade.

To submit your work, create a new GitHub Discussion at https://github.com/orgs/HEIG-VD-WEB/discussions with the following information:

  • Title: WEB 2023-2024 - Practical work 3 - First names of the students
  • Category: Show and tell
  • Description: The URL of your repository

If your repository is private, you must add me as collaborator to your repository!

If you don't want your first name to appear on GitHub, you can use your GitHub username instead. Juste email me to let me know.

Grades and feedback

Grades will be entered into GAPS, followed by an email with the feedback.

The evaluation will use exactly the same grading grid as shown in the course material.

Each criterion will be accompanied by a comment explaining the points obtained, a general comment on your work and the final grade.

If you have any questions about the evaluation, you can contact me!

Promoting success

I encourage you to use TypeScript.

If you do a video game and want everyone to play it on the last day of the course, I'm in! And I can give you the resources you need to do it (hosting, domain name, etc.)

Here is a tutorial to create an interactive drawing application: https://docs.beescreens.ch/tutorials/create-an-interactive-drawing-application/introduction/

Long time ago

A long time ago, one of the secretaries of the HEIG-VD and I joked about a student catapult. I told her that I could make her one. But never took the time to do it. I think it would be a great idea to do it for this practical work. I can give you the resources you need to do it (hosting, domain name, etc.)