🚀 Expo Guide Builder

A sleek, modern web application built with React and Vite that serves as an interactive landing page and installation guide for Expo-based mobile applications. This project showcases the Daily Duas app, a beautiful digital Tasbeeh companion for daily Islamic remembrance.

✨ Features

• 🎨 Modern UI: Clean, responsive design with smooth animations using Framer Motion
• 📱 Mobile-First: Optimized for all devices with Tailwind CSS
• 🔗 QR Code Integration: Direct app installation via Expo Go
• 📋 Feature Showcase: Highlight key app capabilities with icons and descriptions
• 🖼️ App Screenshots: Visual preview of the mobile application
• 📖 Installation Guide: Step-by-step instructions for users
• 🌐 SEO-Friendly: Built with Vite for fast loading and performance

🧠 How It Works

The application is a single-page React app that uses React Router for navigation. It features multiple sections:

1. Hero Section: Eye-catching introduction with QR code for instant app access
2. Features Section: Grid layout showcasing app capabilities
3. App Showcase: Screenshots and previews of the mobile app
4. Install Guide: Detailed instructions for downloading and using the app

The app leverages modern web technologies for a seamless user experience, with animations and responsive design ensuring it looks great on any device.

🛠 Tech Stack

• Frontend Framework: React 18 with TypeScript
• Build Tool: Vite
• Styling: Tailwind CSS with custom design system
• UI Components: shadcn/ui (built on Radix UI primitives)
• Animations: Framer Motion
• State Management: TanStack Query (React Query)
• Icons: Lucide React
• QR Code Generation: qrcode.react
• Testing: Vitest with Playwright for E2E
• Linting: ESLint
• Package Manager: npm/bun

📦 Installation

1. Clone the repository

   git clone https://github.com/adelelawady/daily-dua.git
   cd expo-guide-builder

2. Install dependencies

   npm install
   # or
   bun install

3. Start the development server

   npm run dev
   # or
   bun run dev

4. Open your browser

   Navigate to http://localhost:8080 to view the application.

⚙️ Configuration

The application uses Vite for configuration. Key settings in vite.config.ts:

• Base Path: /daily-dua/ in production for GitHub Pages deployment
• Server: Configured for development with HMR
• Aliases: @ points to src/ directory

Environment variables are minimal, with the app adapting based on development/production mode.

🚀 Usage

1. View the Landing Page: The app displays a comprehensive overview of the Daily Duas mobile application
2. Scan QR Code: Use Expo Go app to scan the QR code for instant installation
3. Explore Features: Scroll through sections to learn about app capabilities
4. Follow Install Guide: Get step-by-step instructions for using the mobile app

📂 Project Structure

expo-guide-builder/
├── public/
│   └── robots.txt
├── src/
│   ├── assets/
│   ├── components/
│   │   ├── ui/          # shadcn/ui components
│   │   ├── HeroSection.tsx
│   │   ├── FeaturesSection.tsx
│   │   ├── AppShowcase.tsx
│   │   └── InstallGuide.tsx
│   ├── hooks/
│   ├── lib/
│   │   └── utils.ts
│   ├── pages/
│   │   ├── Index.tsx
│   │   └── NotFound.tsx
│   └── App.tsx
├── test/
│   ├── example.test.ts
│   └── setup.ts
├── package.json
├── vite.config.ts
├── tailwind.config.ts
└── README.md

🖼 Screenshots

1. Hero Section

The main landing area with app title, description, and QR code for easy installation.

2. Features Overview

Showcase of key app features including Tasbeeh counter, progress tracking, and daily reminders.

3. App Preview

Screenshots of the Daily Duas mobile app interface and functionality.

🧪 Development

Running in Development Mode

npm run dev

Starts the Vite development server with hot module replacement.

Building for Production

npm run build

Creates an optimized production build in the dist/ directory.

Running Tests

npm test

Runs the test suite using Vitest.

Linting

npm run lint

Checks code quality with ESLint.

🤝 Contributing

We welcome contributions! Here's how you can help:

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Make your changes and ensure tests pass
4. Commit your changes: git commit -m 'Add amazing feature'
5. Push to the branch: git push origin feature/amazing-feature
6. Open a Pull Request

Please read our Contributing Guidelines for more details.

📜 License

This project is licensed under the MIT License - see the LICENSE file for details.

⭐ Support

If you find this project helpful, please give it a ⭐ on GitHub!

For questions or support, feel free to open an issue.

---

Built with ❤️ for the React Native and Expo community.