CareComm Task - Product Listing App 📱

CareComm Task is a cross-platform product listing application built using Flutter. The app allows users to browse products, view details, and manage their favorite items. It is designed with a responsive layout to support mobile, tablet, and desktop screens seamlessly.

Languages and frameworks 📑

• Flutter: version 3.27.2
• Dart: version 3.6.1

Packages & Plugins 🔎

State Management & Dependency Injection

• flutter_bloc - State management.
• hydrated_bloc - Persistent flutter bloc state management after app closed.
• get_it - Service locator for dependency injection.

Networking & HTTP

• http - A powerful HTTP client for making network requests.
• http_mock_adapter - A Dio adapter for mocking API responses in tests.

Routing & Navigation

• auto_route - Declarative and type-safe routing for Flutter.
• auto_route_generator - Code generation for auto_route.

Local Storage & Caching

• shared_preferences - Persistent key-value storage.
• path_provider - Provides access to commonly used storage locations.
• fast_cached_network_image - Efficient caching for network images.

UI & Responsiveness

• flutter_screenutil - Adaptive screen sizing for different devices.
• skeletonizer - Adds skeleton loading effects to UI components.

Testing & Code Generation

• mockito - Mocking framework for unit testing.
• bloc_test - Unit testing utilities for BLoC.
• build_runner - Code generation tool for Flutter.

Features 🥇

• Product Listing: Displays a list of products with a smooth UI.
• Favorites Management: Users can mark products as favorites for quick access.
• Adaptive UI: The app adjusts its layout based on the screen size (Responsive design for mobile, tablet, and desktop).
• State Management: Powered by Flutter BLoC for efficient data handling.
• Dark Mode Support: Toggle between light and dark themes dynamically.
• Navigation: Implemented using AutoRoute for seamless routing across screens.
• Supports both Web and Mobile platforms

IDEs 💻

• VS code
• Android Studio

Get the App 📱

• Android APK: Download from Google Drive (may be not updated)
• Latest Build (Mobile APK) Download or Generate Latest from GitHub Actions Artifacts: Workflow Link
• Web Version: Open on GitHub Pages

Setup 💽

To get a local copy up and running, follow these instructions.

Prerequisites

• Flutter SDK: Ensure Flutter is installed on your system. Follow Flutter installation guide
• Android Studio or Visual Studio Code for development and testing.
• clone the repository
• Ensure your device's Internet connection is enabled.
• and run the app on any plugged physical device, emulator or web browser.

Installation

   # Clone the repository
   git clone https://github.com/Mohamed-said-salah/cross_platform_carecomm_assessment.git
   cd cross_platform_carecomm_assessment

   # Install dependencies
   flutter pub get

   # Run the application on an physical Android device, emulator, or web browswer
   flutter run

   # Build the APK
   flutter build apk --release

Running Tests 🧪

To ensure the project functions correctly, you can run the unit and widget tests using the following commands:

   # Run all tests
   flutter test

   # Run tests with coverage report
   flutter test --coverage

Project Structure

   .
   └── lib/
       ├── core/
       │   ├── router/
       │   │   └── app_router.dart
       │   ├── services/
       │   │   ├── cache_manager.dart
       │   │   └── favorites_caching_service.dart
       │   ├── theme/
       │   │   ├── app_colors.dart
       │   │   ├── responsive_manager.dart
       │   │   └── text_styles.dart
       │   ├── constants.dart
       │   └── di.dart
       ├── data/
       │   ├── models/
       │   │   └── product_model.dart
       │   └── repos/
       │       └── products_repo.dart
       ├── logic/
       │   ├── bloc
       │   ├── cubit/
       │   │   ├── theme_cubit.dart
       │   │   ├── products_cubit.dart
       │   │   ├── products_state.dart
       │   │   ├── favorites_cubit.dart
       │   │   └── favorites_state.dart
       │   └── controllers
       ├── views/
       │   ├── components/
       │   │   ├── buttons/
       │   │   │   ├── animated_theme_switcher.dart
       │   │   │   └── product_favorite_button.dart
       │   │   ├── cards/
       │   │   │   └── product_card.dart
       │   │   ├── spaces/
       │   │   │   ├── horizontal_space.dart
       │   │   │   └── vertical_space.dart
       │   │   ├── tiles/
       │   │   │   └── product_tile.dart
       │   │   └── product_image.dart
       │   └── screens/
       │       ├── home/
       │       │   ├── home_screen.dart
       │       │   ├── products_tab.dart
       │       │   └── favorites_tab.dart
       │       └── product_details_screen.dart
       ├── app.dart
       └── main.dart

ScreenShots 🖼️

Web

---

dark mode

---

Mobile

---

dark mode

---

Tablet

---

dark mode

---