- 1. Overview
- 2. UI structure
- 3. Compilation as a mobile APP
- 4. How to use this repository
- 5. Some technology details
- 6. Test
- 7. License
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.
Flutter
This frontend UI supports the following features:
- Sign in
By clicking on the text button red-circled in the screenshot, you will be directed to the sign-up page.
- Sign up
- Post browsing
- Filtering
- Uploading
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.
- Sign in
By clicking on the text button red-circled in the screenshot, you will be directed to the sign-up page.
- Sign up
- Post browsing
- Filtering
- Uploading
- About
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
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.
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
})
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.
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
MIT