App Discovery
- Home page with a promotional banner, trending applications, and featured app cards.
- Complete app gallery with real-time, case-insensitive title search.
- Filtered-result counts, responsive grids, and reusable app cards.
App Store Discovery SPA
Hero Apps
A responsive app-store experience for discovering applications, exploring ratings and reviews, and managing a browser-persisted installation collection.
Frontend App Discovery SPACompleted
LiveOverview
What the project is
Hero Apps is a React single-page application that simulates a modern app marketplace. Users can browse trending and complete app collections, search by title, open detailed app profiles, inspect ratings and download statistics, view rating-distribution charts, and install or uninstall apps from a locally persisted collection.
Problem / Purpose
Why it was built
The project was built to practice data-driven SPA design around a familiar app-store experience. It combines asynchronous route loading, detailed catalog presentation, interactive visualization, local persistence, responsive layouts, and immediate user feedback without requiring a backend.
Key Features
Important product capabilities
App Details
- Dynamic detail routes with app icons, descriptions, sizes, downloads, ratings, and reviews.
- Interactive horizontal rating-distribution chart covering one-to-five-star reviews.
- Loading indicators and custom error handling for invalid routes or unavailable data.
Installation Management
- Install and uninstall actions from app detail and installation views.
- Browser localStorage persistence for installed app titles.
- Dedicated installation page with sorting and real-time removal updates.
Responsive Experience
- Mobile-first layouts with adaptive grids and hamburger navigation.
- Toast notifications for successful installation and removal actions.
- SPA routing configured for direct navigation and reload support on Cloudflare Pages.
Tech Stack
Technology choices by responsibility
Frontend
React 19JavaScriptReact RouterTailwind CSSDaisyUI
Build Tool
Vite
Data
JSON File StoragelocalStorage
Visualization
Chart.jsreact-chartjs-2
UI / Feedback
Lucide ReactReact Hot Toast
Deployment
Cloudflare Pages
Architecture / How It Works
Simple system flow
Hero Apps uses a client-only React architecture. React Router loaders retrieve static JSON data, page components derive search and detail views, Chart.js renders rating distributions, and localStorage preserves installation choices in the current browser.
01
Route Data Loading
React Router loaders retrieve app JSON before rendering the appropriate gallery or detail route.
02
Discovery and Search
The apps page filters loaded records against the search query and renders matching cards with a live result count.
03
Detail Visualization
The selected app record drives metadata, statistics, descriptive content, and a responsive rating chart.
04
Local Installation State
Install and uninstall actions update localStorage and immediately synchronize the visible interface.
Screenshots / Visual Walkthrough
A guided look through the experience
App Marketplace Home
The landing experience combines a banner, trending collection, and routes into the complete application gallery.
Apps Gallery
Responsive cards and real-time search help users scan and narrow the app collection.
App Detail View
Detailed screens present metadata, downloads, reviews, descriptions, and rating visualization.
Installed Apps
A dedicated management page lists locally installed apps and supports sorting and removal.
Challenges & Solutions
Engineering decisions that mattered
Challenge
Keeping installed-app state persistent without a backend.
Solution
I stored a compact installed-app collection in localStorage and synchronized React state after every change.
Challenge
Rendering rating distributions clearly across screen sizes.
Solution
I used a responsive horizontal Chart.js bar chart so star-level review counts remain readable.
Challenge
Supporting direct navigation in a deployed client-side router.
Solution
I configured Cloudflare Pages for SPA fallback behavior so nested routes continue working after refresh.
What I Learned
Growth from the project
- Hero Apps strengthened my understanding of React Router data loaders and route-driven SPA composition.
- It improved my ability to coordinate static JSON data, search-derived UI, localStorage persistence, and chart visualization.
- The project reinforced that browser-local state does not synchronize across devices or browsers.
Final Links / CTA
Explore Hero Apps
Open the live product, review the repository, or return to the full projects archive.