Siply

Bringing your favorite drinks to your doorstep! 🍻🍷🥃

A modern Flutter application for alcohol delivery with a comprehensive e-commerce experience. Built with Firebase backend, Riverpod state management, and a beautiful Material Design interface.

🚀 Features

🔐 Authentication System

• User Registration & Login: Email/password authentication with Firebase Auth
• Password Reset: Secure password recovery via email
• Form Validation: Comprehensive input validation for email and password fields
• Error Handling: User-friendly error messages and loading states
• Auto-login: Persistent authentication state management

🏠 Home Screen

• Featured Banner: Dynamic promotional banner with remote configuration support
  • Remote Config Integration: Banner content, images, and links managed via Firebase Remote Config
  • Real-time Updates: Banner changes without app updates
  • Fallback Support: Graceful handling when remote config is unavailable
• Latest Products: Recently added products (within last 7 days)
• Category Navigation: Quick access to different product categories
• Product Grid: Beautifully designed product cards with images and pricing

🛍️ Product Catalog

• Multi-Category Support:
  • 🍺 Beers: Various beer brands (Heineken, Budweiser, Corona, etc.)
  • 🍷 Wine: Red, white, and rosé wines
  • 🥃 Spirits: Premium spirits (Jack Daniels, Absolut, Bombay, etc.)
  • 🍸 Other: Shots, cocktails, and specialty drinks
• Product Details: Comprehensive product information including:
  • Alcohol percentage
  • Volume (ml)
  • Origin information
  • Available quantity
  • Product descriptions
• Search & Filter: Category-based product filtering
• Product Modals: Detailed product views with full specifications

🛒 Shopping Cart

• Add to Cart: Seamless product addition with quantity selection
• Cart Management:
  • Quantity adjustment (+/- buttons)
  • Item removal (swipe to delete)
  • Bulk cart clearing
• Real-time Updates: Live cart total calculation
• Persistent Storage: Cart state maintained across app sessions

💳 Checkout Process

• Order Summary: Detailed breakdown of items and pricing
• Delivery Fee Calculation: Transparent pricing with delivery costs
• Order Confirmation: Complete order processing workflow

👤 User Profile

• Personal Information: User details and account management
• Order History: Complete order tracking and history
• Favorites: Saved favorite products
• Settings: App preferences and configuration
• Logout: Secure session termination

📱 User Interface

• Material Design 3: Modern, clean interface following Material Design guidelines
• Responsive Design: Optimized for various screen sizes
• Custom Components:
  • Siply buttons (primary, secondary, icon buttons)
  • Custom text form fields with validation
  • Modal sheets and bottom sheets
  • Loading indicators and animations

🎨 Design System

• Custom Color Palette: Carefully crafted color scheme
• Typography: Consistent text styling with Google Fonts
• Icons: Material Design icons throughout the app
• Animations: Smooth transitions and micro-interactions
• Accessibility: Screen reader support and accessibility features

🛠️ Technical Stack

Frontend

• Flutter: Cross-platform mobile development framework
• Dart: Programming language
• Riverpod: State management and dependency injection
• Go Router: Declarative routing and navigation
• Material Design: UI component library

Backend & Services

• Firebase Auth: User authentication and management
• Cloud Firestore: NoSQL database for products and user data
• Firebase Core: Firebase initialization and configuration
• Firebase Remote Config: Dynamic configuration management for app features
• ImageKit: Image storage and optimization (cost-effective alternative to Firebase Storage)

Development Tools

• Freezed: Code generation for immutable classes
• JSON Annotation: JSON serialization
• Build Runner: Code generation automation
• Flutter Lints: Code quality and style enforcement
• Riverpod Lint: Riverpod-specific linting rules

UI/UX Libraries

• Google Fonts: Typography
• Cached Network Image: Optimized image loading and caching
• Flutter SpinKit: Loading animations
• Wolt Modal Sheet: Beautiful modal presentations

📁 Project Structure

lib/
├── firebase_options.dart         # Firebase configuration
├── main.dart                     # App entry point
├── root.dart                     # Root navigation wrapper
├── screens/
│   ├── auth/                     # Authentication screens
│   │   ├── model/                # User data models
│   │   ├── provider/             # Auth state management
│   │   ├── service/              # Auth service layer
│   │   └── widgets/              # Auth UI components
│   ├── cart/                     # Shopping cart functionality
│   │   ├── model/                # Cart data models
│   │   ├── provider/             # Cart state management
│   │   ├── service/              # Cart service layer
│   │   └── widgets/              # Cart UI components
│   ├── checkout/                 # Order processing
│   │   ├── provider/             # Checkout state management
│   │   ├── service/              # Checkout service layer
│   │   └── widgets/              # Checkout UI components
│   ├── favorites/                # User favorites functionality
│   │   ├── model/                # Favorites data models
│   │   ├── provider/             # Favorites state management
│   │   ├── service/              # Favorites service layer
│   │   └── widgets/              # Favorites UI components
│   ├── home/                     # Home screen and widgets
│   │   ├── provider/             # Home state management
│   │   ├── service/              # Home service layer
│   │   └── widgets/              # Home UI components
│   ├── orders/                   # Order history
│   │   ├── model/                # Order data models
│   │   ├── provider/             # Orders state management
│   │   ├── service/              # Orders service layer
│   │   └── widgets/              # Orders UI components
│   ├── product/                  # Product catalog
│   │   ├── model/                # Product data models
│   │   ├── provider/             # Product state management
│   │   ├── service/              # Product service layer
│   │   └── widgets/              # Product UI components
│   ├── profile/                  # User profile management
│   │   └── widgets/              # Profile UI components
│   └── shared/                   # Shared UI components
├── utils/
│   ├── data/                     # Local data and constants
│   ├── theme/                    # Theme configuration
│   ├── constants.dart            # App constants and configuration
│   ├── extensions.dart           # Dart extensions
│   ├── local_data.dart           # Local data utilities
│   ├── routes.dart               # Navigation configuration
│   ├── timestamp_converter.dart  # Timestamp utilities
│   └── validators.dart           # Form validation logic
└── assets/                       # App assets
    ├── icons/                    # App icons
    ├── images/                   # App images
    └── vectors/                  # App vector graphics

UI/UX

• Figma
• Illustrations from unDraw (Katerina Limpitsouni)
• Images and Logo from Canva
• Font Family: Playfair Display & Lato
• Color palette:

🎯 Key Features Implementation

State Management

• Riverpod Providers: Centralized state management
• Async Providers: Efficient data fetching and caching
• State Notifiers: Reactive state updates
• Provider Scoping: Optimized widget rebuilds

Navigation

• Go Router: Type-safe navigation
• Nested Routes: Complex navigation hierarchies
• Route Guards: Authentication-based route protection

Data Management

• Firestore Integration: Real-time database synchronization
• Image Optimization: Cached network images
• Data Models: Type-safe data structures with Freezed

UI/UX Features

• Responsive Design: Adaptive layouts for different screen sizes (In progress)
• Loading States: Comprehensive loading indicators
• Error Handling: User-friendly error messages
• Form Validation: Real-time input validation
• Accessibility: Screen reader and accessibility support (In progress)

🔧 Remote Configuration

Firebase Remote Config Integration

The app leverages Firebase Remote Config to dynamically manage content and features without requiring app updates:

Banner Management

• Dynamic Content: Banner images, text, and promotional messages can be updated remotely
• Real-time Updates: Changes are fetched and applied when the app is opened
• Fallback Strategy: Local default values ensure the app functions even when remote config is unavailable

Implementation Details

• Provider Pattern: Remote config state managed through Riverpod providers
• Error Handling: Graceful fallback to default values on fetch failures
• Loading States: Smooth loading indicators during config fetch
• Type Safety: Strongly typed configuration models using Freezed

📷 Screenshot