Zappify – Where the next app finds you!

Zappify is a modern, responsive web application built with React and Tailwind CSS that brings you a simulated app store experience. Explore top-rated apps, view their stats, install and manage them locally — all within a beautiful and interactive interface.

---

🌐 Live Demo

https://zappify-syedshafinahmed.netlify.app/ or https://zappify-syedshafinahmed.pages.dev/

---

🔗 Installation & Setup

1. Clone the repository

git clone https://github.com/syedshafinahmed/Zappify

2. Navigate into the project directory

cd Zappify

3. Install dependencies

npm install

4. Start the development server

npm run dev

5. Build for production

npm run build

---

📌 Features

Home Page

• Engaging banner with centered heading and Play Store & App Store buttons.
• Dynamic state cards showcasing platform statistics.
• Trending Apps grid (8 featured apps) with ratings and download counts.
• Show All button to navigate to the All Apps Page.
• Includes a Contribute button linking directly to my GitHub profile.

---

Apps Page

  

• Displays all available apps dynamically.
• Real-time live search (case-insensitive).
• Displays total number of apps dynamically.
• No App Found message for unmatched queries.
• Clicking any app card redirects to its App Details Page, where detailed information and reviews are displayed.

---

App Details Page

• Detailed layout featuring app image, title, rating, reviews, and downloads.
• Install button:
  • Changes to Installed upon click.
  • Disables automatically.
  • Displays success toast notification.
  • Saves to LocalStorage.
• Responsive bar chart created with Recharts showing rating distribution.

---

Installation Page

• Displays all installed apps from LocalStorage.
• Uninstall button removes apps instantly + shows confirmation toast.
• Supports sorting by download count (High–Low / Low–High).

---

Error & Loading States

     

• Custom 404 Error Page for invalid routes.
• Loading animations during:
  • Page transitions.
  • Search operations.
• Graceful App Not Found UI for missing app details.

---

🧰 Tech Stack

Zappify is built using a modern front-end tech stack focused on performance, scalability, and responsiveness. Each tool plays a key role in ensuring a smooth user experience and maintainable codebase.

🏷️ Category	⚙️ Technology Used
Library	React.js
Styling	Tailwind CSS
UI Components	daisyUI
Routing	React Router
Charts	Recharts
Loading Animations	React Spinners
State Management	React Hooks (useState(), useEffect(), useNavigate(), useLoaderData())
Data Persistence	LocalStorage API
Deployment	Netlify

---

🔧 Highlights

• Fully responsive.
• Persistent installs using LocalStorage.
• Toast notifications for user actions.
• Active route highlighting in navbar.
• Custom footer & 404 error page.
• Works flawlessly on reload (no 404 on Netlify routes).