0% found this document useful (0 votes)
417 views3 pages

Frontend Internship Assignment

The task is to create a responsive landing page using React and Tailwind CSS that integrates with a mock REST API. The landing page will have a search bar to search Chartered Accountants from the API. Search results will dynamically display below and link to detailed profiles. The deliverables are a pixel-perfect homepage matching the Figma design, a details page, responsive design, API error handling, and clean, well-organized code in a GitHub repository.

Uploaded by

rt1639659
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
417 views3 pages

Frontend Internship Assignment

The task is to create a responsive landing page using React and Tailwind CSS that integrates with a mock REST API. The landing page will have a search bar to search Chartered Accountants from the API. Search results will dynamically display below and link to detailed profiles. The deliverables are a pixel-perfect homepage matching the Figma design, a details page, responsive design, API error handling, and clean, well-organized code in a GitHub repository.

Uploaded by

rt1639659
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

Job Task: Create a Responsive Landing Page with API Integration

Objective: Convert the provided Figma landing page design into a fully responsive React
application using Tailwind CSS. The application should have a search bar that interacts with a
provided mock RESTful API to search for Chartered Accountants.

Prerequisites:
● Familiarity with React, Tailwind CSS, RESTful APIs, and Git/GitHub.
● Access to the provided Figma design.

Instructions:

1. Set Up Your Environment:

● Initialize a new React application using Vite.


● Set up Tailwind CSS with React.

2. Design Conversion:

● Convert the Figma design into a React component.


● Ensure that the design is pixel perfect and adheres to the Figma file's specifications.
● The design should be fully responsive, adapting well to mobile, tablet, and desktop
views.

3. API Integration:

● Set up a mock RESTful API using JSON Server with the provided JSON file containing
a list of Chartered Accountants.
● Implement a search bar that makes a GET request to your mock API, searching for
Chartered Accountants by name.
● Display the search results dynamically below the search bar.
● When a user clicks on a Chartered Accountant's name from the search results, redirect
them to a details page showing more information about the selected Chartered
Accountant.
● Handle potential edge cases, such as no matches found or errors in the API request.

4. Deploy & Share:


.
● Push your code to a public GitHub repository.
● Share the live site link, API endpoint, and GitHub repository link for review.
5. Evaluation Criteria:

● Design Fidelity: How well does the React application match the Figma design?
● API Integration: How effectively does the application interact with the mock API? How
are edge cases handled?
● Code Quality: Is the code well-organized, readable, and efficient?
● Responsiveness: Does the application adapt well to various screen sizes?

Resources:

Figma Design: Figma Design


JSON: CA.json

Expected Deliverables:

Homepage:

● A landing page that closely matches the design in the provided Figma file.
● A search bar to enter the name or part of the name of a Chartered Accountant.
● Dynamic search suggestions that display below the search bar as the user types. This
should show a list of matching Chartered Accountants from the JSON-server.
● The search suggestions should be clickable.

Details Page:

● When a user clicks on a Chartered Accountant from the search suggestions, they should
be redirected to a separate details page.
● This page should display more detailed information about the selected Chartered
Accountant, including their name, charge, description, rating, and an image.
● Ideally, there should be a back button or a clear way to return to the homepage.

Responsiveness:

● Both the homepage and details page should adapt well to various screen sizes, from
mobile to desktop.
API Interactions:

● All data interactions should be done through API requests to the JSON-server.
● Proper handling and display of errors if, for instance, the API doesn't respond.

Code Quality:

● Code should be well-organized, with a clear directory structure.


● Proper use of React components, hooks, and state management.
● Clean, readable, and commented (where necessary) code.

You might also like