INTERNSHIP REPORT

FRONTEND Intern
Under the Company
“COOX Online Pvt. Ltd.”

Submitted by
Dev Vats(2106950100020)

DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

SHRI RAM GROUP OF COLLEGES
MUZAFFARNAGAR , [U.P]
[251001]
 DECLARATION

I hereby declare that all the work presented in this report in the partial fulfilment of the
requirement for the award of the degree of Bachelor of Technology in Computer Science
& Engineering, Dr . A.P.J Abdul kalam Technical University , Lucknow , Uttar Pradesh , is an
authentic record of the work done during the internship of Frontend Developer Intern
under the company COOX Online Pvt. Ltd. .

Dev Vats (2106950100020)

 ACKNOWLEDGEMENT

The satisfaction that accompanies the successful completion of any task would be
incomplete without the mention of people whose ceaseless cooperation made it possible,
whose constant guidance and encouragement crown all efforts with success. I take this
opportunity to express our profound sense of gratitude and respect to all those who helped
me throughout the project and my team whom I discussed every doubt. I thank all my senior
developers from whom I learnt a lot of tech things.

I would like to express my gratitude and appreciation to our company COOX Online Pvt. Ltd.
for being our guide and all those who gave us the opportunity to complete this internship.
 ABSTRACT

The following report enlists the details of the internship carried out in COOX Online Pvt. Ltd.
. COOX Online Private Limited is a service-based company specializing in providing
professional chef-on-demand services. The company operates in the food and hospitality
sector, offering services where professional chefs visit customers' homes to cook customized
meals for parties, events, and personal gatherings.

During the internship I got the exposure of working in a high paced product centric
developing environment ,along with my talented team , we built a creative login & signup
page , and added API to our webpage.

All my work , helped me experience many domains like teamwork, time management, work
environment, peering support carried out in the organization. Thus, the internship has
provided me with the opportunity to improve my experience, improve my skills and
acknowledge my strengths and weaknesses that would be more helpful to shape up my
career in the future.
CERTIFICATE
 TABLE OF CONTENTS
TOPICS

1. INTRODUCTION
1.1. About the company
1.2. Vision
1.3. Mission
1.4. Internship Objectives

2. TECHNOLOGY STACK
2.1. HTML
2.2. CSS
2.3. JavaScript
2.4. React Js
2.5. API
2.6. GitHub

3. DEPLOYED PROJECTS
3.1. Signup Page & API

4.TASKS AND RESPONSIBILITIES

4.1. Tasks Allotted
5.CONCLUSION
6.REFERENCES
 INTRODUCTION

About the Company:-

COOX Online Private Limited is a service-based company specializing in providing
professional chef-on-demand services. The company operates in the food and hospitality
sector, offering services where professional chefs visit customers' homes to cook customized
meals for parties, events, and personal gatherings.
Founded: The company was established to cater to the growing demand for professional
culinary services in a private, personalized setting.
Target Audience: Individuals and families looking for an alternative to dining out or hosting
events without the hassle of cooking and serving themselves.
Market Presence: COOX operates in various cities across India and is expanding its reach as
demand grows.

Vision:-
Our vision is to help entrepreneurs and startup to align their Ideation with real world
scenarios, provide them with insights of the current market with unaccustomed fabricated
data leveraged with industry-leading deep technologies always to keep you ahead of market.
We have a bias towards the founders and entrepreneurs who wants to develop the vision of
an ecosystem rather than a single stander. To create products and services that can change
lives.

Mission:-
Our mission is to enhance deliver market defining high quality solutions that create value
and reliable competitive advantage . We started our journey after observing discrepancies in
the existing system. So we adapted measures to make us the change that we wanted to see.
 Internship Objectives

1. Identify goals and objectives of the company.

2. To build a Navbar and Front Page page.
3. To connect the API with the frontend.
4. To come up with the possible strategies to gain a competitive advantage.
5. To learn about the professional ethics and working of corporate world & teamwork.
 TECHNOLOGY STACK

HTML 5:-

HTML stands for HyperText Markup Language. It is used to design web pages using a markup
language. HTML is the combination of Hypertext and Markup language. Hypertext defines
the link between web pages. A markup language is used to define the text document within
the tag which defines the structure of web pages. This language is used to annotate (make
notes for the computer) text so that a machine can understand it and manipulate text
accordingly. Most markup languages (e.g. HTML) are human readable. The language uses
tags to define what manipulation has to be done on the text.

Elements and Tags:

HTML uses predefined tags and elements which tell the browser how to properly display the
content. Remember to include closing tags. If omitted, the browser applies the effect of the
opening tag until the end of the page.

HTML page structure:

The basic structure of an HTML page is laid out below. It contains the essential building-
block elements (i.e. doctype declaration, HTML, head, title, and body elements) upon which
all web pages are created.
<!DOCTYPE html> :
This is the document type declaration (not technically a tag). It declares a document as being
an HTML document. The doctype declaration is not case-sensitive.

<html>:
This is called the HTML root element. All other elements are contained within it.

<head>:
The head tag contains the “behind the scenes” elements for a webpage. Elements within the
head aren’t visible on the front-end of a webpage. HTML elements used inside the element
include:

<style>:
This html tag allows us to insert styling into our webpages and make them appealing to look
at with the help of CSS.
<title>:
The title is what is displayed on the top of your browser when you visit a website and
contains title of the webpage that you are viewing.

<base>:
It specifies the base URL for all relative URL’s in a document.

<noscript>:
Defines a section of HTML that is inserted when the scripting has been turned off in the
users browser.

<script>:
This tag is used to add functionality in the website with the help of JavaScript.

<meta>:
This tag encloses the meta data of the website that must be loaded every time the website is
visited. For eg:- the metadata charset allows you to use the standard UTF-8 encoding in your
website. This in turn allows the users to view your webpage in the language of their choice.
It is a self closing tag.

<link>:
The ‘link’ tag is used to tie together HTML, CSS and JavaScript. It is self closing.

<body>:
The body tag is used to enclose all the visible content of a webpage. In other words, the
body content is what the browser will show on the front-end.

An HTML document can be created using any text editor. Save the text file using .html or
.htm . Once saved as an HTML document, the file can be opened as a webpage in the
browser.

CSS :
CSS (Cascading Style Sheets) is used to apply styles to web pages. Cascading Style Sheets are
fondly referred to as CSS. It is used to make web pages presentable. The reason for using this
is to simplify the process of making web pages presentable. It allows you to apply styles on
web pages. More importantly, it enables you to do this independently of the HTML that
makes up each web page. Styling is an essential property for any website. It increases the
standards and overall look of the website that makes it easier for the user to interact with it.
A website can be made without CSS, as styling is MUST since no user would want to interact
with a dull and shabby website. So for knowing Web Development, learning CSS is
mandatory.

There are three types of CSS which are given below:

• Inline: Inline CSS contains the CSS property in the body section attached with the element
known as inline CSS.

• Internal or Embedded: The CSS ruleset should be within the HTML file in the head
section i.e the CSS is embedded within the HTML file.

• External: External CSS contains a separate CSS file that contains only style property with
the help of tag attributes.

Why is CSS used in HTML?

• Solves a big problem: Font, color, background style, element alignments, border, and
size tags had to be duplicated on each web page before CSS. This was a lengthy procedure.

• Saves a lot of time: Because CSS style definitions are stored in external CSS files,
updating only one file can modify the entire website.

• Provide more attributes: CSS gives more specific features for defining the look and
feel of a website than simple HTML.

• Pages load faster: CSS doesn’t require you to write HTML tag attributes all of the time.
A tag’s rule can be written once and applied to all instances of the tag. As a result, CSS uses
less code, resulting in speedier download times.
• Easier Website maintenance: CSS makes website maintenance much easier. If we
need to make a global change to the file, we can simply alter the style, which will update all
of the elements on the web page.

• Multiple device compatibility: We can use CSS with older language versions because
it is compatible with them. CSS makes it possible to optimize material for several devices.

• Base for web development: HTML and CSS is the basic skill that every web developer
should know. It is the basic skill that is required for building a website.

• Makes your website look attractive: A website that’s dull and plain will not attract
the user, so adding some style would surely make your website presentable to the user.

• Makes the design come live: A web developer is responsible for making the design
given to him as a live product. It is used for styling to develop the design of the website.

• Increases user experience of the website: A website with a simple yet beautiful UI
would help the users to go through the website easily. It is used to make the user interface
better.

• More career opportunities: Since CSS is a basic requirement while learning Web
Development, therefor there are abundant career opportunities for it. As a freelancer, you
can land up to many projects.

CSS SYNTAX:
A CSS rule set contains a selector and a declaration block.

Selector: Selector indicates the HTML element you want to style. It could be any tag like
<h1> , <title> etc.

Declaration Block:
The declaration block can contain one or more declarations separated by a semicolon. For
the above example, there are two declarations:
1. color: yellow;
2. font-size: 11 px;
Each declaration contains a property name and value, separated by a colon.

JAVASCRIPT :

JavaScript (js) is a light-weight object-oriented programming language which is used by

several websites for scripting the webpages. It is an interpreted, full-fledged programming
language that enables dynamic interactivity on websites when applied to an HTML
document. It was introduced in the year 1995 for adding programs to the webpages in the
Netscape Navigator browser. Since then, it has been adopted by all other graphical web
browsers. With JavaScript, users can build modern web applications to interact directly
without reloading the page every time. The traditional website uses js to provide several
forms of interactivity and simplicity.

Features of JavaScript

All popular web browsers support JavaScript as they provide built-in execution
environments.
• JavaScript follows the syntax and structure of the C programming language. Thus, it is a
structured programming language.
• JavaScript is a weakly typed language, where certain types are implicitly cast (depending
on the operation).
• JavaScript is an object-oriented programming language that uses prototypes rather than
using classes for inheritance.
• It is a light-weighted and interpreted language.
• It is a case-sensitive language.
• JavaScript is supportable in several operating systems including, Windows, macOS, etc.
• It provides good control to the users over the web browsers.
Application of JavaScript :-
JavaScript is used to create interactive websites. It is mainly used for:
• Client-side validation,
• Dynamic drop-down menus,
• Displaying date and time,
• Displaying pop-up windows and dialog boxes (like an alert dialog box, confirm dialog box
and prompt dialog box),
• Displaying clocks etc.

React.js:-

ReactJS is a declarative, efficient, and flexible JavaScript library for building reusable UI
components. It is an open-source, component-based front end library which is responsible
only for the view layer of the application. It was initially developed and maintained by
Facebook and later used in its products like WhatsApp & Instagram.

The main objective of ReactJS is to develop User Interfaces (UI) that improves the speed of
the apps. It uses virtual DOM (JavaScript object), which improves the performance of the
app. The JavaScript virtual DOM is faster than the regular DOM. We can use ReactJS on the
client and server-side as well as with other frameworks. It uses component and data
patterns that improve readability and helps to maintain larger apps. Today, most of the
websites are built using MVC (model view controller) architecture. In MVC architecture,
React is the 'V' which stands for view, whereas the architecture is provided by the Redux or
Flux.

A ReactJS application is made up of multiple components, each component responsible for

outputting a small, reusable piece of HTML code. The components are the heart of all React
applications. These Components can be nested with other components to allow complex
applications to be built of simple building blocks. ReactJS uses virtual DOM based
mechanism to fill data in HTML DOM. The virtual DOM works fast as it only changes
individual DOM elements instead of reloading complete DOM every time.

To create React app, we write React components that correspond to various elements. We
organize these components inside higher level components which define the application
structure. For example, we take a form that consists of many elements like input fields,
labels, or buttons. We can write each element of the form as React components, and then
we combine it into a higher-level component, i.e., the form component itself. The form
components would specify the structure of the form along with elements inside of it.

Today, many JavaScript frameworks are available in the market(like angular, node), but still,
React came into the market and gained popularity amongst them. The previous frameworks
follow the traditional data flow structure, which uses the DOM (Document Object Model).
DOM is an object which is created by the browser each time a web page is loaded. It
dynamically adds or removes the data at the back end and when any modifications were
done, then each time a new DOM is created for the same page. This repeated creation of
DOM makes unnecessary memory wastage and reduces the performance of the application.

Therefore, a new technology ReactJS framework invented which remove this drawback.
ReactJS allows you to divide your entire application into various components. ReactJS still
used the same traditional data flow, but it is not directly operating on the browser's
Document Object Model (DOM) immediately; instead, it operates on a virtual DOM. It
means rather than manipulating the document in a browser after changes to our data, it
resolves changes on a DOM built and run entirely in memory. After the virtual DOM has
been updated, React determines what changes made to the actual browser's DOM. The
React Virtual DOM exists entirely in memory and is a representation of the web browser's
DOM. Due to this, when we write a React component, we did not write directly to the DOM;
instead, we are writing virtual components that react will turn into the DOM.

React Features:-
Currently, ReactJS gaining quick popularity as the best JavaScript framework among web
developers. It is playing an essential role in the front-end ecosystem. The important features
of ReactJS are as following.
• JSX
• Components
• One-way Data Binding
• Virtual DOM
• Simplicity & Performance

JSX :-
JSX stands for JavaScript XML. It is a JavaScript syntax extension. Its an XML or HTML like
syntax used by ReactJS. This syntax is processed into JavaScript calls of React Framework. It
extends the ES6 so that HTML like text can co-exist with JavaScript react code. It is not
necessary to use JSX, but it is recommended to use in ReactJS.

Components:-
ReactJS is all about components. ReactJS application is made up of multiple components,
and each component has its own logic and controls. These components can be reusable
which help you to maintain the code when working on larger scale projects.

One-way Data Binding:-

ReactJS is designed in such a manner that follows unidirectional data flow or one-way data
binding. The benefits of one-way data binding give you better control throughout the
application. If the data flow is in another direction, then it requires additional features. It is
because components are supposed to be immutable and the data within them cannot be
changed. Flux is a pattern that helps to keep your data unidirectional. This makes the
application more flexible that leads to increase efficiency.

Virtual DOM:-
A virtual DOM object is a representation of the original DOM object. It works like a one way
data binding. Whenever any modifications happen in the web application, the entire UI is re-
rendered in virtual DOM representation. Then it checks the difference between the previous
DOM representation and new DOM. Once it has done, the real DOM will update only the
things that have actually changed. This makes the application faster, and there is no wastage
of memory.

Performance:-
ReactJS is known to be a great performer. This feature makes it much better than other
frameworks out there today. The reason behind this is that it manages a virtual DOM. The
DOM is a cross-platform and programming API which deals with HTML, XML or XHTML. The
DOM exists entirely in memory. Due to this, when we create a component, we did not write
directly to the DOM. Instead, we are writing virtual components that will turn into the DOM
leading to smoother and faster performance.

API:-
Application Programming Interface (API) is a software interface that allows two applications
to interact with each other without any user intervention. API is a collection of software
functions and procedures. In simple terms, API means a software code that can be accessed
or executed. API is defined as a code that helps two different software’s to communicate and
exchange data with each other. It offers products or services to communicate with other
products and services without having to know how they’re implemented.
• The full form of API is Application Programming Interface.
• API is defined as a software code that helps two different software’s to communicate and
exchange data with each other.
• API helps you to plan a business model
• Five types of API are 1) Open API 2) Partner API 3) Internal API 4) High-level 5) Low-level
API
• A Web API is an application programming interface which is use either for web server or a
web browser.
• There are two types of web APIs 1) Server Side API 2) Client Side API
• Some popular API testing tools are 1) Postman 2) Ping API and 3) vRest

Features of API:-
Here are some important features of API:
• It offers a valuable service (data, function, audience,.).
• It helps you to plan a business model.
• Simple, flexible, quickly adopted.
• Offers great developer support.

Here, are some reason for using API:

• Application Programming Interface acronym API helps two different software’s to
communicate and exchange data with each other.
• It helps you to embed content from any site or application more efficiently.
• APIs can access app components. The delivery of services and information is more flexible.
• Content generated can be published automatically.
• It allows the user or a company to customize the content and services which they use the
most.

Types of API :
There are mainly four main types of APIs:
• Open APIs: These types of APIs are publicly available to use like OAuth APIs from Google. It
has also not given any restriction to use them. So, they are also known as Public APIs.
• Partner APIs: Specific rights or licenses to access this type of API because they are not
available to the public.
• Internal APIs: Internal or private. These APIs are developed by companies to use in their
internal systems. It helps you to enhance the productivity of your teams.
• Composite APIs: This type of API combines different data and service APIs.

GitHub:-
Github is the most popular and widely used version control system today. Originally
developed as an open source project in 2005 by the creator of the Linux operating system, it
is a matured and actively maintained environment. A huge number of developers rely upon
GitHub version control to develop several types of commercial and non-commercial projects.
Git-based developers are well thought of and considered as valuable resources. A version
control system records changes carried out to a file, or a set of files over time, and helps you
to recall specific versions of the code later on when you need it. If you’re a developer or a
web designer and want to keep track of each and every version of your code developed for a
particular feature, a Version Control System “VCS” allows you to:

• Revert the code files back to their previous state

• Recall and revert the entire project back to its previous state
• Compare code changes over specific durations of time
• Find who last modified a piece of code that might be causing an issue or a problem .It’s
important to know why version control systems are necessary.

Importance of code repository

For developers, the source code making up the software project is the main area of
concern. Teams often put in great efforts to organize and store the code in a proper
manner so it can be used again for further development. For software development
teams the code repository – a database where the code, including all changes,
carried out on it – forms the single source of invaluable knowledge and the centre of
all activity.

Why did the code need to be changed from time to time?

Product features and software functionality need to be updated as and when market
conditions change and end users provide new feedback. Teams have to work upon features
already developed and offer extra functionality to the product to remain competitive in the
market. Thus new versions of existing code have to be developed by the team from time to
time.

Version control systems:-

For developers and the team, it can be difficult to maintain and keep track of different
versions of the code. Moreover, developers may be required to compare today’s version of
the code with yesterday’s version, or a version developed last year.

Version control systems help the team to keep track of various versions developed over
time. Such systems also log information as to what code was developed, who developed it,
and when the changes were carried out. This helps to compare the performance of different
versions and also know when bugs were introduced and fixed in the code.
 DEPLOYED PROJECT

Login/SignUp Page:-

The main project of the company is to develop a login/signup page where basically a user
need to provide their account details while logging in in their account.

Login/Sign up page can be counted as a gateway to extensive user interaction. Usually Login
system prevents unauthorized access to private data and allows elaborate communication. It
requires username and a password for user identification and authentication. A login form is
used to put the user login and password that the user has already created and the signup
form is the page where user can create their login details by filling in their own data as the
form requires.
 Fig: Login / Signup Page

Navbar:-
A navbar, or navigation bar, is a menu or set of links that helps users navigate a website:
 Location: Usually found at the top or side of a website
 Purpose: Helps users find their way around the site, identify their current location,
and navigate back to previous pages
 Design: Web developers create navbars using HTML and CSS
 Content: Common categories include About us, Contact, Products, and FAQ
 Mobile: On mobile phones, the navigation bar is usually located in the top left and
looks like a hamburger button

Front Page:-
 TASKS AND RESPONSIBILITIES
Tasks Allotted :-
1. Client side development of the project
2. Integration of various API’s and connecting frontend to backend
3. Maintenance of client side code to be error free

Client Side development of the project:-

In the first alloted task of my internship I have built the cliend/frontend side of the project
from scratch and used various languages like HTML,CSS and Javascript for building the
frontend. The code reusability and industry standards remains the biggest factor of writing
structured code in the organisation for us.I have also worked with CSS frameworks namely
Bootstrap and Neuomorphism and framework of Javascript namely React.js.On the login and
signup part, I have worked upon the 2 factor auth and O-auth section and also sorted the
complexities of JWT tokens in a users session during use.

Integration of various API’s and connecting frontend to backend :-

The second task alloted to me was to integrate some api. I implemented trading view
charting library api's to generate the widgets which were the need of the hour. We as a team
also worked upon integration of payments API of Coingate and CryptAPI to enhance the
count of accepting currencies from 5 to 150 in the crytpo setting. I also worked partially on
the binance API integration from frontend side.

Maintenance of client side code to be error free:-

This was one of the most challenging task which was alloted because , in this I had to think
solely as a corporate employee about maintenance and reusability as well as the proper
industry level structuring of the frontend code section.
 CONCLUSION

During this Internship at COOX Online Pvt. Ltd. , I have gained a lot of experience and
knowledge from knowledgable colleagues and senior developers. I have also improved my
skills in various implementation techniques, deployment services and teamwork.

Besides, I also got to know about the organization culture . Creating a financial tech product
is really a big task, apart from just coding it requires a lot of pre and post efforts &
knowledge . Right from identifying the problem, designing our solutions, coding, testing and
maintaining, a CSE student should be known for every aspect of software development. I
find myself lucky to work at a company which is giving me exposure to all this . Overall I
learned a lot and gained a lot of experience.

Working on these technologies helped me realize my strengths as well as my weaknesses

and helped me experience the actual work environment and work culture of industry.

Completing projects here made me realize the importance of testing, following best
practices, and working in a team. The skills I have acquired here will definitely help me in my
career ahead.
 REFERENCES

 HTML 5 – https://www.w3schools.com/html/
 CSS 3 - https://www.w3schools.com/css/
 Javascript - https://www.w3schools.com/js/
 React Js - https://www.w3schools.com/REACT/DEFAULT.ASP
 API - https://www.w3schools.com/js/js_api_intro.asp