HARCOURT BUTLER TECHNICAL UNIVERSITY

NAWABGANJ, KANPUR

SUMMER INTERNSHIP REPORT- 2024

Xzect Labs Private Limited

Submitted By Internship Supervisor

Tanisha Misra Mr. Sandeep Kapri

Final ET (210106067) Director
 Table of Contents

1. Preface

2. About

3. Domain of Internship

4. Project

5.Experience

6. Conclusion

7. Acknowledgement

8. Certificate
 PREFACE

As I reflect on my time at Xzect Labs Private Limited, I am filled with a

sense of accomplishment and gratitude. My internship at this innovative
firm provided me with invaluable experience in the realm of full-stack
development, particularly focusing on AI-driven technologies and
cutting-edge web frameworks.

During my tenure at Xzect Labs, I had the opportunity to work on several

exciting projects, the most notable being the development of an AI
chatbot utilizing the ChatGPT API. This project not only honed my skills
in integrating advanced AI functionalities but also deepened my
understanding of how artificial intelligence can enhance user
interactions. Employing Next.js and Node.js for this project allowed me
to explore the seamless interplay between server-side and client-side
technologies, contributing to a robust and dynamic application.

Additionally, my role involved creating and refining React.js frontend

templates, which provided me with hands-on experience in building
intuitive and responsive user interfaces. Working with React.js allowed
me to implement complex features with efficiency and maintainability,
further solidifying my front-end development skills.

The guidance and support from the talented team at Xzect Labs were
instrumental in my learning journey. Their mentorship enabled me to
navigate challenges, develop practical solutions, and gain a deeper
appreciation for the intricacies of full-stack development.

This report documents the projects I undertook, the skills I developed,

and the insights I gained during my internship. I hope that it reflects not
only the technical accomplishments but also the personal growth I
experienced throughout this transformative period.

I am deeply thankful for the opportunity provided by Xzect Labs and

look forward to applying the knowledge and skills gained here to future
endeavours in the field of software development.
 ACKNOWLEDGEMENT

I would like to extend my heartfelt gratitude to everyone who supported and

guided me throughout my internship at Xzect Labs Private Limited. This
experience has been incredibly rewarding, and it would not have been possible
without the contributions of several key individuals.

Firstly, I am deeply thankful to my supervisor, Mr. Sandeep Kapri,

whose invaluable guidance and encouragement were instrumental in
navigating the complexities of my projects. Their insights and constructive
feedback not only helped me grow as a developer but also inspired me to push
the boundaries of my capabilities.

I am also grateful to the entire team at Xzect Labs for their unwavering
support and collaboration. Working alongside such talented and dedicated
professionals provided me with a stimulating environment where I could learn
and contribute meaningfully. The camaraderie and teamwork experienced
here have been truly inspiring.

A special thanks goes to the Web Development team for their assistance with
the AI chatbot project and the React.js frontend templates. Their
expertise and willingness to share knowledge were invaluable in overcoming
challenges and achieving project milestones.

Additionally, I would like to acknowledge my academic mentors and advisors

at HBTU for their continued support and encouragement throughout my
internship. Their academic insights and advice have been essential in bridging
the gap between theoretical knowledge and practical application.

Lastly, I wish to express my gratitude to my family and friends for their

constant encouragement and support during this journey. Their belief in my
abilities and their patience were a source of motivation throughout this
internship.

Thank you all for contributing to a memorable and educational experience.

Your support has been pivotal in my development as a full-stack developer,
and I look forward to applying the knowledge and skills gained in future
endeavours.
 About Xzect Labs

Xzect Labs Pvt. Ltd. is a forward-thinking technology company dedicated

to turning visions into reality through a broad spectrum of services. The
company excels in various domains, including software development,
website design and SEO, and cloud services. Their expertise
encompasses cutting-edge fields such as robotics and automation, 3D
printing and prototyping, data science and analytics, artificial
intelligence (AI) and machine learning, Internet of Things (IoT),
augmented reality (AR) and virtual reality (VR), blockchain technology,
and tech consultancy.

At Xzect Labs, a team of skilled professionals is committed to supporting

businesses and individuals in the design and development of innovative
products. They specialize in exploring advanced robotics and automation
solutions while addressing a wide range of technology-related needs. The
company is known for delivering tailored, comprehensive solutions that
cater to specific industry requirements, including eCommerce,
healthcare, finance, education, social networking, agriculture, travel and
logistics, restaurants, and real estate.

Beyond their core services, Xzect Labs offers specialized courses in

Full Stack Development, UI/UX, Data Science, and Robotics.
These courses are designed to equip individuals with the skills necessary
to thrive in today’s technology-driven landscape. The company also
provides valuable resources through webinars, blogs, and open-source
projects available on platforms like GitHub and YouTube, demonstrating
their commitment to knowledge sharing and community engagement.

Xzect Labs Pvt. Ltd. remains at the forefront of technological innovation,

continually exploring new frontiers and striving to offer exceptional
service and support to their clients and partners.
Services
​ Software & App Development
​ Website Development & SEO
​ Cloud Services
​ Robotics & Automation
​ 3D Printing & prototyping
​ Data Science & Analytics
​ AI & Machine Learning
​ IOT, AR & VR
​ Blockchain
​ Tech Consultancy
​ Research & Development

Industries
​ eCommerce
​ Hyperlocal
​ Healthcare
​ Finance
​ Education
​ Social Networking
​ Agriculture
​ Travel & Logistics
​ Restaurant
​ Real Estate

Courses
​ All Courses
​ Full Stack Development
​ UI/UX
​ Data Science
​ Robotics
 Domain of Internship

Web development encompasses the tasks involved in creating, designing,

and maintaining websites and web applications. It typically involves several
layers, including front-end (client-side) development, back-end (server-side)
development, and database management. The primary goal is to deliver a
seamless, efficient, and user-friendly experience through dynamic and
interactive web applications.

Full-stack developers are proficient in both client-side and server-side

programming and understand how to integrate the two to create cohesive and
efficient applications.

➔ Front-End Technologies
Languages:

● HTML (HyperText Markup Language):

○ Usage: The standard markup language used to create and
structure content on the web.
○ Features: Defines elements like headings, paragraphs, links,
images, and forms.
● CSS (Cascading Style Sheets):
○ Usage: Styles and layouts HTML elements.
○ Features: Includes properties for colours, fonts, spacing, and
positioning. CSS frameworks like Bootstrap and Tailwind
CSS simplify styling and layout.
● JavaScript:
○ Usage: Adds interactivity and dynamic behaviour to web
pages.
○ Features: Supports manipulation of the DOM (Document
Object Model), event handling, and asynchronous operations
(e.g., AJAX).

Front-End Frameworks and Libraries:

● React:
 ○ Usage: A JavaScript library for building user interfaces,
particularly single-page applications (SPAs).
○ Features: Component-based architecture, virtual DOM for
efficient rendering, and a rich ecosystem of tools and
extensions.

Next.js is a popular open-source framework built on top of React, a

widely used JavaScript library for building user interfaces. It is designed
to enhance the capabilities of React by offering features such as:

● Server-Side Rendering (SSR): Next.js enables pages to be

rendered on the server before being sent to the client, which
improves performance and SEO (Search Engine Optimization).
● Static Site Generation (SSG): It allows for the generation of static
HTML pages at build time, which can be served quickly to users.
● API Routes: Next.js can handle backend logic through API routes,
allowing for server-side functionality within the same project.
● Automatic Code Splitting: It optimizes load times by splitting code
into smaller bundles that are loaded on demand.
● Built-In CSS and Sass Support: Facilitates styling without the need
for additional configuration.

● Angular:
○ Usage: A comprehensive front-end framework developed by
Google for building dynamic web applications.
○ Features: Two-way data binding, dependency injection, and
a modular architecture.
● Vue.js:
○ Usage: A progressive JavaScript framework for building user
interfaces and single-page applications.
○ Features: Reactive data binding, component-based
architecture, and ease of integration.
● Svelte:
○ Usage: A relatively new framework that shifts much of the
work to compile time, generating highly optimized JavaScript.
 ○ Features: Reactivity built into the language, less runtime
overhead, and straightforward syntax.

➔ Back-End Technologies
The back-end of a web application is responsible for server-side logic,
database interactions, authentication, and application infrastructure.

Languages:

● JavaScript (Node.js):
○ Usage: Enables JavaScript to be used for server-side
programming.
○ Features: Event-driven, non-blocking I/O model, and a large
ecosystem via npm (Node Package Manager).
● Python:
○ Usage: A versatile language used for server-side
development with frameworks like Django and Flask.
○ Features: Easy to learn and write, extensive libraries, and
strong support for scientific computing and data analysis.
● Java:
○ Usage: Used in enterprise environments and large-scale
applications, often with frameworks like Spring Boot.
○ Features: Strong performance, cross-platform capabilities,
and extensive libraries and frameworks.
● Ruby:
○ Usage: Known for its simplicity and productivity, primarily
used with the Ruby on Rails framework.
○ Features: Emphasizes convention over configuration and
provides a clean syntax.
● PHP:
○ Usage: A server-side scripting language widely used for web
development.
○ Features: Embedded in HTML, integrates well with
databases like MySQL, and has a large ecosystem of
libraries and frameworks.
Back-End Frameworks:

● Express.js:
○ Usage: A minimal and flexible Node.js web application
framework.
○ Features: Simplifies the process of building server-side logic
and RESTful APIs, with a focus on simplicity and
performance.
● Django:
○ Usage: A high-level Python web framework that encourages
rapid development and clean, pragmatic design.
○ Features: Includes an ORM (Object-Relational Mapping),
built-in admin interface, and robust security features.
● Flask:
○ Usage: A lightweight Python web framework that provides
the essentials for web development without much overhead.
○ Features: Minimalist approach, modular design, and
extensive extensions for adding features.
● Spring Boot:
○ Usage: A framework for Java that simplifies the process of
creating production-ready applications.
○ Features: Convention over configuration, embedded servers,
and comprehensive support for enterprise applications.
● Ruby on Rails:
○ Usage: A Ruby-based framework that emphasizes
convention over configuration and rapid development.
○ Features: Built-in ORM (ActiveRecord), scaffolding, and a
strong focus on best practices.

➔ APIs (Application Programming Interfaces)

APIs are a set of rules and protocols that allow different software
applications to communicate with each other. In web development, APIs
are crucial for enabling interactions between the front-end and back-end
of a web application. They allow developers to:
 ● Access and manipulate data: APIs enable web applications to
interact with databases, external services, and other systems.
● Integrate third-party services: For example, integrating payment
gateways, social media login, or mapping services.
● Enhance functionality: By connecting with other services or
systems, APIs can extend the capabilities of a web application.

APIs can be categorized into various types, such as REST

(Representational State Transfer), SOAP (Simple Object Access
Protocol), and GraphQL. Each type has its own conventions and use
cases.

➔ Database Technologies
Databases store and manage application data. Full-stack developers
need to understand both relational (SQL) and non-relational (NoSQL)
databases.

Relational Databases (SQL):

● MySQL:
● PostgreSQL:
● SQLite:

Non-Relational Databases (NoSQL):

● MongoDB
● Cassandra
● Redis
 Projects

During my internship of two months I primarily worked on

two projects and their deployment on Github and Vercel.

In my first project, I was tasked with designing a dynamic and

responsive web template for a third-party client using HTML, CSS,
and Next.js. The goal was to create a versatile and visually
appealing template that could be easily customized to meet various
client requirements. Leveraging HTML and CSS, I focused on
crafting a clean, user-friendly layout with a modern aesthetic. I
utilized Next.js to enhance the template’s performance and
scalability, taking advantage of its server-side rendering capabilities
to ensure fast load times and improved SEO. The template featured
a modular design, allowing for easy updates and integration of
additional components. Through this project, I gained valuable
experience in creating adaptable designs and optimizing front-end
performance.

My second project involved developing an AI chatbot using

Next.js and Node.js. This project aimed to create an intelligent
conversational agent capable of handling user inquiries and
providing useful responses. I employed Node.js to build the
server-side logic, managing API requests and integrating natural
language processing (NLP) services to enable the chatbot’s
conversational capabilities. Next.js was used to develop the
front-end interface of the chatbot, ensuring a seamless and
interactive user experience. The chatbot was designed to handle
various intents, maintain conversation context, and integrate with
external data sources to deliver accurate information. This project
enhanced my skills in AI integration and real-time application
development, demonstrating how modern technologies can be
combined to create effective and engaging user interactions.
 ➔ Project one-

AI image generation Template-

A template is a pre-designed set of files and components that

include the layout, styling, and sometimes functionality of a web
page or application. It provides a starting point that developers can
modify and extend to create a fully functional and personalized
website or application.

● Templates are often used as a base for building both static

and dynamic websites. For instance, a developer might use a
template to quickly set up the structure of a website and then
integrate additional features, content, and custom styling.

By using templates, developers can streamline their workflow,

ensure consistency, and focus more on adding unique functionality
and content to their projects.

Work allotted / Objective of project -

"The primary objective of this project was to design and develop a

frontend template for an AI image generation platform that catered
to the specific needs of a third-party client. This involved creating a
user interface (UI) that was not only aesthetically pleasing but also
highly functional and intuitive. The goal was to ensure that users of
varying technical backgrounds could easily interact with the
platform, generate images using AI, and customize their experience
without unnecessary complexity.

Key considerations included:

1. User Experience (UX): Ensuring that the navigation,

layout, and overall flow of the platform were intuitive and
user-friendly. This meant prioritizing ease of use, with clear
 instructions and a logical progression of steps for generating
images.
2. Visual Design: Crafting a modern, professional, and visually
cohesive design that aligned with the client’s brand identity.
This included selecting appropriate color schemes,
typography, and graphical elements that enhanced the overall
aesthetic appeal.
3. Responsiveness: Developing a template that was fully
responsive, meaning it would function effectively across
various devices and screen sizes, from desktops to
smartphones.
4. Performance: Ensuring the frontend was optimized for
speed and efficiency, with fast load times and smooth
performance, to enhance user satisfaction.
5. Integration Readiness: Designing the frontend in a way
that it could easily be integrated with the backend AI systems
and other necessary APIs, ensuring seamless functionality and
data flow.

This project was a key deliverable during my internship at Xzect

Labs, where I applied my skills in web development and design
to create a product that met the client’s expectations and
provided a solid foundation for their AI image generation
platform."
Some glimpses of the project-

The header and AI image generator tool box

The Contact us and footer box

The Subscription menu for frequent users -.

The moving user review tab

 ➔Project two-

Project Description:

In my second project, I developed a fully functional AI chatbot

using Next.js, Node.js, and the ChatGPT API. The objective was to
create an intelligent conversational agent capable of engaging with
users in real-time, providing meaningful and context-aware
responses.

Objective-

The objective of this project was to develop a fully functional AI

chatbot interface named 'Cropify,' designed to provide real-time
market trends, crop prices, and farming advice to users in the
agricultural sector. The chatbot was built using Next.js for the
frontend and Node.js for the backend, with the ChatGPT API
powering the conversational capabilities. The project aimed to
create an intuitive, user-friendly interface that allows users to easily
access valuable agricultural information, enhancing
decision-making and productivity. The application was deployed on
Vercel, ensuring reliable performance and accessibility.

Key components of the project included:

1. Frontend Development (Next.js): I chose Next.js for its

performance benefits, including server-side rendering and API
route support, which ensured that the chatbot was responsive
and could handle user interactions smoothly. The UI was
designed to be clean and intuitive, offering users an easy way
to start conversations, ask questions, and receive answers.
2. Backend Development (Node.js): The backend was
developed using Node.js, which served as the foundation for
managing API requests and handling data processing. Node.js
was chosen for its non-blocking, event-driven architecture,
making it ideal for building a real-time application like a
chatbot. The backend was responsible for:
○ API Management: Handling API requests to the
ChatGPT API, processing user inputs, and returning
generated responses.
○ Session Management: Managing user sessions to
maintain the context of conversations, allowing the
chatbot to provide more accurate and coherent
responses.
○ Data Handling: Ensuring secure and efficient handling
of data, including user queries and API responses, while
maintaining the integrity and privacy of the data.
3. ChatGPT API Integration: The core conversational
functionality was powered by the ChatGPT API. I implemented
the integration within the Node.js backend, ensuring seamless
communication between the frontend and the AI model. This
involved crafting API requests, managing tokens, and
optimizing the data exchange process to minimize latency.

4. Deployment on Vercel: After developing the application, I

deployed it on Vercel. Vercel’s seamless integration with
Next.js and its powerful features, like automatic scaling and
zero-downtime deployment, made it the ideal choice for
hosting the chatbot. This ensured that the application was live,
accessible, and reliable.

5. Testing and Optimization: Comprehensive testing was

conducted to ensure that the chatbot was functioning as
 expected, with a focus on performance, response accuracy,
and user experience. I also worked on optimizing both the
frontend and backend to improve speed and reduce latency.

This project demonstrated my ability to develop a full-stack web

application, combining modern frontend frameworks with a robust
backend infrastructure to create a sophisticated AI-driven solution.

A glimpse of the Project

 Experience and Conclusion
My internship at Xzect Labs has been an invaluable experience,
offering me the opportunity to apply my theoretical knowledge to
real-world projects and develop my technical skills in web
development and AI integration. Over the course of my internship, I
worked on two significant projects:

1. AI Image Generation Frontend Template: I developed a

user-friendly frontend template for an AI image generation
platform, focusing on delivering an intuitive user experience.
This project allowed me to refine my skills in UI/UX design and
frontend development.
2. Cropify AI Chatbot: I created a fully functional AI chatbot
named Cropify, aimed at providing real-time agricultural
insights to users. This project involved using Next.js for the
frontend, Node.js for the backend, and the ChatGPT API for
conversational capabilities. The application was successfully
deployed on Vercel, ensuring high availability and
performance.

Throughout these projects, I gained hands-on experience with

modern web development frameworks and deepened my
understanding of integrating AI into web applications. Working in a
professional environment allowed me to enhance my
problem-solving abilities, collaborate effectively with team
members, and adapt to new challenges quickly.

I would like to express my sincere gratitude to the entire team at

Xzect Labs for their guidance and support during my internship.
Their mentorship has been instrumental in my growth as a
developer and has provided me with insights that will be valuable in
my future career.

This internship has solidified my passion for software development

and AI, and I am excited to continue exploring these fields in my
future endeavors.
Certificate of Internship