A modern and responsive React-based App Store web application showcasing apps, installation tracking, analytics, and smooth user interaction — built with creativity, performance, and practicality.
🔗 Live Site: App Store Portal
- Includes a clickable logo that navigates to the Home page.
- A navigation bar with active route highlighting for:
- 🏠 Home
- 📱 Apps
- ⚙️ Installation
- A Contribution Button linking directly to my GitHub profile.
- Custom creative footer designed with responsive and minimalistic styling.
- Engaging banner section with central heading, description, and two buttons:
- App Store → Redirects to App Store.
- Play Store → Redirects to Play Store.
- States Section: Displays three info cards dynamically.
- Top Apps Section:
- Shows top 8 apps in a 4-column grid.
- Displays image, title, downloads, and average rating.
- Includes a Show All button linking to the All Apps page.
- Displays all available apps in a grid layout.
- Live Search Functionality: Filters apps by title in real-time (case-insensitive).
- Shows a “No App Found” message when no match exists.
- Displays total app count and includes sorting & search options.
- Each app card is clickable → navigates to detailed app view.
- Displays detailed app information:
- Image, title, downloads, reviews, and rating.
- Install Button Functionality:
- Installs app to LocalStorage.
- After installation → button becomes disabled and text changes to Installed.
- Displays a success toast.
- Interactive Review Chart using Recharts.
- Description Section designed according to Figma layout.
- Displays all apps installed by the user (fetched from LocalStorage).
- Each card includes:
- App image, title, and Uninstall button.
- Uninstall Button Functionality:
- Removes app from both UI and LocalStorage.
- Displays a relevant toast message.
- Sorting Dropdown:
- High → Low (descending)
- Low → High (ascending)
- Custom Error Page for invalid routes.
- Loading Animation during:
- Page navigation
- Search operation
- Not Found Message for unavailable app details.
- Smooth reload on all routes after deployment (no 404 errors).
| Category | Tools / Libraries |
|---|---|
| Frontend | React.js, Tailwind CSS, DaisyUI |
| Routing | React Router |
| Chart | Recharts |
| State Management | React Hooks (useState, useEffect) |
| Notifications | React Toastify |
| Storage | LocalStorage |
| Hosting | Netlify |
- Dynamic routing and navigation
- Live search with instant feedback
- LocalStorage-based app installation
- Toast notifications for actions
- Sorting by downloads
- Responsive chart visualization
- Fully responsive UI
- Deployment-ready configuration (SPA routing supported)
✅ Live Site: [https://hero-app-store-001.netlify.app/] 🚀 Hosted on Netlify, supporting smooth SPA reloads and navigation.
Ashraful Islam Shohan
EEE Student | At NSU
© 2025 Ashraful Islam Shohan