Scribd
Upload
9 views

Question Paper_ Creating a Pet Listing Website Using React

The document outlines the creation of a Pet Listing website using React.js, focusing on error handling and state management. It includes project setup instructions, API details for fetching pet data, implementation tasks for components and routing, and best coding practices such as ESLint configuration and responsive design. Additionally, it suggests bonus tasks like pagination and UI/UX improvements, along with submission requirements for documentation and code sharing.

Uploaded by

sathyabhushan.developer
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
9 views

Question Paper_ Creating a Pet Listing Website Using React

The document outlines the creation of a Pet Listing website using React.js, focusing on error handling and state management. It includes project setup instructions, API details for fetching pet data, implementation tasks for components and routing, and best coding practices such as ESLint configuration and responsive design. Additionally, it suggests bonus tasks like pagination and UI/UX improvements, along with submission requirements for documentation and code sharing.

Uploaded by

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

Question Paper: Creating a Pet Listing Website Using React.

js

Objective: Create a Pet Listing website using React.js that incorporates error handling and
state management while following best coding practices, including the use of ESLint and
Webpack/Vite.

Project Setup

1. Initialize the Project:


○ Create a new React project using your preferred setup tool.
○ Ensure ESLint and prettier is set up for code quality and consistency.
○ Configure Webpack/Vite for project bundling and development server.

2. Project Structure:
○ Organize the project into meaningful directories (e.g., components, pages,
services, utils).
○ Create a .env file for managing environment variables.

APIs:

1. List of Pets:
○ URL: http://pets-v2.dev-apis.com/pets
○ Description: Fetches a list of pets.
2. Pets by ID:
○ URL: http://pets-v2.dev-apis.com/pets?id=${id}
○ Description: Fetches a pet's details by its ID.
3. Breed by Animal Type:
○ URL: http://pets-v2.dev-apis.com/breeds?animal=${animal}
○ Description: Fetches breeds for a specific animal type.
4. Search API:
○ URL:
http://pets-v2.dev-apis.com/pets?animal=${animal}&location=$
{location}&breed=${breed}
○ Description: Searches for pets based on animal type, location, and breed.

Implementation Tasks

1. Setting Up State Management:


○ Use React's useState,useContext, useEffect,ect hooks for managing
component state.
○ Implement context or a state management library like Redux for global state
management if needed.
2. Creating Components:
○ PetList: Displays a list of pets.
○ PetDetails: Displays details of a selected pet.
○ SearchForm: Allows users to search for pets based on animal type, location,
and breed.
○ ErrorBoundary: Catches and displays errors gracefully.
3. Routing:
○ Use React Router for navigation between pages (e.g., home, pet details).
4. Fetching Data:
○ Create a service layer for making API calls.
○ Use axios or fetch for HTTP requests.
○ Implement error handling for API calls.
5. Error Handling:
○ Display user-friendly error messages for failed API requests.
○ Implement a fallback UI using an ErrorBoundary component.
6. State Handling:
○ Ensure proper loading states using conditional rendering (e.g., spinners).
○ Handle empty states gracefully (e.g., display a message when no pets are
found).

Best Coding Practices

1. ESLint Configuration:
○ Set up ESLint with a standard configuration (e.g., Airbnb style guide).
○ Run ESLint in the project to identify and fix linting errors.
2. Code Quality:
○ Write clean, readable, and maintainable code.
○ Use functional components and React hooks.
3. Responsive Design:
○ Ensure the website is responsive and works well on different screen sizes.
○ Use CSS frameworks like Tailwind CSS for styling.
4. Version Control:
○ Initialize a Git repository for version control.
○ Make regular commits with clear and concise commit messages.

Bonus Tasks:

1. Pagination:
○ Implement pagination for the pet list to handle large datasets.
2. Search Functionality:
○ Enhance the search form to provide more filters (e.g., age, size).
3. Improving UI/UX:
○ Use a component library like Material-UI for a polished user interface.
○ Implement animations for better user experience.
Submission:

1. Documentation:
○ Provide a README file with instructions on how to set up and run the project.
○ Document the project structure and any design decisions made.
2. Code Submission:
○ Share the GitHub repository link containing the complete project.
○ Ensure the repository is public or provide access if it's private.

You might also like