https://github.com/toufikforyou/mh-app-store
MH Store - Discover Amazing Apps
https://github.com/toufikforyou/mh-app-store
cloudflare-pages css github github-actions html javascript
Last synced: 5 months ago
JSON representation
MH Store - Discover Amazing Apps
- Host: GitHub
- URL: https://github.com/toufikforyou/mh-app-store
- Owner: toufikforyou
- Created: 2025-01-02T14:09:47.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-09-30T09:20:29.000Z (9 months ago)
- Last Synced: 2025-09-30T09:28:36.401Z (9 months ago)
- Topics: cloudflare-pages, css, github, github-actions, html, javascript
- Language: JavaScript
- Homepage: https://apps.toufikhasan.com
- Size: 28.2 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# MH Store - Modern App Store
A modern, responsive app store interface built with HTML, CSS, and JavaScript. Inspired by Google Play Store and Apple App Store designs.
## Features
- 🎨 **Modern Design**: Clean, gradient-based UI with smooth animations
- 📱 **Fully Responsive**: Works perfectly on desktop, tablet, and mobile devices
- 🔍 **Search Functionality**: Real-time search across app names, descriptions, and developers
- 🏷️ **Category Filtering**: Filter apps by category with dynamic counts
- ⭐ **Rating System**: Star-based rating display with half-star support
- 🎯 **Featured Apps**: Highlighted section for promoted applications
- 📊 **Sorting Options**: Sort by rating, downloads, or alphabetically
- 🎪 **App Details Modal**: Detailed view with screenshots, reviews, and stats
- ✨ **Interactive Effects**: Ripple effects, parallax scrolling, and smooth transitions
- 🎭 **Loading Animations**: Smooth fade-in animations for better UX
## Project Structure
```
my-software-store/
├── index.html # Main HTML file
├── css/
│ └── style.css # Comprehensive styling with modern CSS
├── js/
│ ├── data.js # App data (9 sample apps)
│ └── app.js # Main JavaScript functionality
└── README.md # This file
```
## Getting Started
1. **Clone or download** the repository
2. **Open** `index.html` in your web browser
3. **Explore** the store interface
### Local Development
For development with live reload, you can use any local server:
```bash
# Using Python 3
python -m http.server 8000
# Using Node.js (http-server)
npx http-server
# Using PHP
php -S localhost:8000
```
Then visit `http://localhost:8000`
## App Data Structure
Each app in the data includes:
```javascript
{
id: 1,
name: "App Name",
category: "Category",
rating: 4.5,
icon: "icon_url",
screenshots: ["screenshot1", "screenshot2"],
description: "App description",
link: "download_link",
downloads: "1M+",
ageRating: "Everyone",
developer: "Developer Name",
whatsNew: "Latest updates",
reviews: [{ user: "User", rating: 5, comment: "Great app!" }],
featured: true
}
```
## Categories
Current categories include:
- 🎨 **Creativity** (2 apps)
- 💼 **Productivity** (1 app)
- 🎵 **Music** (2 apps)
- 👥 **Social** (1 app)
- 💰 **Finance** (1 app)
- 🎮 **Games** (1 app)
- 📷 **Photography** (1 app)
## Technologies Used
- **HTML5**: Semantic markup structure
- **CSS3**:
- CSS Grid & Flexbox for layouts
- CSS Custom Properties (variables)
- Advanced selectors and animations
- Media queries for responsive design
- **JavaScript (ES6+)**:
- Classes and modules
- Arrow functions
- Template literals
- Intersection Observer API
- Event delegation
## Browser Support
- ✅ Chrome 70+
- ✅ Firefox 65+
- ✅ Safari 12+
- ✅ Edge 79+
## Key Features Breakdown
### Search & Filter
- Real-time search with 300ms debounce
- Category-based filtering
- Multi-criteria sorting (rating, downloads, name)
### User Interface
- Gradient backgrounds and modern card designs
- Smooth scrolling navigation
- Interactive hover effects and animations
- Responsive grid layouts
### App Details
- Modal-based app information display
- Screenshot gallery
- User reviews with star ratings
- Download functionality
### Performance Optimizations
- Intersection Observer for lazy loading animations
- Debounced search input
- Efficient DOM updates with template literals
- CSS-only animations where possible
## Customization
### Adding New Apps
1. Edit `js/data.js`
2. Add new app objects to the `apps` array
3. The interface will automatically update
### Styling Changes
- Main colors and gradients are defined in CSS custom properties
- Responsive breakpoints can be adjusted in media queries
- Animation timing and effects are customizable
### New Features
The modular JavaScript structure makes it easy to add:
- User accounts and authentication
- Shopping cart functionality
- App reviews and ratings
- Advanced search filters
- Dark/light theme toggle
## License
This project is open source and available under the [MIT License](LICENSE).
## Contributing
1. Fork the project
2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
---
**MH Store** - Experience the future of app discovery! 🚀