🌟 Quotify

Daily inspiration at your fingertips

A beautiful React Native app that brings you inspiring quotes with home screen widgets, favorites, and elegant design.

Features • Screenshots • Installation • Usage • Widgets

---

✨ Features

🎯 Core Features

• Random Quote Generation - Fetch inspiring quotes from multiple APIs
• Offline Support - Fallback quotes when no internet connection
• Favorites System - Save and manage your favorite quotes
• Beautiful UI - Stunning gradient backgrounds and modern design
• Cross-Platform - Available for both iOS and Android

📱 Home Screen Widgets

• iOS Widgets - WidgetKit-based home screen widgets
• Android Widgets - Native home screen widgets
• Auto-Updates - Widgets refresh every 30 minutes
• Manual Refresh - Tap to refresh widget content
• Seamless Sync - Widgets update when you fetch new quotes in the app

🚀 Smart Features

• Multiple APIs - ZenQuotes and Quotable APIs for reliability
• Network Resilience - Automatic fallback to backup APIs
• Share Functionality - Share quotes with friends
• Copy to Clipboard - Quick copy for easy sharing
• Elegant Animations - Smooth transitions and loading states

---

📸 Screenshots

Main App Experience

iOS	Android
Beautiful gradient UI with inspiring quotes	Cross-platform consistency

Favorites & Sharing

Favorites Management	Adding to Favorites
Manage your saved quotes	Heart to save inspirational quotes

Share Functionality

iOS Share	Android Share
Native iOS sharing experience	Android system share integration

Home Screen Widgets

iOS Widget	Android Widget
WidgetKit integration with auto-updates	Native Android widget with refresh button

---

🛠 Installation

Prerequisites

• Node.js 18+
• React Native CLI
• Android Studio (for Android development)
• Xcode 12+ (for iOS development)

Quick Start

1. Clone the repository

   git clone https://github.com/yourusername/quotify.git
   cd quotify

2. Install dependencies

   npm install

3. iOS Setup

   cd ios
   bundle install
   bundle exec pod install
   cd ..

4. Run the app

   # For iOS
   npm run ios
   
   # For Android
   npm run android

---

🎮 Usage

Getting Started

1. Launch the app to see your first inspiring quote
2. Tap "New Quote" to fetch a fresh quote from our curated sources
3. Tap the heart icon to save quotes to your favorites
4. Use the share button to spread inspiration with friends
5. Access favorites via the favorites button in the top corner

Offline Mode

• Quotify works offline with a curated selection of fallback quotes
• The app automatically switches to offline mode when connectivity is limited
• All saved favorites are available offline

---

📲 Widgets

Android Widgets

1. Long press on your home screen
2. Select "Widgets" from the menu
3. Find and add the Quotify widget
4. Enjoy automatic quote updates every 30 minutes

iOS Widgets

1. Long press on your home screen
2. Tap the "+" button in the top corner
3. Search for "Quotify" in the widget gallery
4. Choose your size (Small or Medium) and add to home screen

Widget Features

• ✅ Auto-refresh every 30 minutes
• ✅ Manual refresh by tapping
• ✅ Seamless app integration
• ✅ Beautiful gradient design
• ✅ Offline support with cached quotes

---

🏗 Tech Stack

Core Technologies

• React Native 0.80.0 - Cross-platform mobile framework
• TypeScript - Type-safe JavaScript
• React 19.1.0 - UI library

Key Libraries

• AsyncStorage - Local data persistence
• Vector Icons - Beautiful iconography
• Linear Gradient - Stunning visual effects
• Clipboard - Copy functionality
• Push Notifications - Future notification features

APIs Used

• ZenQuotes API - Primary quote source
• Quotable API - Backup quote source

---

🔧 Development

Project Structure

quotify/
├── components/           # React Native components
│   ├── QuoteGenerator.jsx    # Main quote display
│   ├── FavoritesScreen.jsx   # Favorites management
│   ├── QuoteCard.jsx         # Quote display card
│   └── GradientBackground.jsx # UI background
├── services/            # Business logic
│   └── WidgetService.js     # Widget management
├── android/             # Android-specific code
│   └── app/src/main/java/com/quotify/
├── ios/                 # iOS-specific code
│   └── QuotifyWidget/       # iOS widget extension
└── __tests__/           # Test files

Available Scripts

# Development
npm start              # Start Metro bundler
npm run android        # Run on Android
npm run ios           # Run on iOS

# Quality
npm run lint          # Run ESLint
npm test             # Run tests

# Production
npm run build        # Build for production

---

🎨 Customization

Themes

The app uses a beautiful gradient theme by default. You can customize colors in:

• components/GradientBackground.jsx
• Individual component stylesheets

Quote Sources

Add new quote APIs by modifying:

• components/QuoteGenerator.jsx
• services/WidgetService.js

Widget Appearance

Customize widget design in:

• Android: android/app/src/main/res/layout/quote_widget.xml
• iOS: ios/QuotifyWidget/QuotifyWidget.swift

---

📋 Roadmap

Upcoming Features

• Dark Mode - Toggle between light and dark themes
• Custom Categories - Filter quotes by category
• Daily Notifications - Optional daily quote notifications
• Quote History - View previously shown quotes
• Custom Quote Sources - Add your own quote APIs
• Social Features - Share and discover quotes with friends

Widget Enhancements

• Widget Themes - Multiple widget color schemes
• Widget Sizes - Additional widget size options
• Interactive Widgets - Tap actions for different functions
• Multiple Widgets - Support for multiple widget instances

---

🐛 Troubleshooting

Common Issues

Widget not appearing

• Ensure the app is installed and launched at least once
• Check device storage space
• Restart your device if needed

Quotes not loading

• Check internet connection
• App will automatically use offline quotes if APIs are unavailable
• Force close and restart the app

iOS Widget not updating

• Ensure iOS 14+ is installed
• Check widget settings in iOS Settings > General > Background App Refresh

---

📄 License

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

---

💫 Support

Love Quotify? Here's how you can show support:

• ⭐ Star this repository
• 🐛 Report bugs via GitHub Issues
• 💡 Suggest features via GitHub Issues
• 🔄 Share with friends and spread the inspiration

---

Made with ❤️ and React Native

Bringing daily inspiration to your mobile device

⬆ Back to top