🦸 Hero IO — App Discovery & Installation Platform

Hero IO is a production-ready, responsive web application that simulates a real-world app store experience. Users can browse applications, view detailed analytics, install apps, and manage their installations — all with smooth UI interactions and persistent data storage.

This project was built to demonstrate strong frontend engineering, component architecture, state management, data visualization, and user-experience design using modern React technologies.

Live link: https://hero-apps12a8.netlify.app/

---

🎯 Why This Project Matters

Hero IO reflects how real SaaS platforms are built. It includes:

• Structured data models

• Scalable routing

• Persistent user actions

• Performance-friendly UI

• Analytics visualization

• Real-world UX patterns

---

🔥 Key Features

App Discovery

• Browse a catalog of 12+ applications

• View ratings, reviews, and download counts

• Quick access to app details

Advanced Search & Sorting

• Live search with instant filtering

• Case-insensitive matching

• Download-based sorting (High → Low, Low → High)

App Installation System

• Install apps with one click

• Data saved in LocalStorage

• Prevents duplicate installs

• Visual success notifications

My Installation Dashboard

• View all installed apps

• Uninstall functionality

• Real-time UI updates

• Toast notifications

App Analytics

• Interactive rating charts built with Recharts

• Displays user feedback distribution

• Fully responsive

UI & UX

• Fully responsive across all devices

• Page transition loading indicators

• Custom 404 error handling

• Production-safe routing

🧩 Technical Architecture

• The application follows a modular component-based structure with clear separation of concerns:

• UI components

• Page-level routes

• Shared hooks

• Data and utilities

It uses React Router for client-side navigation, localStorage for persistence, and Recharts for data visualization.

🛠 Technologies Used

• React 19

• React Router

• Tailwind CSS

• DaisyUI

• Recharts

• Axios

• React Toastify

• Vite

🚀 Deployment

• Deployed on Netlify / Vercel / Cloudflare

• Supports route refresh without 404

• Optimized production build

Installation

# Clone the repository
git clone https://github.com/ahnafabid10/hero-apps.git

# Navigate into the project directory
cd hero-apps

# Install dependencies
npm install

# Create a `.env` file in the root directory
# Add your Firebase
VITE_apiKey=your_api_key
VITE_authDomain=your_auth_domain
VITE_projectId=your_project_id
VITE_storageBucket=your_storageBucket
VITE_messagingSenderId= your_messagingSenderId
VITE_appId= your_appId

# Run the development server
npm run dev

# Build and preview production version
npm run build
npm run preview