DeenApp is a comprehensive Next.js Islamic application designed to provide Muslims with essential tools for daily worship and learning. The app features prayer times, Quran reading, Hadith collection, Dua library, Qibla direction, and much more in a beautiful, modern interface.
- Prayer Times: Real-time prayer times with countdown timers
- Prayer Tracker: Track your daily prayers with completion status
- Qibla Direction: Find the direction of Kaaba from anywhere
- Daily Ayah: Inspirational verses from the Quran
- Tasbih Counter: Digital prayer beads for dhikr
- Hijri Calendar: Islamic calendar integration
- Al-Quran: Complete Quran with translation and tafsir
- Hadith Collection: Authentic hadiths with search functionality
- Dua Library: Comprehensive collection of supplications
- Islamic Knowledge: Educational content and articles
- Community Features: Connect with fellow Muslims
- Mosque Finder: Locate nearby mosques
- Donation Platform: Support Islamic causes
- Zakat Calculator: Calculate your zakat obligations
DeenApp/
├── src/
│ ├── components/ # Reusable React components
│ │ ├── Layout.tsx # Main app layout with navigation
│ │ ├── PrayerTimes.tsx # Prayer times display and countdown
│ │ ├── FeatureGrid.tsx # 12-feature grid layout
│ │ ├── PrayerTracker.tsx # Prayer completion tracker
│ │ ├── DailyAyah.tsx # Daily verse display
│ │ └── LocationToggle.tsx # Location selection
│ ├── pages/
│ │ └── index.tsx # Main homepage
│ ├── styles/
│ │ └── globals.css # Global styles and Tailwind imports
│ └── types/
│ └── index.ts # TypeScript type definitions
├── package.json # Dependencies and scripts
├── tailwind.config.js # Tailwind CSS configuration
├── postcss.config.js # PostCSS configuration
├── tsconfig.json # TypeScript configuration
└── README.md # Project documentation
- Framework: Next.js 14 with TypeScript
- Styling: Tailwind CSS with custom dark theme
- Icons: Lucide React
- Date Handling: date-fns
- State Management: React Hooks
- Responsive Design: Mobile-first approach
-
Clone the repository
git clone git@github.com:ovishkh/DeenApp.git cd DeenApp -
Install dependencies
npm install
-
Run the development server
npm run dev
-
Open your browser Navigate to
http://localhost:3000to view the application.
- View current prayer time with countdown timer
- Toggle between different locations
- Track prayer completion status
- View fasting times (Suhur/Iftar)
- Access 12 core Islamic features through the grid
- Each feature is designed for specific Islamic needs
- Responsive design works on all devices
- Select from predefined locations
- Prayer times automatically update based on location
- Easy location switching with dropdown
Release Date: September 12, 2025
- Complete UI Implementation: Full recreation of the mobile app interface
- Prayer Times System: Real-time prayer times with countdown timers
- Feature Grid: 12 comprehensive Islamic app features
- Prayer Tracker: Daily prayer completion tracking
- Location Toggle: Multi-location support for prayer times
- Daily Ayah: Inspirational Quranic verses
- Responsive Design: Mobile-first approach with modern UI
- Dark Theme: Beautiful dark blue gradient theme
- Modern Layout: Status bar, navigation, and card-based design
- Interactive Elements: Hover effects and smooth transitions
- Typography: Clean, readable fonts with proper hierarchy
- Icons: Comprehensive icon set using Lucide React
- TypeScript Integration: Full type safety throughout the app
- Tailwind CSS: Modern utility-first styling
- Component Architecture: Modular, reusable components
- Performance: Optimized rendering and state management
- Code Quality: Clean, maintainable code structure
- Status Bar: Battery, signal, and time display
- Bottom Navigation: 5-tab navigation system
- Touch-Friendly: Optimized for mobile interactions
- Responsive Grid: Adaptive layout for different screen sizes
lucide-react: Modern icon librarydate-fns: Date manipulation utilitiestailwindcss: Utility-first CSS frameworkclsx: Conditional class name utility
- Created comprehensive component library
- Added global styles with custom theme
- Implemented TypeScript interfaces
- Set up Tailwind CSS configuration
Contributions are welcome! Please submit a pull request or open an issue for any enhancements or bug fixes.
- Follow TypeScript best practices
- Use Tailwind CSS for styling
- Maintain component modularity
- Test on mobile devices
- Follow Islamic design principles
This project is licensed under the MIT License.
For support, feature requests, or bug reports, please open an issue on GitHub.
Made with ❤️ for the Muslim community