Project Setup:

Note: you have to be logged in to your GitHub account to do the following steps

• In the first field "Your old repository’s clone URL" enter URL of this repository  

  https://github.com/M-Gharib/exam-example-wad2025.git

• In the "Your new repository details", give the repo a name (e.g., WAD25-Yourname), and make it Private
• Press on "begin import", it should take a few seconds

• Add me as a collaborator to your new repository (inviting collaborators

  )

  • My email and username on GitHub are: [email protected] and M-Gharib respectively

After importing the repository, you can set up your project, as follows: 

• Clone the repository: > git clone repo_name
• Navigate to the project directory:  > cd <project name>
• Project setup:    > npm install
• DB information: Complete the information related to your database (db name, password) in the database.js file that is in the ../server directory
• Run the Back-end:  > npm run server
• Run the Front-End with hot reload:  > npm run serve

 Important notes: 

• You are expected to finish the project setup and add me as a collaborator within the first hour of the exam.
• Commit and push changes to your repo after finishing each task. This will enable me to track the progress of your work and assess whether it is logical. Failing to commit and push changes for a single task will make you lose half of the task points. Failing to commit and push changes for more than one task, will be considered suspicious behavior, which may lead to zero points for the practical question.  If a student commits and pushes all tasks together, he/she will get a zero since there is no way to assess whether the progress of the work is logical.
• For each commit and push use the corresponding task name.

•  Do not make any changes to your repo after the end of the exam. Any change to the repository after the end of the exam will make the repo invalid resulting in zero points.

Note: if we observe suspicious behavior, the student involved will be called for an interview. Examples of suspicious behavior can be, all the commits happening with a non-realistic timeline, too many similarities between codes of students, etc.

1. Table 1 shows table "routes" that is created automatically in your database, also 6 records have been inserted into it.

Figure 1.

Task 2.  Add the required styling (CSS) to make the page looks like Figure 2.  [X point]

 Figure 2.

Task 3. Modify your code so that when the cost of a trip is more than 12, its background will be red. Otherwise, its background should be blue as shown in Figure 3.  [X point]

Figure 3.

Task 4. Add an element that represents the number of trips as shown in Figure 4.  [X point]

Note: the shown number should be dynamic (not static), i.e., it should count the number of offered trips and update the value when trips are added or removed.

Figure 4.

Another frontend example: (you might be presented with how the frontend looks and asked to code the functionalities and styling )

App description: same as above

Task 1. RouteManagement.vue (shown in the Figure below) is supposed to fetch and represent all available routes in the database. [X point]

Task 2. Each route should be represented as a row in a table accompanied by two buttons (update and delete). [X point]

Task 3. The update and delete button should update/delete the route of concern. Then, redirect to the homepage ("/") [X point]

Task 4.  RouteManagement.vue should include a form that allows adding a new route when pressed on. [X point]

Task 5. the appearance of RouteManagement.vue should be close enough to Figure 5.[X point]

Figure 5. 

Backend examples:

Task 1. Modify the put request in server.js in a way that allows modifying only the time and date of a trip. [X point]

Task 2. Write a Get request handler in server.js that takes a  city name as a route parameter and returns all trips departing from that city. [X point]

Task 3. Write a Delete request handler that deletes all records in the database. [X point]

Task 4.  ....

Another Backend  example:  (you might be presented with the front end  App and asked to code the functionalities of the backend)

RouteManagement.vue (shown in the Figure 6) is supposed to fetch and represent all available routes in the database, it can also modify or delete any route, and add new routes through the form. 

Task 1. Write a Get request handler in server.js that fetches all available trips from the database [X point]

Task 2. Write an update request handler in server.js that updates a specific trip as shown in the figure [X point]

Figure 6.