Scribd
Upload
337 views

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
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
337 views

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
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