https://github.com/hossain-khan/device-catalog-webapp
Web application for Android device catalog, jump started using Spark
https://github.com/hossain-khan/device-catalog-webapp
android android-device catalog
Last synced: 7 months ago
JSON representation
Web application for Android device catalog, jump started using Spark
- Host: GitHub
- URL: https://github.com/hossain-khan/device-catalog-webapp
- Owner: hossain-khan
- License: mit
- Created: 2025-08-04T12:01:41.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-09-17T19:52:22.000Z (7 months ago)
- Last Synced: 2025-09-29T11:52:52.822Z (7 months ago)
- Topics: android, android-device, catalog
- Language: TypeScript
- Homepage: https://android-device.gohk.xyz/
- Size: 3.27 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Security: SECURITY.md
Awesome Lists containing this project
README
# Device Catalog Web App
[](https://github.com/hossain-khan/device-catalog-webapp/actions)
A modern, responsive device catalog application built with React, TypeScript, and Tailwind CSS. Browse, filter, and compare Android devices with an intuitive interface.
## 🚀 Features
- **Device Browsing**: View comprehensive Android device specifications
- **Advanced Filtering**: Filter by manufacturer, form factor, RAM, SDK version, and more
- **Device Comparison**: Compare multiple devices side-by-side
- **Data Management**: Upload custom device data via JSON files
- **Export Functionality**: Export filtered results and statistics (button relocated to device grid area)
- **Responsive Design**: Works seamlessly on desktop and mobile
- **Performance Optimized**: Virtual scrolling for large datasets
## 🛠️ Development
### Prerequisites
- Node.js 20.x or 22.x (LTS versions)
- npm
### Getting Started
1. **Clone the repository**
```bash
git clone https://github.com/hossain-khan/device-catalog-webapp.git
cd device-catalog-webapp
```
2. **Install dependencies**
```bash
npm install
```
3. **Start development server**
```bash
npm run dev
```
4. **Build for production**
```bash
npm run build
```
5. **Run tests**
```bash
npm test
```
### Available Scripts
- `npm run dev` - Start development server
- `npm run build` - Build for production
- `npm run build:memory-optimized` - Memory-optimized build
- `npm run lint` - Run ESLint
- `npm run preview` - Preview production build
- `npm test` - Run test suite (110 tests)
- `npm run test:run` - Run tests once
- `npm run test:coverage` - Run tests with coverage
## 🐛 Troubleshooting
### Common Issues
**npm run dev fails:**
- Try `rm -rf node_modules package-lock.json && npm install`
- Ensure Node.js version compatibility (v20+ LTS)
**Deployment fails:**
- Verify `account_id` in `wrangler.toml`
- Check that `_worker.js` and `.assetsignore` exist in `dist/` after build
- Ensure Cloudflare account has Workers enabled
**Custom domain conflicts:**
- Use subdomains instead of root domains
- Check for existing DNS records in Cloudflare dashboard
## 🏗️ Architecture
This project was originally built using GitHub Spark but has been refactored to use standard web technologies:
- **Frontend**: React 19, TypeScript, Tailwind CSS
- **Build Tool**: Vite 7.x
- **UI Components**: Radix UI primitives with custom styling
- **Charts**: Recharts for data visualization
- **Icons**: Phosphor Icons
- **Storage**: LocalStorage for persistence
- **Testing**: Vitest with 110 comprehensive tests
## 📄 License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.