Question: The software development team has no prior experience with any JavaScript frontend framework. Based on a brief survey they have selected two frameworks ( Svelte

The software development team has no prior experience with any JavaScript frontend framework. Based on a brief survey they have selected two frameworks (Svelte and React) to choose from for the final implementation. You are now tasked with building the same small prototype application in both frameworks, the experience of which will factor into the final framework choice. You have been provided with skeletons for both frameworks, which you can download from the Assessment section and which are also distributed with the VCE. You must extend these skeletons to implement the following five features: Fetch the current three parking categories from the API. Show the three categories to the user. Let the user select a category from the list of categories. Send the selection back to the API. Show the user that their selection was successful. Before you start work on Question 1, ensure you read the instructions for Question 3, as it is tightly linked to your work in Question 1. As you are working through Question 1, keep notes on your experience, as you will need this information as part of Question 3. To start working on either of the two applications, you need to first start the API server. Open a terminal and navigate to the block_1/tma01/api-parking folder. Then run npm run server to start the API server. It will output it's base URL on the terminal and you can copy that into a new browser tab to check that the API is working correctly. Remember that you will have to start the API server every time you start working on the TMA. To develop each of the two applications, open a second terminal and navigate to either the svelte-parking or react-parking folder. There run npm run dev to start the development server. This will output the URL that the server is available at, which you should copy into a new browser tab to test your application. In both applications the main application component (App.svelte and App.tsx) contains a serverBaseUrl variable, which is initially commented-out. When you are ready to connect your application to the API, uncomment the lines and copy the URL output on the API server's terminal into that variable. Ensure that you always use that variable to connect to the API, just like in the Block 1 activities. This is important, because when your code is marked, the automated marking support will automatically insert the marker's user id into these variables, to ensure that the code works for the marker. The API itself provides two endpoints for use in the prototypes: GET /api/categories returns the list of categories as JSON data and must be used to implement feature 1. Each category is an object with three keys: id is the unique id for the category and this is the value that must be used with the second API endpoint as part of feature 4. title is the human-readable title for the category and must be displayed to the user as part of feature 2. price is the human-readable price for the category and must be displayed to the user as part of feature 2. POST /api/pay/{id} is the endpoint used to pay for a category when implementing feature 4. The {id} part of the URL must be replaced with a valid identifier taken from one of the three categories returned by the /api/categories endpoint. The end

Step by Step Solution

There are 3 Steps involved in it

1 Expert Approved Answer
Step: 1 Unlock blur-text-image
Question Has Been Solved by an Expert!

Get step-by-step solutions from verified subject matter experts

Step: 2 Unlock
Step: 3 Unlock

Students Have Also Explored These Related Programming Questions!