TRINITY

MULTI-DEV
TRINITY
This project is composed of three distinct parts: dev Ops, dev Web and dev App.
The timing of deliveries and presentations has already been fixed.

You won’t be assessed on a part that should have already been delivered.
Respect the deadlines if you want to be fairly evaluated.

To boost competitiveness, a grocery chain needs your dev skills to achieve several goals:

✓ They want to improve the customers’ user experience, simplify their purchasing process,
and enhance their satisfaction. To achieve this, you are tasked with developing an inte-
grated and intuitive mobile application.

✓ Internally, they aim to optimize product management, streamline the supervision of sales,
and facilitate decision-making through the visualization of key performance indicators. You
are therefore assigned to implement a web application connected to a RESTful API.

1
Trinity - Part 1: Dev OPS

Since you are the sharpest tool in the box, you take the excellent initiative of implementing the
DevOps methodology early before the two development phases.

Doing so, you will be more agile, reduce your delivery cycles through automations that accelerate
development and deployment.

Before starting to develop you website and mobile application, it’s important to start considering
which technologies to use and how to structure the project.

Once you defined them, next step is to implement some good DevOps practices. Set up your
environments is crucial, because it directly impacts both of the following parts of your project.

To facilitate code management and CI/CD implementation, you have access to directories
on a GitLab server, available here.

2
 Pipeline

Your team is responsible for designing and implementing a pipeline. The goal is to ensure con-
tinuous and automated delivery while maintaining code quality through integrated testing.

There should be two tasks for a human being to perform to deploy software:
to pick the version and environment and to press the deploy button.

— David FARLEY - Continuous delivery —

Here are the steps to follow:

✓ Design and plan CI/CD on GitLab:

– the team must design a complete CI/CD pipeline for the project ;
– this design must be based on your preliminary study and your technologies ;
– you have to build a sample of your future application.
✓ Set up the CI/CD pipeline:
– dockerize your sample for two different environments: dev and prod ;
– set up an automated deployment process for the different parts of the project ;
– integrate unit tests into the pipeline to ensure continuous code quality ;
– automate processes to ensure continuous delivery without manual intervention.
✓ Install GitLab Runners:
– install and configure GitLab runners on a virtual machine ;
– connect the runners to the GitLab server to enable CI/CD pipeline execution.

Security should NOT be overlooked, no password will be visible / readable in your git repos-
itory (nor in its commit history!).

You can run the GitLab runners in a virtual machine.

Keep you virtual machines lightweight: no need for window manager, GUI, Plesk, . . .
Think about zero downtime deployment.

3
 Dev OPS delivery and review

During this fist review, you have to present (and justify!):

✓ a brief rationale for technology choices and alignment with project goals and constraints;
✓ an overview of the project structure, directories layout and environments setup ;
✓ your pipeline design, outlining each stages (build, test, deploy, . . . ) ;
✓ the security measures you applied to ensure no sensitive data is compromised ;
✓ a proof of runners connection to the GitLab server and an execution of a simple test ;
✓ a demonstration of your automated pipeline in action, showcasing the unit tests, deploy-
ment steps, and any zero-downtime deployment processes.

You are expected to deliver:

✓ two Dockerfiles of images containerizing the app, for both dev and prod environments ;

✓ some .gitlab-ci.yml file(s) defining all steps of a complete CI/CD pipeline:

– the initial deployment test validates correct operation in each environment,
– the pipeline is operational for each commit, with clear logs for each stage,
– the integration of unit tests, with visible and interpretable results,
– the deployment without manual intervention in the final phase.

✓ some Gitlab runners installed and configured on a virtual machine, that connect to the
GitLab server ;

✓ some documentation file(s) covering:

– your project’s technologies and architecture ;
– the differences between development and production configurations ;
– a comprehensive diagram of the CI/CD pipeline architecture that covers and explain
all aspects of CI/CD flow (triggers, tests, build, deployment, . . . ) ;
– the instructions to install and configure the GitLab runners.

4
Trinity - Part 2: Dev WEB

To improve stock and sales managements, optimize in-store operations, and enhance decision-
making for managers, you need to develop a web application, with an associated API.

Mainly, your technical allows the managers of a store to:

✓ efficiently track products available in stock ;

✓ easily manage customers and sales ;

✓ astutely visualize key performance indicators.

5
 API

The Application Programming Interface must be RESTful.

Each API request must be secured with a JWT token.

The API endpoints are provided in the specification section below.

The user’s content allows recording some information about a customer, such as:

✓ first name,
✓ last name,
✓ phone number,
✓ billing details (address, zip code, city, country).

The product’s content allows recording some information about a product, including at least:

✓ name,
✓ price,
✓ brand,
✓ picture,
✓ category,
✓ nutritional information,
✓ available quantity in stock.

This list is non-exhaustive: you can add as many fields as you like, keeping in mind the
size of your screen and ensuring a clear display for the user.

Be aware that, in a near future, you’ll have to develop a mobile component, with a payment
system via PayPal. Therefore, you should consider the PayPal API from now on, in order to set up
callback URLs to keep payment information up to date.

6
 Back office

Except the restrictions below, you are free to use any other tool and any language you fancy
(nodeJS, python, java, . . . ). Be aware that you’ll be asked to expose and justify your choices.

You are NOT allowed to use some tools that does everything for you, such as:
✓ API Platform, Strapi or any other framework generating automatically your API ;
✓ ReactAdmin or any other framework building automatically your back office.

Your product stock management:

✓ allows for the creation, reading, updating, and deletion of products in stock ;
✓ is integrated with the Open Food Facts API to automate product’s information update ;
✓ provides some advanced search and filtering features to facilitate product management.

You have to fetch the products directly from the Open Food Facts API.

Your user management:

✓ allows for the creation, reading, updating, and deletion of user(s) ;

✓ enables viewing of user purchases, including payment history.

Your report management implements at least 5 key performance indicators.

You have to define (and justify!) your KPIs criteria. For instances: the average purchase in
the last X hours, the most purchased products, the median of customers’ payments, . . .

Here is an example of the database schematization, to store the different elements:

This is an example; you can follow it or do anything else that seems relevant.
You’ll have to expose and justify your choices regarding your database implementation.

7
 Front office

You are free to:

✓ use any tool you fancy (React|Angular|Vue, Figma|Sketch, Sass|Less|Stylus . . . ) ;

✓ design your front as you like (elements, fonts, colors, proportions, ux, ui, . . . ).

Be aware that you’ll be asked to expose and justify your choices.

Be creative but do not neglect user’s experience. Distinguish the good, the bad, and the ugly!

Dev WEB specifications

Implement, at least, the following routes and endpoints

✓ Users:
– GET /users retrieves the users.
– POST /users adds a user.
– PUT /users/{id} updates a user.
– DELETE /users/{id} deletes a user.
✓ Invoices:
– GET /invoices retrieves the invoices.
– POST /invoices adds an invoice.
– PUT /invoices/{id} updates an invoice.
– DELETE /invoices/{id} deletes an invoice.
✓ Products:
– GET /products retrieves the products.
– POST /products adds a product.
– PUT /products/{id} updates a product.
– DELETE /products/{id} deletes a product.
✓ Reports:
– GET /reports generates reports on sales and performance.

8
Overcome the following technical challenges

✓ Data security:
– secure communications between the web app, the API, and the external services ;
– session management must be protected against CSRF and XSS attacks.

✓ Open Food Facts API integration:

– set up requests to automatically retrieve and update product information ;
– handle errors if data from the Open Food Facts API is incomplete or unavailable.

✓ Code architecture:
– adopt a modular architecture to allow better maintainability and scalability ;
– use design patterns (such as Model-View-ViewModel or Model-View-Presenter) to sep-
arate concerns and facilitate unit testing ;
– implement reusable services and components to optimize development ;
– document the code architecture and data flows to ease onboarding for new developers
and collaboration between teams.

✓ Testing:
– write unit tests for all critical features of the application to ensure their proper func-
tionality. A minimum of 20% coverage is expected ;
– use testing frameworks like Jest for the frontend and Mocha/Chai for the backend ;
– automate the execution of unit tests as part of the CI pipeline to quickly detect regres-
sions.

9
 Dev WEB delivery and review

During this second review, you are to present and justify:

✓ your API ;
✓ your back office ;
✓ your front office.

You are expected to deliver:

✓ The source code of your WEB application.

✓ The technical documentation for:
– its architecture and its components ;
– your technological choices ;
– the data flows describing how data moves within the application.
✓ Some UML diagrams, including:
– a class diagram showing data structures and their relationships ;
– an activity diagram, illustrating different workflows and business processes.
✓ The unit tests report, which should be directly visible in the CI/CD pipeline.

10
Trinity - Part 3: Dev APP

You’re finally tasked to develop an intuitive mobile application that streamlines the purchasing
process for end customers, improve their experience and enhance their satisfaction.

This application not only allows users to scan products and manage shopping carts, but also to
access detailed product information and complete payments directly from their mobile devices.

The main features of this mobile app will include, at least:

✓ a login screen ;
✓ a home page ;
✓ a scanner ;
✓ product display ;
✓ cart management ;
✓ a payment procedure ;
✓ purchase history.

You can use any tool or language you fancy (java, kotlin, swift, swiftUI, react-native, flutter, . . . ).
Be aware that you’ll be asked to expose and justify your choices.

11
 Dev APP specifications

Main features

✓ Login screen:
– allow users to log in via email and password ;
– provide the option to sign up and create an account ;
– implement a secure login process.

✓ Home page:
– present an overview of the application with an attractive and intuitive design ;
– display clear navigation buttons to quickly access main features:
* scan a product,
* view the cart,
* access purchase history,
* manage the account ;
– include promotional sections or product recommendations based on the user’s pur-
chase history ;
– show notifications or important messages (e.g., current promotions).

✓ Scanner:
– use the smartphone’s camera to scan the products’ bar codes ;
– handle scan errors (e.g., unreadable bar codes, products not found) and provide appro-
priate feedback to users.

✓ Product display:
– allow users to add products to the cart after scanning them ;
– display detailed information of scanned products, including at least:
* name,
* picture,
* brand,
* category,
* nutritional information,
* price,
* available quantity in stock.

This list is non-exhaustive: you can add as many fields as you like, keeping in mind the
size of your screen and ensuring a clear display for the user.

12
✓ Cart management:
– display the contents of the cart with the ability to modify quantities or remove items ;
– calculate and display the total purchases in real-time.

✓ Proceed to payment:
– allow users to enter billing information via a form:
* first name,
* last name,
* address,
* zip code,
* city ;
– mandatory integration of the PayPal API to enable secure payment for purchases

✓ Purchase history:
– display the user’s previous purchase history with transaction details.

13
Technical challenges

✓ Camera usage:
– camera access permissions are secure and respectful, adhering to user privacy ;
– ensure a smooth and latency-free UX by optimizing the app performance ;
– process images in real-time to quickly decode bar codes, even in low-light conditions.
✓ Transaction security:
– ensure secure communication between the app and the payment services, via HTTPS
and robust encryption protocols ;
– implement verification and fraud protection mechanisms for financial transactions (e.g.,
transaction callback for payment verification).
✓ API integration:
– use the internal API to manage user data, products, and transactions ;
– implement secure requests using JWT to authenticate and authorize users ;
– use caching mechanisms to reduce redundant API calls and improve performance.
✓ User experience and user Interface:
– design an intuitive and friendly interface to ease the use of your application ;
– follow UX/UI best practices to create a smooth and frictionless experience ;
– conduct user testing to identify and address usability issues ;
– use attractive visuals and animations to enhance interaction with your application.
✓ Code architecture:
– adopt a modular architecture to allow for better maintainability and scalability ;
– use design patterns like MVVM or MVP to separate concerns and facilitate testing ;
– implement reusable services and components to optimize development ;
– document the code architecture and data flows to ease onboarding for new developers
and enhance team collaboration.
✓ Testing:
– write some unit tests for all critical application features, to ensure their proper func-
tionality and guarantee at least 20% of code coverage ;
– automate the unit tests as part of the CI pipeline to quickly detect regressions ;
– use testing frameworks (JUnit for Java/Kotlin or XCTest for Swift).

14
 Dev APP delivery and keynote

During the final keynote, you are expected to:

✓ present the whole project and sum up the 3 parts ;

✓ present and justify your mobile application ;

✓ demonstrate, on a smartphone (android or iOS), its proper functioning, including the links
with the APIs (yours and the one from PayPal) ;

✓ identify the challenges encountered and overcome ;

✓ present the potential areas for further improvement.

A demonstration via an emulator or web will NOT be accepted.

For this specific part, you are expected to deliver:

✓ The source code of your mobile application.

✓ The technical documentation for:

– its architecture and its components ;
– your technological choices ;
– the data flows describing how data moves within the application.

✓ Some UML diagrams, including:

– a class diagram showing data structures and their relationships ;
– an activity diagram, illustrating different workflows and business processes.

✓ The unit tests report, which should be directly visible in the CI/CD pipeline.

15
Bonuses

Once you finished the mandatory parts, add some optional features to your project, such as:

✓ ensure log persistence even after containers restart ;

✓ implement a load balancer ;

✓ perform some monitoring on your CI/CD pipeline ;

✓ add a feature to export purchase receipts in PDF format for easy storage ;

✓ provide an option to send purchase receipts via email directly from the application ;

✓ add other payment options, such as the local currency for your region ;

✓ implement a guided tour of your web or mobile application ;

✓ make the report customizable, with awesome dataviz for your KPIs ;

✓ include modes to improve the accessibility of your interfaces (web and/or mobile) ;

16
v 0.2