\documentclass[11pt]{article}

\usepackage[utf8]{inputenc}
\usepackage[T1]{fontenc}
\usepackage{mathptmx}

\usepackage{graphicx}
\usepackage{wrapfig}
\usepackage{subcaption}
\usepackage{setspace}
\usepackage{booktabs}
\usepackage{float}
\usepackage{multirow}
\usepackage{lscape}
\usepackage{placeins}
\usepackage[font=small, labelfont=bf]{caption}
\usepackage[protrusion=true, expansion=true]{microtype}
\usepackage{amsmath,amssymb}

\usepackage{fancyhdr}
\usepackage{lastpage}
\usepackage{afterpage}
\usepackage[colorinlistoftodos]{todonotes}
\usepackage[colorlinks=true, linkcolor=black, citecolor=blue!70!black, urlcolor=blue!70!black, pdfproducer={MSKU-SE-Original-Template}, pdfcreator={MSKU MÜHENDİSLİK FAKÜLTESİ}]{hyperref}
\usepackage[firstpage=false]{draftwatermark}
\SetWatermarkText{MSKU-SE}
\SetWatermarkScale{0.4}
\SetWatermarkLightness{0.99} 
\SetWatermarkAngle{45}

\usepackage{biblatex}
\addbibresource{references.bib}
\usepackage[english]{babel}
\usepackage{csquotes}

\usepackage{tabularx}
\usepackage{array}
\usepackage{xcolor}
\usepackage{titlesec}
\usepackage{parskip}

\newcommand{\HRule}[1]{\rule{\linewidth}{#1}}
\setstretch{1.4}
\setcounter{tocdepth}{3}
\setcounter{secnumdepth}{3}

% --- Heading Styles ---
\titleformat{\section}
  {\Large\bfseries}{\thesection.}{0.5em}{}
\titleformat{\subsection}
  {\large\bfseries}{\thesubsection.}{0.5em}{}
\titleformat{\subsubsection}
  {\normalsize\bfseries}{\thesubsubsection.}{0.5em}{}

\titlespacing*{\section}{0pt}{20pt}{10pt}
\titlespacing*{\subsection}{0pt}{14pt}{6pt}
\titlespacing*{\subsubsection}{0pt}{10pt}{4pt}

\usepackage[a4paper,top=3cm,bottom=3cm,left=3cm,right=2.5cm,headheight=15pt,headsep=15pt,footskip=25pt]{geometry}

% ============================================================================
%  INFORMATION TO BE FILLED: Edit bilgiler.tex
%  (Edit bilgiler.tex to fill in your information)
% ============================================================================
\input{bilgiler.tex}

% ============================================================================
%                    DO NOT TOUCH BELOW THIS LINE
% ============================================================================

% Automatically derived commands
\newcommand{\ogrenciTamAd}{\ogrenciAd\ \ogrenciSoyad}
\newcommand{\sirketDanismanTamAd}{\sirketDanismanAd\ \sirketDanismanSoyad}

\pagestyle{fancy}
\fancyhf{}
\renewcommand{\headrulewidth}{0.5pt}
\renewcommand{\footrulewidth}{0.3pt}
\fancyhead[L]{\small\textit{\ogrenciNumara}}
\fancyhead[R]{\small\textit{\ogrenciTamAd}}
\fancyfoot[L]{\small\textit{\sirketDanismanTamAd, \sirketDanismanUnvan}}
\fancyfoot[C]{\footnotesize Paraf: \rule{1.5cm}{0.4pt}\hspace{1sp}\textcolor{white}{\fontsize{0.1pt}{0.1pt}\selectfont MSKU-SE-Template-Verified}}
\fancyfoot[R]{\small Sayfa \thepage\ / \pageref{LastPage}\hspace{1mm}\textcolor[gray]{0.85}{\fontsize{2pt}{2pt}\selectfont m}}

\begin{document}

\selectlanguage{english}
\shorthandoff{=}

% --- Cover Page ---
\begin{titlepage}
\begin{center}

\vspace*{0.2cm}
{\large \universiteAd} \\[0.8cm]

\includegraphics[width=35mm]{img/uni.png}\\[0.5cm]
{\small between} \\[0.5cm]
\includegraphics[width=35mm]{img/CL.png}\\[0.4cm]

{\large \sirketAd} \\[0.4cm]
\bolumAd\\[0.4cm]

\HRule{1.5pt} \\[0.3cm]
{\LARGE \textbf{\raporBaslik}} \\[0.3cm]
\HRule{1.5pt}

\vfill

{\large \textbf{Internship Report}} \\[0.4cm]
{\Large \ogrenciTamAd} \\[0.2cm]
{\normalsize \ogrenciNumara} \\[0.8cm]
{\normalsize Internship Supervisor:} \\[0.2cm]
{\normalsize \sirketDanismanTamAd, \sirketAd}

\vfill

{\normalsize \stajBaslangic\ -- \stajBitis}

\vspace*{0.2cm}

\end{center}
\end{titlepage}



\input{ortable.tex}




\newpage

\tableofcontents

\newpage


% ============================================================================
%                          ABSTRACT PAGE
% ============================================================================
\noindent
\begin{minipage}[c][\textheight][c]{\linewidth}
    \centering
    \section*{Abstract}

This report covers the \stajSure\ software engineering internship conducted at \sirketAd\ between \stajBaslangic\ and \stajBitis.

During the internship, I took part in the v3.0 development team of the e-commerce platform named "ÖrnekŞirket". The work was carried out on three main axes:

\begin{enumerate}
    \item \textbf{Frontend development:} Writing product listing, cart management, and user panel components with React.js and TypeScript.
    \item \textbf{Backend development:} Building 18 RESTful API endpoints with Node.js and Express.js, and integrating MongoDB database.
    \item \textbf{Test and DevOps:} Writing 85 unit tests with Jest, setting up CI/CD pipelines with GitHub Actions, and containerization with Docker.
\end{enumerate}

At the end of the internship, 35\% improvement in page load times, 12 reusable components, and 78\% test coverage were achieved.

    \vspace{1cm}
    \textbf{Keywords:} Software Engineering, Internship, React.js, Node.js, MongoDB, REST API, Agile/Scrum

\end{minipage}
\clearpage


% ============================================================================
%                          1. INTRODUCTION
% ============================================================================
\section{Introduction}

This report describes my software engineering internship conducted at \sirketAd\ between \stajBaslangic\ -- \stajBitis. In the report, I share the project I worked on during the internship, the technologies I used, the challenges I faced, and the achievements I attained.

\subsection{Purpose of the Internship}

My main goal in this internship was to apply the theoretical knowledge I learned at the university in a real project and closely experience professional software development processes. My concrete objectives were:

\begin{itemize}
    \item Writing production-ready code using modern web technologies like React.js and Node.js
    \item Observing industry standards in a real business environment, such as Agile/Scrum, CI/CD, and code review
    \item Improving technical communication and collaboration by working in a team
    \item Reaching a level where I can design and develop a feature on my own by the end of the internship
\end{itemize}

\subsection{About the Company}

\sirketAd\ was established in 2018 in Istanbul Teknopark and develops custom e-commerce software for medium and large-scale enterprises. It has an engineering team of 45 people.

The company's technology infrastructure is built on React.js, Node.js, MongoDB, and AWS. A microservices architecture is utilized, and a containerization infrastructure is run with Docker and Kubernetes. The company has more than 30 active customers.

\subsection{What I Worked On}

During the internship, I joined the v3.0 development team of the company's main product, the "ÖrnekŞirket" e-commerce platform. I took part in both the frontend and backend sides of this platform:

\begin{itemize}
    \item Developed user interface components (product list, cart, filters) with React.js
    \item Authored API endpoints (product, order, user operations) with Node.js/Express.js
    \item Designed MongoDB database schemas and optimized queries
    \item Wrote unit and integration tests with Jest
    \item Participated in pull request processes and code reviews via Git
\end{itemize}


% ============================================================================
%                          2. BACKGROUND
% ============================================================================
\newpage
\section{Background and Technologies Used}

In this section, I explain the general condition of the sector I interned in, the technologies used in the project, and the technical structure of the project I worked on.

\subsection{E-Commerce Sector}

The e-commerce sector has grown rapidly, especially after the pandemic. In Turkey, the e-commerce volume exceeded 1.2 trillion TRY in 2024 and is growing at over 30\% annually \cite{becker2017deep}.

Globally, platforms like Shopify, WooCommerce, and Magento are prominent. In Turkey, Trendyol, Hepsiburada, and N11 are the market leaders. Unlike these large platforms, \sirketAd\ provides specialized solutions dedicated to the B2B (business-to-business) segment.

\subsection{Technologies Used}

I listed the core technologies I used during the internship with brief descriptions below:

\begin{table}[H]
\centering
\begin{tabular}{l l p{7cm}}
\toprule
\textbf{Technology} & \textbf{Category} & \textbf{Use Case} \\
\midrule
React.js & Frontend & For creating user interface components \cite{laang2021can} \\
TypeScript & Frontend & To add type safety to JavaScript \\
Tailwind CSS & Frontend & For responsive design \\
Node.js & Backend & To develop server-side applications \cite{berger2021confidence} \\
Express.js & Backend & For creating REST API endpoints \\
MongoDB & Database & To store product, user, and order data \cite{hendrycks2019using} \\
Jest & Test & To write unit and integration tests \\
Docker & DevOps & To run the application inside a container \\
Git/GitHub & Version Control & For code management and team collaboration \\
\bottomrule
\end{tabular}
\caption{Technologies Used in the Internship and Their Application Areas}
\label{tab:teknolojiler}
\end{table}

\subsection{Project: ÖrnekŞirket v3.0}

ÖrnekŞirket is a multi-tenant e-commerce platform developed by \sirketAd. This means that many different stores are operated on a single infrastructure.

In the v3.0 version, the platform is being rewritten from scratch, targeting the following goals:
\begin{itemize}
    \item Reducing page load times by 40\%
    \item Improving mobile device compatibility
    \item Scaling to support 100,000+ products
    \item Refactoring the monolithic structure into microservices
\end{itemize}


% ============================================================================
%                          3. INTERNSHIP ACTIVITIES
% ============================================================================
\newpage
\section{Internship Activities}

The tasks I performed during the internship are grouped under three main headings. Each activity was planned and executed within two-week Agile sprint cycles.

\subsection{Activity 1: Frontend Component Development}

In the first two weeks, I developed the user interface components of ÖrnekŞirket with React.js and TypeScript.

\textbf{Product Listing Page:}
I wrote a component where users can filter, sort, and paginate through products based on brand, price range, and evaluation score. The visual design of the page is shown in Figure~\ref{fig:urun_listeleme}. API calls were cached and an automatic retry mechanism was added using the React Query library.

\textbf{Cart Management:}
I created a global cart state utilizing the React Context API and the useReducer hook. When the user adds or removes a product, changes the quantity, or navigates between pages, the cart state is preserved, and the total price is calculated instantly.

\textbf{Responsive Design:}
All components were designed with Tailwind CSS to look right on mobile, tablet, and desktop screens. A "mobile-first" approach was adopted; meaning the phone view was designed first, then adapted for larger screens.

\begin{figure}[H]
    \centering
    \includegraphics[width=0.95\textwidth]{img/urun_listeleme.png}
    \caption{ÖrnekŞirket product listing page -- filters on the left, product cards on the right. Each card includes a product image, price, rating, and an "Add to Cart" button.}
    \label{fig:urun_listeleme}
\end{figure}

\subsection{Activity 2: Backend API Development}

During the third and fourth weeks, I developed RESTful API endpoints on the backend side. I created CRUD (Create, Read, Update, Delete) operations for product, user, and order operations using Express.js.

\textbf{API Design:}
Following REST standards, I used resource-based URL structures (like \texttt{/api/products}, \texttt{/api/orders}), appropriate HTTP methods (GET, POST, PUT, DELETE), and standard status codes (200, 201, 404, 500). All endpoints were documented with Swagger.

\textbf{Database Integration:}
I connected to the MongoDB database using the Mongoose ODM library. I designed separate schema models for products, users, and orders. By adding indexes to frequently queried fields, I shortened query times.

\textbf{Authentication:}
I developed a JWT (JSON Web Token) based authentication system. When the user logged in, they received an access token and a refresh token. Upon access token expiration, a new one was automatically retrieved using the refresh token.

\begin{figure}[H]
    \centering
    \includegraphics[width=0.95\textwidth]{img/api_swagger.png}
    \caption{ÖrnekŞirket API Swagger documentation -- A total of 12 endpoints are visible under four main groups: Products, Cart, Authentication, and Orders.}
    \label{fig:api_swagger}
\end{figure}


\subsection{Activity 3: Testing and CI/CD Processes}

In the last two weeks, I worked on writing tests and DevOps processes.

\textbf{Unit Tests:}
I wrote unit tests for backend API functions using the Jest framework, and user interaction tests for frontend components with the React Testing Library. I created 85 tests in total and increased the code coverage rate to 78\%.

\textbf{CI/CD Pipeline:}
I set up an automation pipeline with GitHub Actions. Whenever a pull request was opened, tests were run automatically, code quality was checked with ESLint, and if successful, the code was deployed to the staging environment.

\textbf{Docker:}
I packaged the application inside Docker containers. With the \texttt{docker-compose} file, I made it possible to spin up all services (application, database, cache) with a single command. Thus, the "it works on my machine but not yours" problem was eliminated.


% ============================================================================
%                          4. RESULTS AND ACHIEVEMENTS
% ============================================================================
\newpage
\section{Results and Achievements}

\subsection{Concrete Outcomes}

The measurable results obtained during the internship are summarized in the table below:

\begin{table}[H]
\centering
\begin{tabular}{l r}
\toprule
\textbf{Metric} & \textbf{Result} \\
\midrule
React components developed & 12 items \\
API endpoints created & 18 items \\
Unit/integration tests written & 85 items \\
Code coverage rate & 78\% \\
Page load improvement & 35\% \\
Lighthouse performance score (mobile) & 72 $\rightarrow$ 91 \\
CI/CD deployment time & 45 min $\rightarrow$ 12 min \\
\bottomrule
\end{tabular}
\caption{Concrete Results Achieved During the Internship}
\label{tab:sonuclar}
\end{table}

\subsection{Technical Achievements}

Before the internship, I had JavaScript, HTML/CSS, and foundational database knowledge from university. After the internship, I gained practical experience in the following technologies:

\begin{itemize}
    \item \textbf{Frontend:} React.js, TypeScript, Tailwind CSS, React Query, Storybook
    \item \textbf{Backend:} Node.js, Express.js, Mongoose, JWT authentication
    \item \textbf{Database:} MongoDB schema design, indexing, aggregation pipeline
    \item \textbf{DevOps:} Docker, docker-compose, GitHub Actions, CI/CD pipelines
    \item \textbf{Methodology:} Agile/Scrum, sprint planning, daily standup, code review
\end{itemize}

\subsection{Personal Achievements}

Beyond technical skills, I also made significant progress in these areas:

\begin{itemize}
    \item \textbf{Teamwork:} I learned to work in coordination with an 8-person developer team
    \item \textbf{Technical communication:} Writing pull request descriptions, giving and receiving constructive feedback in code reviews
    \item \textbf{Time management:} I learned to prioritize my tasks to meet sprint goals on time
    \item \textbf{Problem-solving:} I practiced systematic debugging, log investigation, and reading documentation to find solutions when encountering errors
\end{itemize}


% ============================================================================
%                          5. EVALUATION AND REFLECTIONS
% ============================================================================
\newpage
\section{Evaluation and Reflections}

\subsection{The Most Important Things I Learned}

The biggest takeaway the internship gave me was seeing the difference between "writing code" and "software development". In university, we typically work alone on simple projects. During the internship, I experienced the following differences:

\begin{itemize}
    \item It is not enough for the code to work; it must be written in a way that others can read and understand
    \item Tests must be written for every change; it must pass a code review and successfully exit the CI/CD pipeline
    \item Mechanisms (monitoring, logging, alerting) must be established to quickly detect and correct errors when they occur
\end{itemize}

\subsection{Challenges Encountered}

\textbf{Understanding a large codebase:}
Getting involved in a project with over 200,000 lines of code was very challenging at first. It took time to understand what each file did and how modules communicated with each other. I accelerated this process by actively participating in code review sessions and reading technical documentation.

\textbf{Asynchronous programming:}
Applying the callback, Promise, and async/await concepts I theoretically learned in university to a real project was a different challenge. I gained practical experience, especially regarding parallelizing multiple API calls, error catching, and race conditions.

\textbf{Git branching strategy:}
Adapting to the Git Flow strategy, which utilizes \texttt{main}, \texttt{develop}, \texttt{feature/*}, and \texttt{hotfix/*} branches as a team, seemed complex initially. I learned operations like resolving merge conflicts and rebasing during the internship.

\subsection{Connection with University Education}

The following courses I took at the university were directly useful in the internship:

\begin{itemize}
    \item \textbf{Data Structures and Algorithms:} While optimizing database queries
    \item \textbf{Object-Oriented Programming:} While designing the component architecture
    \item \textbf{Database Management Systems:} In MongoDB schema design
    \item \textbf{Software Engineering:} In understanding Agile processes
\end{itemize}

However, I felt the need for self-learning outside the curriculum on subjects like modern frontend frameworks, DevOps practices, and cloud technologies.


% ============================================================================
%                          6. CONCLUSION
% ============================================================================
\newpage
\section{Conclusion}

The \stajSure\ internship I performed at \sirketAd\ has been an important stepping stone for my software engineering career.

During the internship, I took an active role in both frontend and backend development processes of an e-commerce platform. I developed 12 components with React.js, 18 API endpoints with Node.js, wrote 85 tests, and set up a CI/CD pipeline. The code I developed was deployed to the production environment and began to be used by real users.

Following this experience, I can make these assessments:

\begin{enumerate}
    \item Software engineering is not just writing code; it is a whole that requires planning, testing, documentation, and teamwork
    \item Although university education provides a solid foundation, industrial practice is an indispensable layer added on top of it
    \item The modern web development ecosystem is changing rapidly; acquiring the habit of continuous learning is mandatory
\end{enumerate}

In the future, I want to pursue a career as a full-stack web developer, and this internship gave me valuable experience on the path to that goal.


% ============================================================================
%                          7. ACKNOWLEDGEMENTS
% ============================================================================
\newpage
\section{Acknowledgements}

I would like to thank the management of \sirketAd\ for providing me with this internship opportunity.

I offer my special thanks to my company supervisor, \sirketDanismanTamAd, who guided me throughout my internship, answered my questions patiently, and contributed greatly to my professional development.

% University supervisor section was removed.

I am grateful to all my \sirketAd\ team members who shared their knowledge and experience with me, and to my family who supported me throughout my educational life.


% ============================================================================
%                          BIBLIOGRAPHY
% ============================================================================
\newpage
\printbibliography

% ============================================================================
%                          APPENDICES
% ============================================================================
\newpage
\section{Appendices}

\subsection{Appendix A: System Architecture}

The following figure depicts the overall system architecture of the ÖrnekŞirket v3.0 platform. The client layer, API Gateway, microservices, database, and CI/CD infrastructure layers are shown.

\begin{figure}[H]
    \centering
    \includegraphics[width=0.95\textwidth]{img/mimari.png}
    \caption{ÖrnekŞirket v3.0 system architecture -- The platform consists of client, API gateway, microservices, database, and CI/CD layers.}
    \label{fig:mimari}
\end{figure}

\subsection{Appendix B: Weekly Work Plan}

\begin{table}[H]
\centering
\begin{tabular}{c l l}
\toprule
\textbf{Week} & \textbf{Task Performed} & \textbf{Technology Used} \\
\midrule
1 & Orientation, development environment setup & Git, Docker, VS Code \\
2 & Product listing component development & React.js, TypeScript \\
3 & Cart management and user panel & React Context, Tailwind CSS \\
4 & Backend API endpoint development & Node.js, Express.js \\
5 & Database integration and schema design & MongoDB, Mongoose \\
6 & Writing tests and CI/CD configuration & Jest, GitHub Actions \\
\bottomrule
\end{tabular}
\caption{Weekly Internship Work Plan}
\label{tab:haftalik}
\end{table}


% ============================================================================
%                          IMPORTANT NOTES (TEMPLATE USER GUIDE)
% ============================================================================
\newpage
\section*{Şablon Kullanım Kılavuzu}
\addcontentsline{toc}{section}{Şablon Kullanım Kılavuzu}

\begin{center}
\fcolorbox{black!30}{gray!8}{%
\begin{minipage}{0.92\textwidth}
\vspace{0.5cm}

\textbf{\large Bu şablonu nasıl kullanacaksınız?}
\vspace{0.4cm}

\begin{enumerate}
    \item \textbf{bilgiler.tex} dosyasını açın ve kendi bilgilerinizi (ad, soyad, numara, şirket bilgileri, tarihler vb.) girin. Geri kalan her şey otomatik dolar.

    \item Bu rapordaki \textbf{tüm metni silin} ve kendi staj deneyiminizi yazın. Buradaki içerik tamamen hayali bir öğrenciye (Emre Yılmaz) aittir.

    \item \textbf{img/} klasörüne kendi resimlerinizi (ekran görüntüleri, diyagramlar) ekleyin. \texttt{urun\_listeleme.png}, \texttt{api\_swagger.png} ve \texttt{mimari.png} dosyalarını kendi resimlerinizle değiştirin.

    \item Kaynaklara mutlaka atıf verin: \texttt{references.bib} dosyasına kaynaklarınızı ekleyin ve metin içinde \texttt{\textbackslash cite\{anahtar\}} ile referans gösterin.

    \item Raporunuz şekil ve tablolar dahil \textbf{en az 20 sayfa} olmalıdır.

    \item Rapor dili \textbf{sadece İngilizce} olmalıdır.
\end{enumerate}

\vspace{0.3cm}
\textbf{Derleme:} \texttt{pdflatex main.tex \&\& biber main \&\& pdflatex main.tex \&\& pdflatex main.tex}
\vspace{0.5cm}
\end{minipage}
}
\end{center}

\end{document}
