This task intends to provide you with experience in React States, React Hooks and Connecting React App to NodeJS Server. You are given the wireframe of the Customer Task page of iService Web Application.
You will find “Topic Videos and Demo Videos” of Week 8-10 on the unit site to be particularly useful as a reference for this task. Please also keep an eye on your email and any announcements that may be made on Cloud Deakin.
You must ensure that all your project files used for this task sit in a directory called “Task 10.1P”in OneDrive/GitHub/Bitbucket. A link to the demo video of your home page loading and running and the task would be saved in a db must be submitted. Please put all links including the screenshot of your webpage in one PDF file and submit it using the task submission page to OnTrack. Please do not upload node_modules directory. Please make sure that I and Dinesh have access to the folder/repository. This is an individual assignment, and you should submit by 8pm AEST, Friday, Oct.8, 2021 (Week 12).
• To apply what you have learnt in the frontend and backend into a real-world web application.
• To provide you with a reference web application for your future projects.
In Task page, a customer could post a new task. First, a customer needs to choose the type of the task (online or in person). Based on the task type, related task component (date and suburb) will be shown (conditional rendering). Then a customer enters the task title and description that gives experts a brief information to decide to accept the task. At the end, a customer enters budget for the task. All task information needs to be saved in the database on Express server.
You need to design a task page using React as shown in the wireframe. This wireframe is the minimum design requirements in terms of components but not limited to. You can have your own design and add more interesting components.
• Each single part must be designed as a single component which is responsible for one single responsibility.
• You are allowed to use Semantic UI React , or similar packages.