1. Goal

Build a simple shopping app in Flutter that fetches product data from the Fake Store API and demonstrates:

• MVVM Architecture in Flutter (Model–View–ViewModel)

• High widget reusability and clean UI component design

• REST API integration

• JSON parsing and state handling

• Multi-screen navigation

This assignment focuses heavily on clean architecture and reusable widgets.

2. Data Source

Use the Fake Store API:

• Base URL: https://fakestoreapi.com

• Documentation:https://fakestoreapi.com/docs

• Login Endpoint: https://fakestoreapi.com/auth/login

• Test Credentials:

  • Username: mor_2314

  • Password: 83r5^_

Required endpoints:

• GET /products

• GET /products/{id}

3. Required App Features (3 Screens)

3.1 Product List Screen

• Fetch product list from /products.

• Display:

  • Image thumbnail

  • Shortened title

  • Price

  • Category

• Required behaviors:

  • Loading state

  • Error state + retry button

  • Navigate to detail screen

3.2 Product Detail Screen

Show:

• Large image

• Full title

• Description

• Price

• Category

• Rating (rate + count)

Include:

• Add to Cart button

• Show a confirmation (SnackBar, toast, etc.)

3.3 Cart Screen

• Display added items with:

  • Title

  • Price

  • Quantity

  • Subtotal

• Features:

  • Increase/decrease quantity

  • Remove item

  • Show total price

Cart state may be in-memory only.

4. Architectural Requirements (IMPORTANT)

This assignment specifically tests your ability to design scalable Flutter apps.

🔥 You MUST use MVVM architecture

Your project must include:

Models (M)

• Classes representing API objects (e.g., Product).

• Mapping JSON → Dart.

ViewModels (VM)

Each screen should have its own ViewModel, responsible for:

• Data fetching

• Business logic

• Managing screen states (loading, error, success)

• Exposing streams/ChangeNotifiers/state classes to the UI

You may use:

• ChangeNotifier

• Provider

• Riverpod

• or another MVVM-friendly state management solution

But you must follow MVVM separation.

Views (V)

• UI screens should not contain business logic.

• Views must only render data exposed by the ViewModel.

5. Reusable Widgets (MANDATORY)

Your app must include at least 3 reusable Flutter widgets such as:

• ProductCard

  • used in product list

• QuantitySelector

  • used in cart

• PrimaryButton / AppButton

  • used across screens

• RatingBadge

• NetworkImageWidget with error placeholder

Guidelines:

• Widgets must be parameterized, not copy-pasted.

• Widgets must be reusable across multiple screens.

• Widgets must be placed in a widgets/ folder.

Your UI will be evaluated based on reusability and modularity.

6. Technical Requirements

• Flutter 3+, null safety

• Folder structure reflecting MVVM:

   

  lib/ models/ services/ viewmodels/ views/ widgets/

• Use http package for network calls

• Navigation via Navigator or go_router

• Handle:

  • loading state

  • error state

  • empty state (if needed)

7. What to Submit

Students must submit:

1. GitHub repository URL

2. With A README.md including:

   • App description

   • MVVM explanation (how you applied it)

   • List of reusable widgets

   • How to run the code

   • Screenshots (optional)

8. Grading Criteria (Updated)

Architecture Quality — 35%

• Proper MVVM separation

• Clear folder structure

• Clean ViewModels

Reusable Widgets — 25%

• Properly parameterized

• Used across screens

• No duplicated UI code

API Integration & Models — 20%

• Fetching, mapping, error handling

UI & UX — 10%

• Clean layout, readable, consistent

Documentation — 10%

• Clear README

• Architecture explanation