Internship Report

Web application development

01/04/2023 AU 30/07/2023

Biris Technologie
Auteur : Ronaldo ADIKPETO
Table des matières

ACKNOWLEDGEMENTS
Before starting, I’d like to thank some people without whom the writing of this report
would be incomplete or impossible. I would especially like to thank:

- My training supervisor Mr. Ibrahim DJIBRILA for his advice, the sharing of his
professional and sometimes personal experiences, the transmission of the
different working methods he uses as well as the exceptional pedagogy he has
shown,

- Mr Ibrahim DJIBRILA, Project manager of the company who gave me this opportunity to
acquire new knowledge and skills and who knew how to guide me throughout this
internship.

- Ms. Anaëlle BRETÉCHÉ for all the skills she helped me to acquire through the
projects of the module “Professional Writing” realized under her supervision,

- Ms. Marie des neiges KISOKA, the “Personal Development” coach at EPITECH who has
been an essential support during this somewhat difficult year,

- Mr. Lawal ALAO who is in charge of the EPITECH third year students for its unique
entrepreneurial vision and its great support during the EPITECH Innovative Project
(EIP),

2
 - Mr. Ouanilo MEDEGAN, Mr. Emmanuel SOLOMO and all EPITECH staff for their
personal and their technical support during the past three years,

- All the members of Biris Technologie for all the advice they gave me during these four (04)
months of internship.

Introduction
As part of my studies at EPITECH Benin, I had the opportunity to do my internship with the
company Biris Technologie from 01 April 2023 to 30 July 2023. During this internship, I was
interested in the use of several computer tools and languages. Indeed, this internship was an
opportunity for me to understand the different steps that allow to develop a web application.
Thanks to this internship, I worked mainly on a project that gave me a into the profession of web
application developer. The main source of this report is the various lessons learned from the daily
practice of the tasks I was assigned.

Also, the many discussions I had with the employees of the various departments of the company
allowed me to give coherence to this report. In order to give an accurate and detailed account of
the four (04) months spent in Biris Technologie, it seems logical to first present the company itself
and its sector of activity, in a second time Biris Technology in its structure and operation,
highlighting the department that welcomed me, the various missions I had to perform in the
company as well as the difficulties encountered during the internship, the suggestions made and
finally reiterate my desire to work on a certain project that is particularly important to me.

ABOUT SECTION

• Student
My name is Ronaldo ADIKPETO. I'm a student in tek3 at EPITECH Benin. I am in
the class of 2025. During my schooling, I really appreciated the technical parts and I'm extremely
motivated to constantly develop my skills and envolve professionally,. So, I

3
decided to do an internship in web, or backend application development.

Mail: [email protected]
Github: pinhero
Social Networks:
- LinkedIn : https://www.linkedin.com/in/ronaldo-adikpeto-5a02b8204/

• School
EPITECH is a school of IT expertise and its first campus in Africa is in the Benin Republic. It hosts
several programs such as the Coding Academy and the Grande Ecole Program (PGE). The
programs are based on a project-based pedagogy which allows students to be actors of their
training and especially to orient themselves towards the profession of their choice.

Location: Boulevard Saint Michel, Cotonou, Orange building with green windows
Website: https://epitech.bj

• Company
The host company is called Biris Technologie. Hfgkjlmf&khj

Supervisor: Ibrahim DJIBRILA

INTERNSHIP PART I

This report is divided into two main parts. In this first part of the report, i will explain everything
about all the project i have been worked on, all the project i have been assigned as well as
everything to know about the organization but also about the architecture about the general

4
architecture and the difficulties encountered to help any newcomer to continue with all the
project i have been working on and bring it to end.

ACRONYMS
To a better comprehension i will list all acronyms i will use in this report and their meaning. We
have:

API: Application Programming Interface

CEO: Chief Executive Officer

CSS: Cascading Style Sheets

HTML: HyperText Markup Language

JS: Java Script

ORM: Object-Relatonal Mapping

IT: Information Technology

DNS: Domain Name Service

Glossary of web development terms

Here is a list of commonly used tech terms in web development with brief descriptions to help
better understand web development terminology:

Web developer

A web developer’s job is to create websites. While their primary role is to ensure the website is
visually appealing and easy to navigate. Web developers are usually in one of three categories:
backend developers, front-end developers and full-stack developers.

Back-end web developers

5
Back-end web developers create the website’s structure, write code, and verify the code works.
Their responsibilities also may include managing access points for others who need to manage a
website’s content.

Front-end web developers

Front-end web developers work on the visual part of the website—the pages visitors see and
interact with (also known as the user interface). They design the physical layout of each page,
integrate graphics, and use HTML and JavaScript to enhance the site.

Full-stack developers

Full-stack developers do the work of both a back-end and front-end developer. These developers
have the knowledge to build a complete website and may work for organizations that don’t have
the budget for a large website team.

API (Application Programming Interface)

API is an interface implemented by an application for other applications to communicate with and
use its resources. For example: you use Google Maps API to implement a version of Google Maps
on your website.

CSS (Cascading Style Sheets)

This code that tells the browser how to display your website. This includes global styles for fonts,
colors, images, menus, etc.

Domain Name
Domain Name is a unique name that identifies a website. Each website has a domain name that is
used to access the website. For example: www.designbrooklyn.com.

Note: Domain names actually translates to IP addresses by DNS when a website is requested.

DNS (Domain Name Service)

Websites are located by their IP address rather than domain names - which they are commonly
remembered as. DNS helps to translate domain names to IP addresses when requesting a website.

6
E-Commerce (Electronic Commerce)

E-Commerce is a rapidly growing industry of business transactions conducted over the Internet
with potential to incorporate other technologies such as mobile devices, social media platforms
and automated data collection systems.

Framework

A framework is defined as “a package made up of a structure of files and folders of standardized

code (HTML, CSS, JS documents etc.).” This is a technical way of saying a set of software tools that
helps people build websites easier.

(Examples: Bootstrap, Skeleton, Tailwind etc...)

IP Address (commonly referred to as an IP)

IP is an address that identifies a computer on the Internet. IP addresses consist of four groups of
numbers separated by three dots. For example: 216.22.48.225.

Registrar

Your registrar is the company used to register a domain. (Examples: GoDaddy, Network Solutions,
etc).

Responsive Design

Responsive design is a website that should respond to the user’s behavior and environment based
on screen size. This is done automatically by using breakpoints/media queries in the CSS file.

UI (User Interface)

UI is a means to control the interaction between user and computer with a

textual/graphical/auditory interface.

7
UX (User Experience or User Experience Design)

UX is an element of design that includes and addresses all aspects of a user's interaction with a
product or service.

Wireframe

A wireframe is visual guide used to show the structure of a web page without any design
elements. It typically comes into play during a website redesign or page design.

8
 References
NB: Every date in the reference will be considered as for the current year, 2023.

[1] Glossary of web development terms (https://www.designbrooklyn.com/resources/help-

center/Website-Planning/Glossary-of-25-commonly-used-tech-terms-in-web-development.html)

[2] Web developer (https://www.coursera.org/articles/web-developer)

I- BIRIS TECHNOLOGIE
1- About the company
Biris technologie is a company based in UK (United Kingdom) that provides Information
Technology services, including sofware development solutions, Information Technology consulting
services and cloud solutions.

2- The overall company structure

Biris technologie is divided into several departments in order to organize and optimize rendering.
Here are the main Biris Technologie departments and their roles:

General management

This department is responsible for the corporate strategy, of decisions key financial and financial
overall supervision of the company.

Business development

This department is responsible for the search for new customers, from the management of
relations with the existing customers and of the sale of products and services.

Product development

This department is responsible for the creation and of the development of products, including the
research, the design, the development, the tests and the marketing.

9
customer service

This department is responsible for the provision of a technical support and of a customer service
exceptional for the customers of the company.

Marketing

This department is responsible for the promotion of the company and its products and services
through channels varied marketing such as the media social, advertising, the events.

Research and Development

This department is responsible for the research and development of new technologies and
innovation within the company.

3- Job and missions

As a web developer at biris technoligie, my tasks varied depending on the situation but generally,
my daily tasks were:

- Designing user interfaces and navigation menus

- Writing and reviewing code for sites, typically HTML, or JavaScript
- Integrating multimedia content onto a site
- Testing web applications
- Troubleshooting problems with performance or user experience
- Collaborating with designers, developers.

As a web developer, here are some of the skills I've focused on to ensure the success of my
assignments.

Technical skills
- Coding : Common programming languages include HTML, PHP, CSS, and JavaScript for
front-end design and JavaScript for back-end development.
- Responsive design : i should be able to create sites that look as good on smartphones and
tablets as they do on computer screens.
- Technical SEO : Many factors of website design can affect the site’s search engine ranking.
Understanding how search engines rank sites is useful in a developer’s work.
- Version control : This lets you track and control changes to the source code without
starting over from the beginning each time you run into a problem.
- Visual design : Understanding basic design principles, such as how to use white space,
choose fonts, and incorporate images could boost your marketability.

10
Workplace skills
- Communication : As a web developers, i spend time discussing design ideas with their
clients and team members through each step of the project.
- Customer service : A web developer creates websites for the client to use and should
remain client-focused to achieve the best results.
- Detail-oriented: Little details, like a small change in code, can make a big difference in how
a website performs.
- Organization: Keeping track of deadlines, project tasks, workflow, and budgets is helpful if
you want to complete a website design on time. For that it has several tools that helped
me such as Trello, Jira, Google Calendar etc...
- Problem-solving: Web developers often run into issues when designing websites. They
should have the patience and ability to identify problems in the design or coding and solve
them in a methodical way.

11
4- The projet
One of Biris technology's main projects is Sleyhost. Sleyhost is a project designed to facilitate the
creation of online stores. It focuses on three main points:

- Create, launch, manage a secure store

- Domain name 1 year & free SSL certificate

- Servers and support in France 7/7

Sleyhost project is divided into 2 main parts:

- Sleyhost’s Front-end:

Image figma sleyhost

In this part, the goal was to realize a market and follow it. So I realized the pages of our site using
figma. I then had the result validated by my supervisor who made changes and gave me the green
light to start the front-end of the site.

Image sleyhost

- Sleyhost’s Back-end:

In this part, my goal was to check if the domain name entered by the user already exists. If yes ask
the user for another name, otherwise start the procedure to purchase the domain name using the
Godaddy API.

Image

II- Product development

1- Introduction
There are different teams in the company. The team that is assigned to you is the product
development team. There are a lot of tools that you will use to deliver the work as you should.
You will also report your progress daily. You can also get help from the team. Depending on the

12
program you choose, the experience may be different. So, all the conversations are made over
mail and sometimes in the whatapps group.

Within this team, each new project takes place in 4 main stages :

Contact

Face-to-face meeting if possible or meet online with clients or collaborators to discuss about the
project.

Organization and sharing

Use of organizational tools to organize and share tasks with team members.

Work and follow-up

Project implementation with follow-up of each member’s work and regular meetings to optimize
rendering.

Aditional delivery and services

Project rendering and additional maintenance and/or documentation.

2- Developer Tools

a- Git
Git is a tool used for source code management. It is a free and open-source version control system
used to handle small to very large projects efficiently. It will allow you to track your files. Once you
start your craftsmanship, you will receive a GitHub repository where you will deliver your work
daily.
So, here is the scenario used before Git:
- Developers used to submit their codes to the central server without having copies
of their own.
- Any changes made to the source code were unknown to the other developers.
- There was no communication between any of the developers.
Now, let’s look at the scenario after git:
- Every developer has an entire copy of the code on their local systems.
- Any changes made to the source copy can be tracked by others.
- There is regular communication between the developers.
Here is a summary of data movement for different git commands:

13
Figure1: Common Git Commands.

b- GitHub
We can't talk about git without GitHub. GitHub is the most used tool to manage code
bases called repositories.
There is a set of features on GitHub to better manage its code:
- Commit: Commits represent different states of the set of files in the repository. There
is a set of conventions that can also be followed when writing commit messages.
Depending on the reason for the commit, you can use a feature, fix, refactor, hotfix, or
testcases followed by a description of the commit.
- Branches: As for branches, they are made to better manage the code base and thus
have several versions of the same code. When you want to add a feature, you can just
create a branch and add it. Several rules also come into play to manage the branches.
For each branch created, it must follow a given pattern:
o feature/xxxxx
o fix/xxxxx
o hotfix/xxxxx
o improvement/xxxxx
o refactor/xxxxx
Where xxxxx represents the name of the functionality you developed. The main branch is called
main and represents the official state of the code. The staging branch represents the state of the
code in the staging environment. The production branch is called release and represents the state
of the code in production. In many companies where products are delivered to a repository, there
are protected branches. Ultimately, you can't just push code to these branches without
permission. For example, the main branch (or release, depending on the company) is chosen to be
the protected branch. The main branch is intended to merge onto the staging branch when you
want to test the code and onto the release branch when you want to put the latest official version
of the code into production. Here are the rules to follow:
- A project must always be initialized with the main branch as the main branch (default

14
branch).
- You should never push a new code change directly to the staging or release branch.
- You should avoid pushing new code changes to the main unless you have explicit
permission.
The last function is the pull request. It is used to transfer code from one branch to
another branch. There are also a few practices to quickly validate a merge request:
- The branch you want to merge must be up to date with the main branch.
- The branch must focus on one and only one feature...
During the merge, you may face some conflicts and you must resolve them before
proceeding with the merge.

3- Technology Stack
a- Programming Language

Figure2: JavaScript logo

JavaScript is a script programming language mainly used in interactive web pages and as such is an
essential part of web applications. With HTML and CSS languages, JavaScript is at the heart of the
languages used by web3 developers. A large majority of websites use it,4 and most web browsers
have a JavaScript5 engine to interpret it.JavaScript is also used for Web6 servers with the use (for
example) of Node.js.
JavaScript is a programming language used by developers to design interactive websites.
JavaScript functions can improve the user experience of a website, from updating social media
feeds to displaying animations and interactive maps. As a client-side scripting language, it is one of
the main web technologies. When browsing the Internet, you can, for example, see an image
carousel at any time, a "Click to View" drop-down menu, or the dynamic change of the color of
the elements of a web page. All this is possible thanks to JavaScript.
The benefits of JavaScript.
Simple learning and use
The JavaScript syntax was inspired by the Java programming language, it is easy to learn and code.
Platform independence
Unlike other programming languages, you can insert JavaScript into any web page and use it with
many other web development languages and frameworks.

15
Server load reduction
You can use JavaScript to reduce server load and network clutter, as it allows you to perform
logical operations and perform much of the server’s tasks on the client itself.
Improved user interface
JavaScript creates stylish websites that make it easy to find and process complex information.

b- Frontend

Figure3: Vue.js logo

Vue.js is an open-source model–view–viewmodel front end JavaScript framework for building

user interfaces and single-page applications. Vue.js is a dynamic JavaScript framework for creating
user interfaces. This system is well known for its steep learning curve. However, it is such an
accessible and simple framework that we can start building web applications in Vue.js with only a
basic understanding of HTML, CSS and JavaScript. The short learning curve is a feature of this
progressive framework. It is flexible and can be used as a utility or a complete framework in web
development.

c- Backend

16
Figure 4: Node.js logo

Node.js is a single-thread, open-source, cross-platform execution environment for creating fast,

scalable server-side and networked applications. It works with the JavaScript V8 runtime engine
and uses a non-blocking, event-driven I/O architecture, making it efficient and suitable for real-
time applications.
Node.js has grown rapidly in recent years. This is due to the extensive list of features it offers:

Easy – Easy-Node.js is pretty easy to handle. It’s a must for beginners in web development.
Thanks to many tutorials and a large community, it is very easy to get started.
Scalable – Provides high scalability to applications. Node.js, being single-thread, is capable of
handling a large number of simultaneous connections with high throughput.
Speed – Threadless execution makes Node.js even faster and more efficient.
Packages – A large set of open source Node.js packages is available that can simplify your work.
Today, there are over a million packages in the NPM ecosystem.
Solid backend – Node.js is written in C and C++, which makes it fast and adds features like
network support.
Multi-Platform – Multi-platform support allows you to create SaaS websites, desktop apps and
even mobile apps, all using Node.js.
Maintainable – Node.js is an easy choice for developers, as the frontend and backend can be
managed with JavaScript as a single language.

d- Database Management

17
Figure 5: MongoDB logo.

In database management, we can distinguish two main parts: SQL and NoSQL databases. Both are
used at Trellix, but the main database system used is MongoDB which is a NoSQL database.
MongoDB is a very popular document-oriented database. As a NoSQL solution, it uses flexible
documents instead of tables and rows to process and store various forms of data. It is very handy
for the Trellis project, as it avoids the need to constantly migrate structured schemas while
handling a diverse range of output data.

III- PROJECTS MANAGEMENT

1- Organization
For this, you can use Trello or GitHub Project to manage your project and have a better overview.
- Trello: With its multitude of templates, you can create lists and cards. Anyone can
contribute and edit the various.
- GitHub Project: It's designed to manage your tasks directly on GitHub using different
features like Issues. You can also assign them to different people using milestones and
other features to speed up the work.
These tools mentioned above are not necessarily the ones to use. Any tool that can be
used to manage a project is acceptable.

2- Requirements
You need to use a virtual environment for your code to work on each project. For development,
Vs Code. But you need to configure some packages that will allow you to do certain things like
Linting, Testing, or even documentation. Python applications often use packages and modules
that are not part of the standard library. Applications will sometimes need a specific version of a
library because the application may require a particular bug to be fixed or because the application
may be written using an outdated version of the library interface.

18
Visual Studio Code is an extensible code editor developed by Microsoft for Windows, Linux and
macOS. Features include debugging support, smart code completion, snippets, code refactoring,
and built-in Git.

Figure 6: Vs Code logo

3- Documentation
To deliver a project, you need to document it to help other people work on it and get involved.
You need to do this because even though you own the code, sometimes you don't really
remember how the code you wrote works. If you have made a habit of documenting it properly, it
can't be a problem to remember what your code should do. Documentation plays an important
role in the maintenance of an application over the course of time. A well-documented code is
essential to easily onboard beginners and helps other developers contribute to your project
without being too familiar with all the code bases.

INTERNSHIP PART II

Dear manager,
As you know, I’m coming to the end of my internship at Biris Technologie. I hope to further
develop the skills in software engineering that I had to do during my internship. During my
internship, I had to better develop my front end skills using Vue Js. With my little experience at
Biris Technologie, I am convinced that I can learn a lot more and thus help the company achieve
its goals. Working independently on various projects has also allowed me to better organize
myself and set my own deadlines to meet them. I also developed leadership skills, which will allow
me to resolve conflicts and especially as they arise. I hope to be a good fit for the project you will
assign to me. I was also able to learn from my mistakes during the different meetings we had, and

19
I think I'm up to the task of realizing the next project you will entrust me with. I would like to
thank you for the attention you have paid to my work during all this time, and I hope to have
satisfied you enough for you to extend me.
I look forward to hearing from you soon.
Sincerely,
Ronaldo ADIKPETO

CONCLUSION
In short, during this four-month internship, I was able to put into practice my adaptability skills
acquired at school, while being confronted with the realities of the working world and team
management. I had the opportunity to carry out several tasks and to develop my ability. This
internship was very enriching for me, because it allowed me to discover more concretely the field
of web development. I would also like to thank all my guides who have guided me well
throughout this learning. Their sense of work well done and their support made all the difference.
It was a good time of exchange and sharing. For the daily success of the tasks that were entrusted
to me, the advice and guidance of my supervisor were very useful. He was an outstanding coach
and supervisor. I will keep his precious advice and I will jealously put it into practice during all my
future professional experiences. I would also like to thank all my collaborators during this
internship. The learning process would never have been so easy if they had not always been
attentive.
The acquisition of skills was therefore natural whether they are technical or soft. Actually, I can
safely say that this internship (ongoing) is probably the best work experience I’ve had so far. I
recommend this internship for anyone who already has a good foundation in web development
and would like to deepen it.

20