Front Page

DECLARATION

I hereby declare that all the work presented in this report is an authentic and original record
of the work done as part of the JAVA DSA. The project, titled Restaurant Menu, was
developed as a part of the curriculum requirement to showcase my understanding and skills
in web development.

The project was designed using JavaScript and CSS to create an interactive and dynamic
digital menu for restaurants. The objective was to develop a user-friendly, responsive, and
visually appealing interface that enhances the customer experience by enabling them to
easily browse through menu items, view detailed descriptions, and make selections in an
efficient manner.

I have adhered to the highest standards of integrity and ethical practices throughout the
course of this project, ensuring that all aspects of the development process, from design to
implementation, are a direct reflection of my personal effort and creativity. By ANKIT
PANDEY from CITY COLLEGE OF MANAGEMENT LUCKNOW, LUCKNOW
UNIVERSITY
 P

ACKNOWLEDGEMENT

I would like to extend my sincere gratitude to everyone who contributed to the success of this
project. This project would not have been possible without the guidance, support, and
encouragement I received from various individuals.

First and foremost, I am deeply grateful to my mentors and instructors, whose expertise and
advice have been invaluable throughout this journey. Their constant support, feedback, and
encouragement helped me stay focused and motivated. I would like to specifically thank Mr.
[Instructor Name], whose constructive criticism and suggestions were instrumental in
refining the technical aspects of the project.

A special thanks to Mr. AMRIT JAISWAL for offering his valuable insights and guidance
during the course of this project. His knowledge and practical advice helped me make key
design and implementation decisions, ensuring the success of the project. His encouragement
in overcoming challenges made a significant impact on the final outcome.

I would also like to thank my colleagues and peers for their constant support and
collaboration. Their camaraderie and willingness to share ideas made the entire process
enjoyable and educational. The teamwork and brainstorming sessions enriched the quality of
the project.

Lastly, I wish to acknowledge the support from my family and friends, whose belief in me
and their constant encouragement allowed me to pursue this project with confidence.
 P

ABSTRACT

The following report enlists the details of the internship carried out in
SHRI BALAJI INFOTECH . SHRI BALAJI INFOTECH is an exceptionally
hybrid venture capital firm that is designed in a way to help entrepreneurs and
start-ups to align their Ideation with real-world scenarios,providing them with
insights of the current market to keep them ahead of the market. Apart from
seed, SHRI BALAJI INFOTECH also provides its in-house startups with well-
versed hands. During my internship, I had the opportunity to work in a fast-
paced, product-centric development environment. Alongside my talented team,
we developed an innovative menu application, focusing on creating a dynamic
and user-friendly interface. We also integrated the TradingView charting
library API to enhance the application's functionality.

All my work helped me experience many domains like teamwork, time

management, work environment, and peer 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.
 PA

CERTIFICATE

Student Name
 PA

TABLE OF CONTENTS
TOPICS PAGE NO

1. INTRODUCTION
1.1. About the company 7
1.2. Vision 7
1.3. Mission 7
1.4. Internship Objectives 8
2. TECHNOLOGY STACK
2 Frontend
.
1
Technologies 8
.

2 Build tool 17
.
2
2 Package 19
. Management
3
2 Development 20
. Environment
4

2 State 22
. Management
5
2 Data Handling 25
.
6
2 Version Control 27
.
7
2 Deployment 29
.
8
 PA

3. Coding 32

4. TASKS AND RESPONSIBILITIES

4.1. Tasks Allotted 36

5. CONCLUSION 37

6. REFERENCES 38
 PA

INTRODUCTION

About the Company

SHRI BALAJI INFOTECH is a leading technology solutions provider dedicated to
delivering innovative and efficient IT services. With a focus on quality and customer
satisfaction, we specialize in developing cutting-edge software solutions that cater to the
diverse needs of our clients. Our team of experienced professionals is committed to
driving digital transformation and helping businesses achieve their goals through
technology.

Some of the technologies we have involved with the product Python, Fast API,
HTML, CSS, Javascript, React.js, jQuery.

Vision
Our vision is to be a global leader in technology solutions, empowering businesses
to thrive in the digital age. We aim to continuously innovate and provide exceptional
value to our clients, fostering a culture of excellence and integrity.

Mission
Our mission is to deliver high-quality, reliable, and cost-effective IT solutions that
enhance our clients' business operations. We strive to build long-term partnerships with
our clients by understanding their unique challenges and providing tailored solutions that
drive success.
 PA

Internship Objectives

1. Understand the Goals and Objectives of the Menu Application Project

- Gain a comprehensive understanding of the project's aims and how it aligns with the
company's overall objectives.

2. Develop a Dynamic Menu Application

- Build a user-friendly menu application using React.js, focusing on efficient state
management and data handling.

3. Integrate APIs for Enhanced Functionality

- Connect the TradingView API to the frontend to provide real-time data visualization and
interactive widgets.

4. Formulate Strategies for Competitive Advantage

- Explore and propose strategies to enhance the application's features and user experience,
positioning it competitively in the market.

5. Learn Professional Ethics and Corporate Teamwork

- Develop an understanding of professional ethics and effective teamwork

TECHNOLOGY STACK

( I ) Frontend Technologies:

React and Its Role in Building User Interfaces

React is a popular JavaScript library for building user interfaces, particularly single-page
applications where me need a fast and interactive user experience. It allows developers to
create large web applications that can update and render efficiently in response to data
changes. React is maintained by Facebook and a community of individual developers
and companies.

Benefits of Using React

1. Component-Based Architecture:

- React encourages a modular approach to building UIs by breaking down the interface into
reusable components. Each component manages its own state and can be composed to form
 PA

complex UIs.

- This architecture promotes reusability, maintainability, and scalability of the codebase.

2. Virtual DOM:

- React uses a virtual DOM to optimize rendering. Instead of directly manipulating the
browser's DOM, React creates a lightweight copy of the DOM in memory.

- When the state of an object changes, React updates the virtual DOM first, then efficiently
updates the real DOM to match the virtual DOM. This minimizes the number of costly DOM
operations and enhances performance.

3. Declarative UI:

- React allows developers to describe what the UI should look like for any given state, and
React takes care of updating the UI when the state changes.

- This declarative approach makes the code more predictable and easier to debug.

Key Features Used in the Project

1. Hooks:

- Hooks are functions that let me use state and other React features without writing a class.
They were introduced in React 16.8.

- In my project, the useState hook is used to manage state within functional components.
For example, in App.jsx, useState is used to manage the state of menu items and categories:

javascript
const [menuItems, setMenuItems] = useState(items);
const [categories, setCategories] = useState(allCategories);

2. JSX:

- JSX is a syntax extension for JavaScript that looks similar to XML or HTML. It allows
me to write HTML elements in JavaScript and place them in the DOM without using
functions like createElement() or appendChild().

- JSX makes it easier to write and add HTML in React, and it is used throughout my
project to define the structure of components.

3. Component Communication:

- Components in React can communicate with each other through props. For example, the
 PA

Menu component receives items as props from the App component and renders each
MenuItem:

javascript
const Menu = ({ items }) => {
return (
<div className='section-center'>
{items.map((menuItem) => {
return <MenuItem key={menuItem.id} {...menuItem} />;
})}
</div>
);
};

4. State Management:

- React's built-in state management is used to handle the dynamic data of the application.
The useState hook is a primary tool for managing state in functional components.

5. Event Handling:

- React provides a consistent interface for handling events in a cross-browser way. In my

project, event handlers are used to filter menu items based on category selection.

By leveraging these features, React enables the development of dynamic and responsive user
interfaces with a clean and maintainable codebase.

What is JSX?

JSX stands for JavaScript XML. It is a syntax extension for JavaScript that allows me to
write HTML-like code within JavaScript. JSX is primarily used with React to describe what
the UI should look like. It makes it easier to create and visualize the structure of the UI
components.

JSX Syntax

JSX syntax is similar to HTML, but it comes with some differences and enhancements:

1. Embedding Expressions: me can embed JavaScript expressions within JSX using curly
braces {}. This allows me to dynamically render content based on the application's state or
props.
 PA

jsx
const name = "John";
const element = <h1>Hello, {name}!</h1>;

2. Attributes: JSX attributes are similar to HTML attributes, but they follow camelCase
naming conventions for consistency with JavaScript. For example, class becomes
className, and onclick becomes onClick
const button = <button className="btn" onClick={handleClick}>Click Me</button>;

3. Self-Closing Tags: Like XML, JSX allows self-closing tags for elements that do not have
children.

const img = <img src="image.jpg" alt="Example" />;

4. JavaScript Logic: me can use JavaScript logic within JSX, such as conditional rendering
and loops, to create dynamic content.

const isLoggedIn = true;

const message = isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>;

Advantages of JSX

1. Readability and Maintainability: JSX allows me to write HTML-like syntax directly

within JavaScript, making the code more readable and maintainable. It provides a clear
structure of the UI components, which is easier to understand and modify.

2. Integration with JavaScript: Since JSX is a syntax extension of JavaScript, it allows

seamless integration of JavaScript logic within the UI code. This makes it easy to
manipulate the DOM based on dynamic data and application state.

3. Component-Based Architecture: JSX fits naturally with React's component-based

architecture. It allows me to define the structure and behavior of components in a single
place, promoting reusability and modularity.
 PA

4. Tooling and Ecosystem: JSX is supported by a rich ecosystem of tools and libraries,
including Babel, which transpiles JSX into standard JavaScript. This ensures compatibility
with all browsers and enhances the development experience with features like syntax
highlighting and error checking.

5. Declarative Nature: JSX encourages a declarative approach to UI development. me

describe what the UI should look like, and React takes care of updating the DOM to match
the desired state. This makes the code more predictable and easier to debug.

Use of CSS for Styling Components

CSS (Cascading Style Sheets) is used to style HTML elements and control the lamet of web
pages. In my project, CSS is used to define the visual appearance of components, ensuring a
consistent and appealing user interface.
Explanation of CSS Variables

CSS variables, also known as custom properties, are entities defined by CSS authors that
contain specific values to be reused throughout a document. They are particularly useful for
maintaining consistency and making it easier to update styles across a project.

Syntax

CSS variables are defined using the -- prefix and are typically declared within a :root
selector to make them globally accessible:

:root {
--primary-100: fef3c7;
--grey-900: 0f172a;
--black: 222;
--shadow-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
 PA

Usage

Once defined, CSS variables can be used throughout my stylesheets by referencing them
with the var() function:

body {
background: var(--backgroundColor);
color: var(--textColor);
}

.btn {
background: var(--primary-500);
border-radius: var(--borderRadius);
box-shadow: var(--shadow-1);
transition: var(--transition);
}

.btn:hover {
background: var(--primary-700);
box-shadow: var(--shadow-3);
}

Advantages of Using CSS Variables

1. Consistency: CSS variables ensure consistent styling across the entire project. By defining
colors, fonts, and other properties as variables, me can easily maintain a uniform look and
feel.

2. Maintainability: Updating a style is straightforward. Changing the value of a CSS variable

in one place will automatically update all instances where it is used, reducing the risk of
errors and inconsistencies.

3. Reusability: CSS variables promote reusability by allowing me to define a style once and
 PA

apply it in multiple places. This is particularly useful for themes and design systems.

4. Dynamic Styling: CSS variables can be manipulated using JavaScript, allowing for
dynamic changes to styles based on user interactions or other conditions.

5. Scoping: While typically defined globally, CSS variables can also be scoped to specific
elements, providing flexibility in how styles are applied.

By leveraging CSS variables, my project achieves a more organized and efficient styling
approach, making it easier to manage and scale as the application grows.

HTML Document Structure

HTML, which stands for HyperText Markup Language, is a markup language used to design
web pages. It combines Hypertext, which defines links between web pages, and a Markup
language, which structures text documents using tags. These tags help machines understand
and manipulate text. HTML is human-readable and uses tags to specify how text should be
displayed.
Here's a breakdown of its structure:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Menu</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
 PA

</html>

Key Components of the HTML Document

1. DOCTYPE Declaration:
- <!DOCTYPE html>: This declaration defines the document type and version of HTML
being used. It ensures that the browser renders the page in standards mode.

2. HTML Element:
- <html lang="en">: The root element of the HTML document. The lang attribute specifies
the language of the document, which is English in this case.

3. Head Section:
- <head>: Contains metadata and links to resources.
- <meta charset="UTF-8" />: Sets the character encoding for the document to UTF-8,
ensuring that it can display a wide range of characters.
- <link rel="icon" type="image/svg+xml" href="/vite.svg" />: Links to the favicon, which
is displayed in the browser tab.
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />: Ensures
the page is responsive by setting the viewport width to the device's width.
- <title>Menu</title>: Sets the title of the document, which appears in the browser tab.

4. Body Section:
- <body>: Contains the content of the document.
- <div id="root"></div>: A placeholder div where the React application is rendered.
React uses this element as the root node for rendering the component tree.
- <script type="module" src="/src/main.jsx"></script>: Includes the main JavaScript file
that bootstraps the React application. The type="module" attribute allows the use of ES6
modules.

Role in the Project

The HTML document serves as the entry point for my React application. Here's how it fits
 PA

into the overall project:

- Bootstrap the React Application: The <div id="root"></div> element is crucial as it acts as
the mounting point for the React component tree. The ReactDOM library targets this
element to render the entire application.

- Responsive Design: The <meta name="viewport"> tag ensures that the application is
responsive and adapts to different screen sizes, providing a better user experience on mobile
devices.

- Resource Linking: The <link rel="icon"> and <script> tags link external resources, such as
the favicon and the main JavaScript file, which are essential for the application's
functionality and branding.

- SEO and Accessibility: The <title> and <meta charset> tags contribute to the document's
SEO and accessibility. The title helps search engines understand the content of the page,
while the charset ensures proper text rendering.

Overall, the HTML document provides the foundational structure necessary for the React
application to function correctly. It sets up the environment for React to take over and
dynamically render the user interface based on the application's state and logic.

( II ) Build Tools

What is Vite?

Vite is a modern build tool and development server designed to provide a fast and efficient
development experience for modern web applications. It was created by Evan me, the
creator of Vue.js, and is particularly well-suited for projects using frameworks like React,
Vue, and others.

Role of Vite as a Build Tool and Development Server

1. Development Server:
- Vite provides a lightning-fast development server that leverages native ES modules in the
 PA

browser. This means that during development, Vite serves my source files directly to the
browser without bundling them first, resulting in a much faster startup time.

2. Build Tool:
- For production, Vite uses Rollup under the hood to bundle my application. This ensures
that my final build is optimized for performance, with features like tree-shaking and code
splitting.

Benefits of Using Vite

1. Fast Hot Module Replacement (HMR):

- Vite offers an incredibly fast HMR, which allows me to see changes in my application
almost instantly as me edit my code. This is achieved by leveraging native ES modules and
only reloading the specific module that has changed, rather than the entire application.

2. Optimized Builds:
- Vite's production build process is highly optimized. It uses Rollup to bundle my
application, which includes features like tree-shaking to remove unused code, and code
splitting to load only the necessary parts of my application when needed.

3. Instant Server Start:

- Unlike traditional bundlers that need to process my entire application before serving it,
Vite starts the development server instantly. This is because it serves files directly from the
file system and only processes them on-demand.

4. Rich Plugin Ecosystem:

- Vite has a rich plugin ecosystem that allows me to extend its functionality. It supports
Rollup plugins, and there are many Vite-specific plugins available for various tasks, such as
integrating with different frameworks or adding support for additional file types.

5. Framework Agnostic:
- While Vite was initially created for Vue.js, it is framework agnostic and works
seamlessly with React, Preact, Svelte, and other modern frameworks. This makes it a
versatile choice for a wide range of projects.

6. Built-in Support for Modern JavaScript Features:

 PA

- Vite supports modern JavaScript features out of the box, including ES6 modules,
dynamic imports, and more. This allows me to write modern code without worrying about
compatibility issues.

7. CSS and Asset Handling:

- Vite provides built-in support for CSS and static assets, allowing me to import CSS files
and assets directly into my JavaScript modules. It also supports CSS modules and PostCSS
out of the box.

( III ) Package Management

What is npm?

npm (Node Package Manager) is a package manager for JavaScript and is the default
package manager for Node.js. It allows developers to install, share, and manage code
packages (libraries or modules) that can be used in their projects. npm provides a vast
ecosystem of open-source packages that can be easily integrated into applications,
facilitating code reuse and speeding up development.

Managing Project Dependencies with npm

1. Installing Packages: me can install packages using the npm install command. By default,
this installs the package as a dependency, which is necessary for the application to run.

2. Versioning: npm allows me to specify the version of a package me want to use. This
ensures consistency across different environments and helps avoid breaking changes.

3. Scripts: npm can run scripts defined in the package.json file, automating tasks like
building, testing, and deploying my application.

4. Package.json: This file is at the heart of npm's functionality. It lists all the dependencies
and devDependencies required for the project, along with other metadata like the project
name, version, and scripts.
 PA

Key Dependencies

- react: This is the core library for building user interfaces. It provides the tools necessary to
create components, manage state, and handle events.

- react-dom: This package provides DOM-specific methods that allow React to interact with
the browser's DOM. It is essential for rendering React components to the web page.

Key devDependencies

- @types/react and @types/react-dom: These are TypeScript type definitions for React and
React DOM. They provide type information for TypeScript projects, ensuring type safety
and better development experience with features like autocompletion and error checking.

- @vitejs/plugin-react: This is a Vite plugin that adds support for React. It enables features
like JSX transformation and fast refresh, which are crucial for a smooth development
experience.

- vite: Vite is a modern build tool and development server that provides fast hot module
replacement and optimized builds. It is used to serve and build the application efficiently.

( IV ) Development Environment

What is Node.js?

Node.js is an open-source, cross-platform runtime environment that allows developers to

execute JavaScript code on the server side. It was created by Ryan Dahl in 2009 and is built
on the V8 JavaScript engine, which is the same engine that powers Google Chrome. Node.js
extends the capabilities of JavaScript beyond the browser, enabling it to be used for server-
side scripting and building scalable network applications.

Key Features of Node.js

 PA

1. Event-Driven Architecture:
- Node.js uses an event-driven, non-blocking I/O model, which makes it lightweight and
efficient. This architecture allows Node.js to handle multiple connections simultaneously
without being blocked by operations like file or network access.

2. Single-Threaded Model:
- Despite being single-threaded, Node.js can handle many concurrent connections thanks
to its event loop and asynchronous nature. This makes it ideal for I/O-heavy operations, such
as web servers and real-time applications.

3. NPM (Node Package Manager):

- Node.js comes with npm, the largest ecosystem of open-source libraries and
packages.Developers can easily share and reuse code, speeding up the development process.

4. Cross-Platform Compatibility:
- Node.js is cross-platform, meaning it can run on various operating systems, including
Windows, macOS, and Linux. This flexibility allows developers to build applications that
work across different environments.

5. Scalability:
- Node.js is designed to build scalable network applications. Its non-blocking I/O and
event-driven architecture allow it to handle a large number of simultaneous connections
efficiently.

Benefits of Using Node.js

1. Full-Stack JavaScript:
- With Node.js, developers can use JavaScript for both client-side and server-side
development, creating a more seamless and consistent development experience.

2. High Performance:
- Node.js is built on the V8 engine, which compiles JavaScript into machine code,
resulting in fast execution. Its non-blocking I/O operations further enhance performance,
especially for applications that require frequent data exchange.
 PA

3. Rich Ecosystem:
- The npm ecosystem provides access to thousands of libraries and tools that can be easily
integrated into Node.js applications, reducing development time and effort.

4. Real-Time Applications:
- Node.js is well-suited for building real-time applications, such as chat applications and
online gaming, due to its ability to handle multiple connections with low latency.

5. Microservices Architecture:
- Node.js is often used in microservices architecture, where applications are broken down
into smaller, independent services. This approach enhances scalability and maintainability.

Example Use Cases

- Web Servers: Node.js is commonly used to build web servers that handle HTTP requests
and serve web pages or APIs.
- Real-Time Applications: Applications like chat apps, online gaming, and collaborative
tools benefit from Node.js's real-time capabilities.
- API Services: Node.js is used to create RESTful APIs that can handle a large number of
requests efficiently.
- Command-Line Tools: Developers use Node.js to build command-line tools and scripts for
automation and task management.

( V ) State Management

React State Management with useState

In React, state management is crucial for creating dynamic and interactive user interfaces.
The useState hook is a fundamental tool for managing state in functional components. It
allows me to add state to my components without needing to convert them into class
components.

How useState Works

 PA

The useState hook is used to declare state variables in a functional component. It returns an
array with two elements: the current state value and a function to update that state. Here's the
basic syntax:

javascript
const [state, setState] = useState(initialState);

- state: The current state value.

- setState: A function that updates the state value.
- initialState: The initial value of the state.

State Management Strategy in my Project

In my project, the useState hook is used extensively to manage the state of menu items and
categories. Here's a detailed explanation of how state management is implemented:

1. Managing Menu Items

In the App.jsx component, the menu items data is set up as a state variable using useState.
This allows the application to dynamically update the displayed menu items based on user
interactions, such as filtering by category.

const [menuItems, setMenuItems] = useState(items);

- menuItems: Holds the current list of menu items to be displayed.
- setMenuItems: Updates the list of menu items, for example, when a category filter is
applied.

2. Managing Categories

Similarly, the categories are managed as a state variable. This includes all unique categories
derived from the menu items, plus an "all" category to display all items.
const [categories, setCategories] = useState(allCategories);
 PA

- categories: Contains the list of unique categories.

- setCategories: Although not explicitly used in the provided code, it allows for potential
updates to the categories list if needed.

Benefits of Using useState

1. Simplicity: useState is easy to use and understand, making it a great choice for managing
local component state.
2. Reactivity: When the state changes, React automatically re-renders the component,
ensuring the UI is always in sync with the state.
3. Encapsulation: State is encapsulated within the component, promoting modularity and
reusability.
( VI ) Data Handling

Data Import and Management

In your project, data handling is centered around importing and managing menu items, which
are represented as an array of objects. This data is crucial for rendering the menu and
enabling user interactions such as filtering by category.

Use of JavaScript Arrays and Objects

Arrays

The menu items are stored in an array, which allows for easy iteration and manipulation.
Arrays are ideal for representing lists of data, and in this case, they enable the application to
render each menu item dynamically.

Objects

Each menu item is represented as an object with specific properties:

- id: A unique identifier for the menu item.

- title: The name of the menu item.

- category: The category to which the menu item belongs (e.g., breakfast, lunch).
 PA

- price: The cost of the menu item.

- img: The URL of the image representing the menu item.

- desc: A description of the menu item.

These objects provide a structured way to store and access the data needed to render each
menu item in the UI.

Rendering and Filtering

The Menu.jsx component receives the menuItems state as a prop and iterates over it using the
map method to render each MenuItem component:

const Menu = ({ items }) => {

return (

<div className='section-center'>

{items.map((menuItem) => {

return <MenuItem key={menuItem.id} {...menuItem} />;

})}

</div>

);

};

The filterItems function in App.jsx allows users to filter menu items by category. It updates
the menuItems state based on the selected category:

const filterItems = (category) => {

if (category === 'all') {

setMenuItems(items);

return;

}
 PA

const newItems = items.filter((item) => item.category === category);

setMenuItems(newItems);

};

( VII )Version Control

Git for Version Control

Git is a distributed version control system that allows multiple developers to work on a
project simultaneously without overwriting each other's changes. It tracks changes to files
and directories over time, enabling you to revert to previous versions if needed. Git is
widely used in software development due to its efficiency, reliability, and support for non-
linear development.

Branching Strategy

A branching strategy is a crucial aspect of using Git effectively. It defines how branches are
used in a project to manage features, bug fixes, and releases. Here are some common
branching strategies:

1. Feature Branching:
- Each new feature is developed in its own branch, which is created from the main branch
(often main or master). This allows developers to work on features independently without
affecting the main codebase.
- Once the feature is complete and tested, the branch is merged back into the main branch.

2. Git Flow:
- Git Flow is a popular branching model that uses two main branches: master and
develop.
- Feature branches are created from develop and merged back into develop once
complete.
 PA

- Release branches are created from develop when preparing for a new release. After
testing, they are merged into both master and develop.
- Hotfix branches are created from master to quickly address critical issues in production.
They are merged back into both master and develop.

3. GitHub Flow:
- A simpler model suitable for continuous deployment.
- All changes are made in feature branches, which are created from main.
- Once a feature is ready, a pull request is opened for review. After approval, the branch
is merged into main.

4. Trunk-Based Development:
- Developers work directly on a single branch (often main), with short-lived feature
branches for specific tasks.
- Changes are integrated frequently, promoting continuous integration and reducing
merge conflicts.

Collaboration Workflow

Effective collaboration in Git involves several practices to ensure smooth teamwork and
code integration:

1. Pull Requests (PRs):

- Developers create pull requests to propose changes to the codebase. PRs allow team
members to review and discuss changes before merging them into the main branch.
- PRs often include automated checks, such as tests and code quality analysis, to ensure
the changes meet project standards.

2. Code Reviews:
- Code reviews are an essential part of the collaboration workflow. They help maintain
code quality, share knowledge among team members, and catch potential issues early.
- Reviewers provide feedback, and developers address any comments before the PR is
 PA

merged.

3. Continuous Integration (CI):

- CI systems automatically build and test code changes whenever a new commit is pushed
to a branch. This ensures that the codebase remains stable and that new changes do not
introduce bugs.
- CI is often integrated with PRs to run tests and checks before merging.

4. Branch Protection:
- Branch protection rules can be set up to prevent direct pushes to critical branches like
main. This ensures that all changes go through the PR process and are reviewed before
integration.

5. Rebasing and Merging:

- Developers may use rebasing to keep their feature branches up-to-date with the main
branch, reducing merge conflicts.
- Merging combines changes from different branches. It can be done as a fast-forward
merge or with a merge commit, depending on the project's preferences.

Using Git for version control, along with a well-defined branching strategy and
collaboration workflow, enhances team productivity and code quality. It allows developers
to work concurrently, manage changes efficiently, and ensure a stable and reliable
codebase. By adopting practices like feature branching, pull requests, and continuous
integration, teams can streamline their development process and deliver high-quality
software.

( VIII ) Deployment

Deployment Strategies

Deployment strategies refer to the methods used to release new versions of software to
 PA

production environments. Here are some common strategies:

1. Blue-Green Deployment:
- Involves maintaining two identical environments: Blue (current production) and Green
(new version).
- Traffic is switched from Blue to Green once the new version is tested and ready.
- Allows for quick rollback by switching back to the Blue environment if issues arise.

2. Canary Deployment:
- Gradually rolls out the new version to a small subset of users before a full release.
- Monitors the performance and stability of the new version, allowing for adjustments or
rollback if necessary.

3. Rolling Deployment:
- Updates the application in phases, replacing old versions with new ones incrementally.
- Ensures that the application remains available during the update process.

4. A/B Testing:
- Similar to Canary, but specifically used for testing different versions of a feature to
determine which performs better.
- Users are split into groups, each experiencing a different version.

5. Recreate Deployment:
- Stops the current version and deploys the new version.
- Simple but involves downtime during the deployment process.

Deployment Environments

Deployment environments are stages where applications are deployed for testing and
production purposes:

1. Development Environment:
 PA

- Used by developers to build and test new features.

- Frequent changes and updates occur here.

2. Staging Environment:
- A replica of the production environment used for final testing before release.
- Ensures that the application behaves as expected in a production-like setting.

3. Production Environment:
- The live environment where the application is accessible to end-users.
- Requires careful monitoring and maintenance to ensure uptime and performance.

Tools and Services for Deployment

Several tools and services facilitate the deployment of web applications, offering features
like continuous integration, automatic builds, and easy rollbacks. Here are two popular
options:

1. Netlify:
- A cloud platform for deploying static sites and serverless functions.
- Offers features like continuous deployment from Git, custom domains, HTTPS, and
serverless functions.
- Automatically builds and deploys your site whenever you push changes to your Git
repository.

2. Vercel:
- A platform optimized for frontend frameworks and static sites, with built-in support for
serverless functions.
- Provides features like automatic deployments, preview URLs for pull requests, and
integration with popular frameworks like Next.js.
- Focuses on performance and scalability, making it ideal for modern web applications.

Example Configuration
 PA

For a React project using Vite, you might configure deployment with Vercel as follows:

1. Connect Repository: Link your GitHub, GitLab, or Bitbucket repository to Vercel.

2. Configure Build Settings: Specify the build command (vite build) and output directory
(dist).
3. Deploy: Vercel automatically builds and deploys your application whenever you push
changes to the connected branch.

Coding
Index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Menu</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>

App.jsx

import React, { useState } from 'react';

import Menu from './Menu';
import Categories from './Categories';
import Title from './Title';
import items from './data';
const allCategories = ['all', ...new Set(items.map((item) => item.category))];

function App() {
const [menuItems, setMenuItems] = useState(items);
const [categories, setCategories] = useState(allCategories);

const filterItems = (category) => {

if (category === 'all') {
 PA

setMenuItems(items);
return;
}
const newItems = items.filter((item) => item.category === category);
setMenuItems(newItems);
};

return (
<main>
<section className='menu'>
<Title text='our menu' />
<Categories categories={categories} filterItems={filterItems} />
<Menu items={menuItems} />
</section>
</main>
);
}

export default App;

Categories.jsx

import React from 'react';

const Categories = ({ categories, filterItems }) => {

return (
<div className='btn-container'>
{categories.map((category) => {
return (
<button
type='button'
className='btn'
key={category}
onClick={() => filterItems(category)}
>
{category}
</button>
);
})}
</div>
);
};

export default Categories;

main.jsx
 PA

import React from 'react'

import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)

Menu.jsx

import React from 'react';

import MenuItem from './MenuItem';

const Menu = ({ items }) => {

return (
<div className='section-center'>
{items.map((menuItem) => {
return <MenuItem key={menuItem.id} {...menuItem} />;
})}
</div>
);
};

export default Menu;

Menultem.jsx

const MenuItem = ({ img, title, price, desc }) => {

return (
<article className='menu-item'>
<img src={img} alt={title} className='img' />
<div className='item-info'>
<header>
<h5>{title}</h5>
<span className='item-price'>${price}</span>
</header>
<p className='item-text'>{desc}</p>
</div>
</article>
);
};
export default MenuItem;
 PA

Title.jsx

const Title = ({ text }) => {

return (
<div className='title'>
<h2>{text}</h2>
<div className='title-underline'></div>
</div>
);
};
export default Title
 PA

TASKS AND RESPONSIBILITIES

Tasks Allotted

1. Client-Side Development of the Project

2. Integration of Various APIs and Connecting Frontend to Backend

3. Maintenance of Client-Side Code to Ensure Error-Free Operation

Client-Side Development of the Project

In my initial task during the internship, I was responsible for building the client-side of the
menu application from scratch. I utilized HTML, CSS, and JavaScript to construct the
frontend, ensuring that the code adhered to industry standards and emphasized reusability.
I also employed CSS frameworks such as Bootstrap and Neumorphism, along with the
JavaScript framework React.js. For the login and signup features, I implemented two-
factor authentication and OAuth, and addressed the complexities of managing JWT tokens
for user sessions.

Integration of Various APIs and Connecting Frontend to Backend

The second task involved integrating various APIs. I implemented the TradingView
charting library APIs to generate essential widgets. Our team also worked on integrating
payment APIs from Coingate and CryptAPI, expanding the range of accepted
cryptocurrencies from 5 to 150. Additionally, I contributed to the frontend integration of
the Binance API.

Maintenance of Client-Side Code to Ensure Error-Free Operation

This task was particularly challenging as it required a corporate mindset focused on

maintenance, reusability, and proper industry-level structuring of the frontend code. I
collaborated with another team dedicated to code maintenance, which helped me
understand corporate norms and best practices for maintaining a clean and efficient
codebase.
 PA

CONCLUSION
During my internship at Logicalloops, I have significantly expanded my knowledge and
skills, thanks to the guidance of knowledgeable colleagues and senior developers. This
experience has enhanced my proficiency in various implementation techniques,
deployment services, and teamwork.

Working on the menu application project has provided me with a comprehensive

understanding of the organizational culture and the intricacies involved in creating a tech
product. Developing a financial tech product is a complex task that extends beyond
coding; it requires extensive pre- and post-development efforts and knowledge. From
problem identification to solution design, coding, testing, and maintenance, a Computer
Science student must be well-versed in every aspect of software development. I feel
fortunate to have worked at a company that offers exposure to all these facets.

This project has helped me identify my strengths and weaknesses, allowing me to

experience the real-world work environment and industry culture. Completing this
project has underscored the importance of testing, adhering to best practices, and
collaborating effectively within a team. The skills and insights I have gained here will
undoubtedly be invaluable in my future career endeavors.

Overall, I have learned a great deal and gained substantial experience, which will serve
as a solid foundation for my professional growth.

REFERENCES
[1] Github - https://github.com/

[2] React.js - https://reactjs.org/docs/getting-started.html

PA