• 1. Overview
  • 1.1. Technology Stack
• 2. UI structure
• 3. Compilation as a mobile APP
• 4. How to use this repository
• 5. Some technology details
  • 5.1. State management
  • 5.2. Pagination
  • 5.3. Decoupling of UI and the business logic further
• 6. Test
• 7. License

1. Overview

This repository is developed for the technical assessment of a job interview, and itself is the frontend part of this project. One instance of this repository has been deployed at https://instapic.club/.

The backend of this repository could be found at another repository.

1.1. Technology Stack

Flutter

2. UI structure

This frontend UI supports the following features:

1. Sign in

By clicking on the text button red-circled in the screenshot, you will be directed to the sign-up page.

2. Sign up

3. Post browsing

4. Filtering

5. Uploading

3. Compilation as a mobile APP

Flutter is cross-platform framework, so with the exactly same codebase, we can compile it into a mobile app of

• either Android version by running:

  flutter build apk

• or iOS version by running:

  flutter build ios

Considering the limited budget of time and energy for this project, I did not improve the UI to make the build output more mobile-friendly, neither did I publish the mobile app at Google Play or App Store. But if you do want to try the mobile app of this project, you could download the apk file directly with this link.

I also made some screenshots of the mobile app for your reference.

1. Sign in

By clicking on the text button red-circled in the screenshot, you will be directed to the sign-up page.

2. Sign up

3. Post browsing

4. Filtering

5. Uploading

6. About

4. How to use this repository

STEP 1: Install Flutter and clone this repository

STEP 2: Tweak the lib/misc/config.dart to suit your case

STEP 3: Build the web application with the following command:

> flutter build web

STEP 4: Copy all the content of the build output folder build/web to the document root of the deployed web server.

STEP 5: Remember to deploy the restful backend as well, for this project to work normally.

STEP 6: Surf the web

5. Some technology details

5.1. State management

In the frontend system, different UI pages need to access to different states. In this repository, the redux package and flutter_redux package are used for the state management.

5.2. Pagination

The constructor builder of ListView widget is applied for lazily loading and displaying small chunks of pictures. The default page size for each post fetching could be set with variable PAGE_SIZE of class Config in /lib/misc/config.dart.

ListView.builder({
    ScrollController? controller,
    required IndexedWidgetBuilder itemBuilder,
    int? itemCount
  })

5.3. Decoupling of UI and the business logic further

This project applies Redux for the state management, so most business logics are separated from the UI. However, few business logics which are not related to AppState but needs to update UI should be carefully treated, so that this few business states are more testable.

For example, when the middleware processes ActionPromptError, the logic here should update the UI to prompt the user that some errors are happening. In this case the unit test cannot be carried on for the logic only, as UI is involved. To decouple the logic and the UI, StreamController is used by creating an async call for the UI update. If no listener is registered for this Stream, then the UI will not update, even if the logic enqueues an error prompting event. In this case, we could test the logic separatedly and gracefully.

6. Test

Run the following command to start testing:

    flutter test

or if you want to run a single test, try:

    flutter test test/{unit_test}.dart

7. License

MIT