SERCL is a commercial platform that serves millions of customers in the german market. It has been built by AKWAD developers on two cross-platform mobile clients using FLUTTER and a multi technology server side including PHP, Node JS, ...etc.
In this Capstone Project we added a good portion of SERCL staging code to help our potential developers prove themselves on an up and running product instead of the classical interview questions that target the online tutorials plain knowledge. It's a great opportunity to show an instant impact!
The capstone project consists of some modules and parts. Some you should build from scratch, Some you should detect and fix its bugs and some you should complete its missing pieces to work properly.Before working on this project you need to have your own copy on your Github account. Hence, You should fork it to your account then clone it to your local machine. Once it's up and running you can start working on your local version, commiting and pushing to your remote version. Once you're totally done you will send us the link of your repository.
Key notes about Git:
- Each module of the following should be worked out in a separate branch.
- All branches should be started out of the master branch
- Once a branch is done. It should be merged into the master branch
- Project final evaluation will be on the final version of the master branch. The other branches are important to evaluate your Git skills but won't be pulled or evaluated.
If your Git knowledge needs a refresher. Here's a 15 mins article that would thrive your skills: https://www.atlassian.com/git
In this module you should see a screen like this:
-
In project files tree. Navigate to lib/UI/LoginScreen.dart
-
[Scenario #1] We're mainly facing a navigation issue as the app doesn't go anywhere upon pressing the correspondant UI elements (e.i: Register Text should navigates to the Sign up screen on pressed) [BUG]
-
[Scenario #2] If we clicked on the Register text we are navigated to a different screen than Sign up. We need to fix this behavior [BUG]
-
[Scenario #3] We expect to login into the App once pressing on Login button. This functionality is missing in this screen dart file, please complete it. [MISSING]
-
In project files tree. Navigate to lib/UI/SignupScreen.dart
-
Implement the full UI design of the sign up screen according to what is visible in this screenshot [IMPLEMENTATION] :
-
Consider running this design on different sizes of devices. So avoid defining exact width or height to the components.
-
All clickable UI components should be compatible with its job. (e.i: Login text should navigate to Login screen & Create Account buttin should trigger the sign up process).
-
In project files tree. Navigate to lib/Widgets/BottomNavigationBar.dart
-
Implement the full UI design of the bottom navigation bar according to what is visible in this screenshot [IMPLEMENTATION] :
-
Bottom Navigation Bar should update the _setScreen() function located in lib/UI/SP_ParentScreen.dart with the correct selected screen.
-
[+BONUS] Use RxDart to setup the communication between the bottom navigation bar and _setScreen() function.
-
In project files tree. Navigate to lib/blocs/orders/orders_bloc.dart
-
Inside _getOrders() function we do query a certain Service Provider (SP) list of invitations. But the SP PODO doesn't contain a List of invitations field. Create the Invitation PODO class and generate its Invitation.g file then add it to the SP PODO class and regenerate the SP.g file. [MISSING]
-
The Invitation PODO fields should follow the GraphQL Documentation here: https://dev.sercl.de/graphql-playground
-
The Invitation class should implement the Parser<T> interface functions.
-
After parsing the list of invitations is succeeded you should consider assigning this list to the correct State ending up with adding this state instance into the stream sink to send it to the listening subscribers screens. [MISSING]
-
In project files tree. Navigate to lib/UI/Orders/InvitationOrderDetails.dart
-
Implement the full UI design of the Invitation Details screen according to what is visible in this screenshot [IMPLEMENTATION] :
-
Consider running this design on different sizes of devices. So avoid defining exact width or height to the components.
-
All clickable UI components should be compatible with its job. (e.i.: Play audio button should play the audio file fetched with the invitation data).
-
Clicking the image thumbnails should open any of them into full-screen mode.
-
Contact & Reject buttons are not necessarily to be clickables
-
In project files tree. Navigate to lib/UI/OnBoarding folder
-
In the previous folder navigate to Areas.dart file.
-
Implement the full UI design of the Areas screen according to what is visible in this screenshot [IMPLEMENTATION] :
-
Consider running this design on different sizes of devices. So avoid defining exact width or height to the components.
-
Consider add the proper validations to both From & To textfields as following:
-
Both fields should not be left empty.
-
Both fields should not contain any negative numeric values.
-
Both fields should not contain any non-numeric values.
-
From field numeric value cannot be larger than or equal To field numeric value.
-
In the OnBoarding folder navigate to Services.dart file.
-
Implement the full UI design of the Services screen according to what is visible in these screenshots [IMPLEMENTATION] :
-
Consider running this design on different sizes of devices. So avoid defining exact width or height to the components.
-
You should make use of the list of Categories and its Services which are fetched in the services bloc.
-
Consider validating the user selection by checking at least one service selection.
-
Consider setting the selected service chip color according its category.
-
Consider the change occurs in width and height due to select/de-select
-
[+BONUS] Consider add a size based animation to each category container so that its size change run smoothly.