OverviewThis project is designed to evaluate your understanding and skills in ReactJS, Ant Design (Antd) version 5, GraphQL, Apollo and Hasura. The main goal of this project is to create a frontend UI based on a given Figma prototype and interact with a Hasura GraphQL server that you will set up.Figma Prototype You will be asked to code the UI based on the following Figma prototype. Hasura GraphQL Server You need to set up a free trial account at Hasura and create a new GraphQL server. Then, you should add an items table which will hold the items to be displayed in the rooms. You can generate and use dummy data for all other informational needs in the UI. Tasks
Set up a free trial account on Hasura and create a new GraphQL project.
Add an items table to your Hasura project with the appropriate fields.
Set up the project using ReactJS, Antd v5, GraphQL, and Apollo. Configure it for web browsing.
Analyze the provided prototype and estimate the time required to implement the UI.
Implement UI components for the design using ReactJS and Antd v5 as per the design provided in the Figma link.
Use GraphQL with Apollo to communicate with your Hasura GraphQL server and feed data from the items table into your UI.
Create dummy data for all other informational needs in your UI.
Implement appropriate error handling strategies to ensure your application gracefully handles unexpected issues from the server.
Use appropriate naming conventions for variables, functions, and component names to ensure future code maintainability and team-wide understanding.
Write a comprehensive Readme file to explain how to run the application, how to interact with the Hasura project, and the GraphQL queries and mutations that were used.
DeliverablesYour submission should include:
The estimated time to complete the project.
The ReactJS code of the project developed using GraphQL and Apollo.
A short video demonstrating the working of the UI, the GraphQL queries and mutations in action, and a walk-through of your Hasura project setup. This can be uploaded on any cloud storage and then shared with us.
A Readme file that includes the setup details of the project, explanation of Hasura project setup, GraphQL usage, and any other information deemed necessary.
At the end of this project, please submit a Github link or zip file that includes all the above materials.ExpectationsPlease incorporate best practices in JavaScript, ReactJS, GraphQL and Apollo, including meaningful variable, function, and component names. The code should be well-structured, easily readable, and accompanied by inline comments where necessary.We will be evaluating your skills in accurate estimation, technical understanding, problem-solving, and the ability to write clean, straightforward, and efficient code.Submissions