🌦️ Weather App

A demo project built with Flutter, showcasing a clean and modular architecture for scalable development.

---

🎯 Project Objectives

• 🧱 Use MVVM architecture with MobX
• 📦 Organize code in modules
• 🎨 Share styles and themes across modules
• 🔌 Create an extensible HTTP layer
• 🧪 Support full test coverage
• 🧠 Implement Command pattern with MobX (CommandX)
• 🔁 Apply Result pattern for better error handling

---

📁 Module Structure

Below is the folder structure for module_example, based on the latest design:

lib/
└── module_example/
    ├── controllers/              # Modular controllers (e.g. AuthController)
    ├── models/                   # Domain models
    ├── pages/
    │   └── component/
    │       ├── controller/       # ViewModel (MobX)
    │       ├── widgets/          # Widgets for this component
    │       ├── component.dart    # UI/component logic
    │       └── component_2.dart  # Additional UI/component logic
    ├── services/                 # Business logic and API integration
    └── module_example.dart       # Module class for injection and routing

✅ Tip: Each page/component folder encapsulates its own logic, making it easier to scale and maintain features.

---

🧱 Architecture

Pattern: MVVM + Modular

Layer	Responsibility
Model	Data structure & parsing
View	UI widgets
ViewModel	Logic + state (MobX Store)
Service	Business logic / API access
Controller	shared app-level logic

---

⚙️ Stack

Feature	Library
Navigation / DI	flutter_modular
State Management	mobx, flutter_mobx
Styling	ThemeData, AppColors, custom styles
HTTP Layer	http
Async Commands	CommandX
Result Handling	Result (Ok/Failure)
Testing	mocktail, flutter_test

---

🧭 Pages

• 🔐 LoginPage
• 📝 RegisterPage
• 📊 SummaryPage
• 📅 WeatherDayPage

---

🧪 Test Strategy

• ✅ Unit Tests: ViewModel, Service, Repository
• ✅ Widget Tests: Custom widgets & screens
• ✅ Mock Tests: API mocking using mocktail
• ✅ Result & Command tests

---

🎨 Style System

Your app uses a central style system organized like so:

lib/
└── style/
    ├── Color/
    │   ├── app_color.dart
    │   └── theme_color.dart
    ├── Text/
    │   ├── text_style.dart
    │   └── app_style_text.dart
    ├── Theme/
    │   ├── theme.dart
    │   ├── theme_controller.dart
    │   └── decoration/
    │       ├── appbar_theme.dart
    │       ├── filled_button.dart
    │       ├── input_decoration_theme.dart
    │       └── ...

---

🧱 Shared Layer

lib/
└── shared/
    ├── utils/
    │   ├── date_utils.dart
    │   ├── form_validators.dart
    │   ├── command_x.dart
    │   └── result.dart
    ├── widgets/
    │   ├── image_widget.dart
    │   └── filled_button_widget.dart

---

✅ Tasks Overview

🔧 Style & Theme

• Dark / Light mode
• Global AppColor and TextStyle
• Modular ThemeData

🧱 Architecture

• MVVM with MobX
• Modular routing and DI
• Result pattern for error handling

📦 Pages & Components

• Login / Register / Summary / WeatherDay

🔍 Tests

• Widget & unit tests (ViewModel, Commands, Services)
• MobX state tests

---

📅 Roadmap

• Implement module architecture
• Finalize base UI components
• Improve coverage in testing
• CI/CD integration

---

🧠 Final Note

This app is a real-world example of how to apply scalable and testable architecture in Flutter, using the best of the community practices.