N11 Intern Project Detailed Presentation

A presentation of intern project named N11 Clone App. Clone of N11 iOS mobile application.

1. N11 Intern Project
Clone App
Presentation
Hosted by Bunyamin Mete

2. INTRODUCTION
Overview of N11
Clone Application
The n11 Clone Application was developed with the goal of replicating and customizing the
functionality of the original n11 mobile app. This project was initiated during my
internship, with the aim of honing my mobile development skills and deepening my
understanding of modern architectures and development practices in iOS.
The application is built using the VIPER architecture to ensure modularity and
maintainability. Initially, development started with storyboards and .xib files, but later
transitioned to a fully programmatic UI approach to improve flexibility. While early
development involved working with local JSON data, it was later integrated with real-
time APIs. The project also includes Firebase for database management and other cloud
services.

3. THE LANDSCAPE OF UI DEVELOPMENT
UI Development: From
Storyboard and .xib to
Programmatic
As you can see on the left, I initially designed the
navigation for modules like Home and Category using
storyboards and .xib files. However, I later refactored
these into a fully programmatic approach. The images
displayed showcase the transition, including the code
that now programmatically handles the navigation.
By moving to programmatic UI development, I gained
more flexibility and control over customization, making it
easier to manage and adapt the UI dynamically. This
approach also provided me with significant experience in
both xib-based and programmatic UI development,
enhancing my skills in both methods.

4. THE LANDSCAPE OF NETWORKING
Working with JSON,
APIs and Firebase
Initially, I worked with local JSON files to simulate data
handling. Later, I connected the JSON structure to live
APIs, sending requests to specific endpoints to update
the app with real-time data. After retrieving the data
from the API, I used it to create the necessary collections
and structures in Firebase, ensuring seamless data
management and integration.

5. INTRODUCTION OF FOLDER STRUCTURE
Folder Structure of
N11 Clone Application
The project’s folder structure supports modular development
and VIPER architecture:
• Resources: Assets, localization, and other resources.
• Modules: Contains all application modules, each with:
- Entity: Data models
- Interactor: API Requests
- View: User interface
- Presenter: Business logic
- Builder: Component configuration
- Contracts: Communication protocols
On the left, you can see a diagram of the Modules folder
structure.

6. Detailed Overview of HomeModule
and Its Dynamic CollectionView
The HomeModule features a dynamic CollectionView with five
different cells and two reusable views registered. The cells and
views are configured based on the section types from the JSON
data received from the API. This setup allows sections in the
CollectionView to be created and displayed according to the
order and section information from the JSON.
Additionally, the project utilizes compositional layout to
enhance design usability and diffable data source to ensure
optimal performance of the CollectionView.

7. Screenshots of Compositional
Layout
This and next page provides a visual overview of the
CollectionView configuration in the HomeModule. It
includes:
•Compositional Layout: Visuals demonstrating the
compositional layout setup that organizes and
displays sections dynamically based on JSON data.

8. Section Enum and Section
Models Overview
On the following page, you’ll see:
• The Section Enum and its initialization method, which dynamically maps
string types to specific section cases. This enables flexible section creation
based on JSON data.
• Visuals of Section Models demonstrating their structure and how they are
used in the Presenter to configure sections according to the JSON format.
These elements together illustrate how the HomeModule dynamically
manages and displays content in the CollectionView, adapting to different
data structures and ensuring a responsive user interface.

11. Navigation Transition Animation
A custom navigation transition animation has been implemented for
product interactions. When a user taps on a product, the transition
between screens is smoothly animated, enhancing the overall user
experience. This animation has been thoroughly tested across all
devices to ensure consistent and accurate performance.
The animation is designed using targetFrame and originFrame to
determine the positions of the views during the transition. By
calculating these frames, the animation provides a seamless and
visually appealing transition effect, making the navigation
experience more engaging.

12. INTRODUCTION OF OTHER MODULES
Overview of Basket,
Favourites, and Order
Modules
The Basket, Favourites, and Order modules share a
similar structure and functionality:
•Firebase Integration: Each module interacts with
Firebase to manage data:
•Basket Module: Adds product information to the
basketProducts collection when a product is added
to the basket. When proceeding to checkout,
documents are pushed to the orderHistory
collection with nested documents to ensure unique
orders.
•Favourites Module: Saves product details to the
favouriteProducts collection when a product is
marked as a favorite. Provides functionality to
remove products from favorites as well.
•Order Module: Manages orders and stores order
history in the orderHistory collection with nested
documents for each unique order.
•UI Management: All three modules utilize
CollectionView Diffable Data Source and
Compositional Layout to streamline UI updates and
improve performance.

14. User Authentication Flow
• Non-modular Approach: The login, registration, and post-login
screens are not implemented with a specific architecture like VIPER.
Due to the complexity and amount of business logic involved, these
screens were coded without a modular structure to expedite
development.
• Firebase Authentication: Both login and registration functionalities
are managed using Firebase Authentication. User data is collected
during registration and stored in a Firebase collection, allowing access
to this data anywhere within the app when needed.
This streamlined approach ensures quick implementation while
providing a secure and flexible method for managing user accounts
and authentication.

15. INTRODUCTION OF OTHER MODULES
Address Management
for Logged-In Users
• Address List: Users can view all their saved
addresses under the “My Addresses” section. This
feature displays a list of previously added addresses
for easy access and management.
• Add New Address: By clicking the “Add New
Address” button, users can either manually enter
address details or use a map-based search. The map
feature allows users to search and select their
nearest location, which automatically populates the
address fields in the form.
• Firebase Integration: User address information is
fetched directly from Firebase with a single click,
ensuring that the latest data is always accessible and
up-to-date.
This functionality streamlines address management
and enhances user experience by integrating
convenient features like map search and seamless
data retrieval.

18. Summary and Key Points:
To summarize, we have successfully developed a modular application using the VIPER architecture,
integrating Firebase for authentication and data management, and utilizing advanced UI components such
as UICollectionViewDiffableDataSource and compositional layout. The project features dynamic sections,
smooth navigation transitions, and robust user management capabilities.
RESULTS AND BENEFİTS:
This project demonstrates effective
modular development, ensuring a scalable
and maintainable codebase. The use of
compositional layout and diffable data
source has significantly improved UI
performance and user experience.
FEEDBACK AND QUESTİONS:
I welcome any feedback or questions you
might have about the project. Please feel
free to reach out.

19. Conclusion
Thank you for your attention throughout this presentation.
I would like to express my gratitude to all my team members and especially to:
• Alaattin Usta
• Salih Karasuluoğlu
• Emircan Uzel
• Osman Yeşil
• Emircan Sağlam
Your support and collaboration were invaluable to the successful completion of this project.