Hero IO

• Live Link

---

1. 🧱 Layout & Data Design

Header and Footer

• Here header included:
  • A logo.on clicking it user will be navigated to home page.
  • A navigation bar with links [ home , apps , installation ] and active route indication.
  • A Contribution button as Figma linking to the your GitHub profile.

Data

• JSON of Array objects for app data using the following structure:

  {
    image: string;
    title: string;
    companyName: string;
    id: number;
    description: string;
    size: number;
    reviews: number;
    ratingAvg: number;
    downloads: number;
    ratings: [
      { name: "1 star"; count: number },
      { name: "2 star"; count: number },
      { name: "3 star"; count: number },
      { name: "4 star"; count: number },
      { name: "5 star"; count: number }
    ];
  }

---

2. 🏠 Home Page

Banner

• Banner contain a center-aligned heading, text, and two buttons.
• “App Store” button will redirect to the App Store.
• “Play Store” button will redirect to the Play Store.

States Section

• States Section three state cards as shown in Figma.

Top Apps Section

• Displayedeight apps in a four-column layout.
• Each app card have in display:
  • App title
  • Image
  • Download count
  • Average rating
• Clicking on a card should navigate the user to the App Details page.
• Include a “Show All” button that navigates to the All Apps page.

---

3.📱 All Apps Page

Title Section

• A title and subtitle following the Figma design.

Search and States

• Showed the total number of apps on the left and a search bar on the right.
• Implemented live search functionality
  • filters apps by title as the user types.
  • Search will be case-insensitive
  • If no app matches, display a “No App Found” message.

App Section

• Displayedall apps from the JSON data.
• Each app card should include:
  • App title
  • Image
  • Download count
  • Average rating
• Clicking on an app card should navigate to the App Details page.

---

4.📊 App Details Page

App Information

• Showed app image on the left.
• Showed app details such as title, rating, downloads, reviews.
• Included an Install button:
  • When clicked, it becomes disabled and the text changes to Installed.
  • Showed a Success Toast after App installed

App Review Chart

• Implemented a responsive chart using the Recharts library.
• Visualize the app’s review data .

App Description

• Showed the app details in description section.

---

5. Error Page & Others

• Created a custom error page for invalid routes.

• Showed a loading animation during:

  • Page navigation.
  • Search operation.

• Showed a Relevant Not Found message app not found in app details section.

• Reloading any route after deployment does not cause an error.

---

LocalStorage Features

App Installation

• When the “Install” button is clicked:
  • Save the app to localStorage.
  • If the app is already installed, show a disabled button with the text Installed.

My Installation Page

• Created a page named “My Installation”.
• Displayed all installed apps as cards.
• Included an Uninstall button:
  • Clicking it
    • removes the app from both the UI and localStorage.
    • Show an Toast with some relevant message

---

Sort by Downloads

• Implemented a dropdown for sorting apps by download count.
• The dropdown must include:
  • High-Low: Sort apps in descending order by downloads.
  • Low-High: Sort apps in ascending order by downloads.

---

Loading Animation

• Showed a loading animation during:
  • Page navigation.
  • Search operation

---

🚀 Deployment

• Deploy the project to Netlify.
• Reloading from any route must work correctly without Showed a 404 error.

---