A modern, responsive React web app that showcases and manages a collection of apps — featuring app installation, sorting, and detailed app statistics. Built as part of a web development learning project, the Hablu App Store mimics the structure and interactivity of a real app marketplace.

• Browse Apps: View a full list of available apps with download stats and ratings.
• App Details: Each app has its own details page with description, ratings chart, and statistics.
• Install/Uninstall: Add apps to your installed list and manage them dynamically.
• Sorting: Sort installed apps by downloads or ratings (ascending or descending).
• Responsive Design: Fully optimized layout for mobile and desktop views.
• Context API Integration: Centralized state management for app installation and data updates.

• React.js – Component-based UI
• React Router – Routing and data loading
• Recharts - Visual Demonstrations
• Tailwind CSS – Modern utility-first styling
• DaisyUI – UI component library
• Font Awesome – Icons
• Numeral.js – Number formatting for downloads and stats
• use-local-storage – Custom hook for persisting installed apps (local storage)
• Vite – Fast development build tool

Hablu App Store is a modern, responsive React web app that showcases and manages a curated collection of mobile/web apps. It replicates common marketplace features: browsing apps, viewing detailed statistics, and installing/uninstalling apps locally.

Live preview: https://hablu-app-store-by-theonlyrizal.netlify.app/

Quick summary

• Purpose: Showcase apps with details, ratings and install management
• Built with: React + Vite, styled with Tailwind CSS & DaisyUI
• Status: Learning/project demo

Main features

• Browse apps with thumbnails, developer name, downloads and ratings
• App detail page with stats and charts
• Install/uninstall apps (persisted to localStorage)
• Search and filter apps
• Responsive layout for mobile and desktop

Tech stack & dependencies

• React, React Router, Vite
• Tailwind CSS, DaisyUI for UI
• Recharts for charts
• react-toastify for notifications
• numeral for number formatting
• axios for data loading

Full dependency list is in hablu-app-store/package.json.

Run locally

1. Clone the repository:

git clone https://github.com/theonlyrizal/PH12-A08-by-Rizal.git

2. Open the project folder and start the app:

cd hablu-app-store
npm install
npm run dev

3. Visit http://localhost:5173 and try a route like /apps/234 to see the App Not Found page.

If you'd like, I can also expand the repo README with screenshots, contribution guidelines, or add a small test harness.