VISVESVARAYA TECHNOLOGICAL UNIVERSITY

"JNANA SANGAMA", MACHHE, BELAGAVI-590018

Industry Internship Report

On

LLM Based Code Assistance Website

Submitted in partial fulfillment of the requirements for the VII-VIII semester

Bachelor of Engineering
in
Information Science and Engineering of
Visvesvaraya Technological University, Belagavi by
GURUPRASADH G V
(1CD21IS049)

Under the Guidance of

Prof. Sudarsanan D Prof. K Navya
Assistant Professor Dept. of ISE Assistant Professor Dept. of ISE

Department of Information Science and Engineering

CAMBRIDGE INSTITUTE OF TECHNOLOGY, BANGALORE-560 036
K.R. PURAM, BANGALORE – 560 036, Ph: 080-2561 8798 / 2561 8799
Fax: 080-2561 8789, email: principal@cambridge.edu.in
Affiliated to VTU, Belagavi| Approved by AICTE, New Delhi| NAAC A+ & NBA Accredited|
UGC 2(f) Certified| Recognized by Govt. of Karnataka
2024-2025
CAMBRIDGE INSTITUTE OF TECHNOLOGY, BANGALORE-560 036
K.R. PURAM, BANGALORE – 560 036, Ph: 080-2561 8798 / 2561 8799
 Fax: 080-2561 8789, email: principal@cambridge.edu.in
Affiliated to VTU, Belagavi| Approved by AICTE, New Delhi| NAAC A+ & NBA Accredited|
UGC 2(f) Certified| Recognized by Govt. of Karnataka

DEPARTMENT OF INFORMATION SCIENCE & ENGINEERING

CERTIFICATE

Certified that Mr. Guruprasadh G V bearing USN 1CD21IS049, a bonafide student of Cambridge
Institute of Technology, has successfully completed the Industry Internship Report entitled LLM
Based Code Assistance Website in partial fulfillment of the requirements for VIII semester
Bachelor of Engineering in Information Science and Engineering of Visvesvaraya Technological
University, Belagavi during academic year 2024-2025. It is certified that all
Corrections/Suggestions indicated for Internal Assessment have been incorporated in the report
deposited in the departmental library. The Internship report has been approved as it satisfies the
academic requirements prescribed for the Bachelor of Engineering degree.

Internship Coordinator, Head of the Department,

Prof. Sudarsanan D Dr. Preethi S,
Prof. Karangule Navya Dept. of ISE, CITech
Dept. of ISE, CITech
 ACKNOWLEDGEMENT

I would like to place on record my deep sense of gratitude to Shri. D. K. Mohan, Chairman,
Cambridge Group of Institutions, Bangalore, India for providing excellent Infrastructure and

Academic Environment at CITech without which this work would not have been possible.

I am extremely thankful to Dr. G. Indumathi, Principal, CITech, Bangalore, for providing me the
academic ambience and everlasting motivation to carry out this work and shaping our careers.

I express my sincere gratitude to Dr. Preethi S, HOD, Dept. of Information Science and
Engineering, CITech, Bangalore, for her stimulating guidance, continuous encouragement and
motivation throughout the course of present work.

I also wish to extend my thanks to Internship Coordinator, Prof. Sudarsanan D, Assistant Professor,
Prof. Karangula Navya Assistant Professor Dept. of ISE, CITech, Bangalore for the critical,
insightful comments, guidance and constructive suggestions to improve the quality of this work.

Finally to all my friends, classmates who always stood by me in difficult situations also helped me
in some technical aspects and last but not the least, I wish to express deepest sense of gratitude to
my parents who were a constant source of encouragement and stood by me as pillar of strength for
completing this work successfully.

Guruprasadh G V

i
 ABSTRACT
During my internship as a Data Analyst Intern, I gained valuable insights into recommendation
systems, exploring their underlying algorithms, types, and real-world applications across various
industries. I conducted research on collaborative filtering, content-based filtering, and hybrid
models, and analyzed how they contribute to enhancing user experience. In addition to technical
learning, I acquired hands-on experience with Agile software development methodologies, actively
participating in sprints and team stand-ups. This exposure helped me understand the importance of
iterative development, continuous feedback, and team collaboration in a fast-paced environment.
I also familiarized myself with Agile project management tools like Jira, using them to track tasks,
manage workflows, and contribute to sprint planning. Throughout the internship, I collaborated
closely with the development and analytics teams, gaining a comprehensive view of industry-
standard practices in data-driven solution development. This experience significantly strengthened
both my technical and teamwork skills, preparing me for future roles in data analysis and machine
learning.

ii
 TABLE OF CONTENTS

Acknowledgement
i
Abstract
ii
Table of Contents iii
List of Figure iv

Chapter Contents Page

Number Number

1 COMPANY PROFILE 01
1.1 Introduction 01

1.2 Overview of the Organization 01

2 TASK PERFORMED 05

2.1 Learning Experiences 05

2.2 Knowledge Acquired 07

2.3 Skills Learned 10

2.4 The Most Challenging Task Performed 13

2.5 Problem Identified 17

3 REFLECTIONS 21

3.1 Solutions 21

3.2 Screenshots 23
CONCLUSION 28

iii

LIST OF FIGURES
 PAGE NO.

FIGURE NO. 23
FIGURE NAME

3.2.1 23
Welcome Page
3.2.2 24
Create new project page
3.2.3 24
Entering project requirements
3.2.4 25
Analysing requirements loading page
3.2.5 25
Choose a framework page
3.2.6 26
Create project page
3.2.7 26
Code generated file
27
3.2.8
ReadMe generation file
3.2.9
Requirements.txt file generation

iv
CHAPTER 1

COMPANY PROFILE

1.1 Introduction

In today’s rapidly evolving digital economy, the demand for industry-ready professionals
especially in the fields of artificial intelligence (AI), data science, and machine learning has
never been higher. However, a persistent gap exists between academic knowledge and
industry expectations. PreProd Corp Private Limited was founded to bridge this critical
divide.

PreProd stands for "Pre-Production," signifying the company’s core mission of preparing
aspiring developers and AI practitioners to operate in production-grade environments before
they enter full-time professional roles. Rather than focusing on theoretical instruction,
PreProd places its emphasis on real-world project exposure, where learners can simulate
what it's like to work in a live production environment.

Established in November 2023, PreProd is a Bengaluru-based private company that has

quickly gained recognition for its innovative model of AI upskilling, consulting, and
enterprise- grade product development. Its core ideology revolves around one principle:
learning by doing, ensuring that participants emerge not only with technical skills but with
the confidence and adaptability demanded by real-world technology teams.

1.2 Overview of the Organization

Company Name: PreProd Corp Private Limited

CIN: U62099KA2023PTC181571

Founded: 29 November 2023

Type: Private, Unlisted Company

Industry: Information Technology & Services, AI Consulting

Location: First Floor, Brigade Tech Park, Whitefield, Bangalore South, Karnataka – 560066

Official Website: https://thepreprodcorp.com

B.E, Dept of ISE, CITech 2024-25 Page 1

CHAPTER 1 COMPANY PROFILE
Team Size: 11–50 Employees

Founders and Leadership

PreProd Corp is led by a visionary leadership team comprisin
• Mr. Sridhar Harish – A tech innovator and strategic thinker who brings strong experience
in enterprise product development and people management.

• Mr. Krishnav Bhudeo Dave – An expert in consulting and operations, with a background
in scaling AI-driven platforms and developing learner-centric ecosystems.

Their combined expertise drives the company’s vision of making AI education industry- oriented
and globally accessible.

Vision and Mission

Vision Statement
To become a global leader in AI education and consulting by delivering immersive,

production- grade learning experiences that foster innovation and excellence.

Mission Statement

To bridge the industry-academia gap through hands-on training, agile development exposure,
and deployment of real AI products—ensuring learners are job-ready from day one.

Core Offerings

1. AI Upskilling Programs

PreProd offers unique AI upskilling courses that go far beyond conventional bootcamps.
Participants are trained to build actual products—such as chatbots, recommender systems,
and automation tools—within a simulated but realistic tech environment, mimicking
production scenarios with version control, code reviews, CI/CD pipelines, and agile
workflows.

2. Enterprise AI Consulting

B.E, Dept of ISE, CITech 2024-25 Page 2

CHAPTER 1 COMPANY PROFILE

PreProd partners with organizations to consult on AI strategy, architecture design, and

implementation of machine learning pipelines. Their consulting services emphasize
scalability, performance optimization, and ethical AI practices.

3. Product Development (OXM Platform)

PreProd is developing its proprietary Omnichannel Experience Management (OXM)

platform—an enterprise solution that helps businesses deliver consistent customer
experiences across various digital touchpoints (e.g., web, mobile, voice, and messaging
interfaces). Intern and professionals at PreProd often contribute to different modules of this
live platform as part of their learning experience.

Work Culture and Values

PreProd fosters a dynamic, startup-like work culture where collaboration, curiosity, and
problem-solving are actively encouraged. Key values include:

• Hands-on Learning: Everyone is expected to contribute code, review pull requests, and
solve real-world bugs.

• Agility: The team operates using Scrum methodologies, with daily stand-ups and sprint
planning.

• Mentorship: Interns and newcomers receive close guidance from experienced developers.

• Innovation: Experimentation and creative problem-solving are part of every learning

journey.

The company’s remote-friendly model allows learners and contributors from all over India
and beyond to engage meaningfully with industry projects, without being confined by
geography.

Clients and Collaborations

B.E, Dept of ISE, CITech 2024-25 Page 3

CHAPTER 1 COMPANY PROFILE
While still in its early stages, PreProd is already collaborating with educational institutions,
startups, and small to medium enterprises to help scale their AI development needs. Their
programs are increasingly recognized by industry experts for being more practical and
deployable compared to traditional academic courses.

Legal and Financial Details

• Registered with the Ministry of Corporate Affairs (MCA)

• Authorized Capital: ₹1,00,000

• Paid-Up Capital: ₹1,00,000

• Filing Status: Financial statements and compliance filings are up to date as of March
2024

• PAN & GST Registered: Compliant with all tax and operational regulations

Conclusion of Company Profile

PreProd Corp is not just a company; it is a movement toward redefining how technical
education and AI literacy are delivered in India. Through their unique production-based
learning model, PreProd is successfully cultivating a generation of learners who are not only
well-versed in coding but are also job-ready, resourceful, and capable of leading tech
initiatives from day one. As the organization continues to grow, it stands as a beacon for
innovation-driven learning in the Indian tech ecosystem.

B.E, Dept of ISE, CITech 2024-25 Page 4

CHAPTER 2
TASK PERFORMED

2.1 Learning Experiences

My internship at PreProd Corp as a Data Analytics Intern under the TechTonic Team provided
a rich and immersive learning environment. Over the span of four months—from 10th
November 2024 to 10th March 2025—I was exposed to real-world projects, collaborated with
professionals, and worked hands-on with technologies that bridged the gap between
theoretical concepts and practical implementation.

Exposure to Corporate Work Culture

One of the primary learning experiences was getting accustomed to a professional work
setting. Working in an established company like PreProd Corp taught me about the
importance of punctuality, accountability, and communication. Daily standups, sprint
planning meetings, and feedback sessions were routine, teaching me how structured
workflows help in efficiently managing a project. I learned how each team member’s
contribution—regardless of role—is vital to the success of a product. The culture of
transparency and collaboration in the TechTonic Team allowed me to understand team
dynamics and interpersonal professionalism.

Practical Application of Theoretical Concepts

While classroom learning had equipped me with knowledge about HTML, CSS, and basic
software development concepts, the internship gave me the platform to apply these ideas in
real-time. I was tasked with building the frontend for a product named LLM Code Assist, an
AI-based code generation tool. This project required me to understand user requirements,
design user-friendly interfaces, and collaborate with backend and AI engineers. I learned the
value of clean code, responsive design, and the practical implications of UI/UX design
decisions.

Agile Methodology and Workflow Management

During the internship, I was introduced to Agile methodology—a popular framework used in
software development. I learned about sprints, user stories, task prioritization, and
retrospective meetings. We used tools like Jira to manage and monitor progress, assign tasks,

B.E, Dept of ISE, 2024-25

CHAPTER 2 TASK PERFORMED

and document issues. Through these practices, I developed a more structured approach to
managing my

Page 5
workload and became proficient in estimating task complexity, breaking down large features
into manageable subtasks, and iterating based on feedback.

Cross-functional Collaboration

Working in an interdisciplinary team helped me understand the value of cross-functional

collaboration. As a frontend developer, I had to coordinate constantly with backend
developers and AI engineers to ensure smooth integration of UI with AI functionalities. I
learned how backend APIs communicate with the frontend, how data needs to be handled
securely, and how to make design choices that align with the technical backend infrastructure.
These collaborative interactions honed my communication skills and taught me how to
document my work effectively for others.

Handling Feedback and Iteration

Another significant learning experience came from regular feedback loops. Weekly demos
were conducted where I presented my work to mentors and peers. I received constructive
criticism that not only pointed out areas of improvement but also guided me on best practices.
This iterative learning process helped me enhance my design, make more intuitive user flows,
and refine my code for better performance. Learning how to handle criticism positively and
adapt quickly was a key takeaway.

UI/UX Focus and Design Thinking

One of the highlights of my internship was learning the principles of UI/UX design. Initially,
I had limited exposure to user-centered design thinking. However, while building LLM Code
Assist, I had to consider how users would interact with the interface. From choosing
appropriate color schemes (like incorporating light and dark mode) to ensuring mobile
responsiveness and accessibility, I learned how thoughtful design impacts usability. This
experience taught me to prioritize user experience over mere visual appeal.

Real-time Problem Solving

B.E, Dept of ISE, 2024-25 Page6

CHAPTER 2 TASK PERFORMED

Throughout the internship, I encountered various roadblocks—from layout inconsistencies to

integration bugs. Rather than relying on rote solutions, I learned how to troubleshoot
effectively using debugging tools, browser developer tools, and online documentation. I also
began contributing to code reviews, understanding others' code, and applying best practices
in my own.

Soft Skills and Professional Etiquette

In addition to technical growth, I experienced immense growth in soft skills. I improved my

verbal and written communication, especially while explaining technical concepts to non-
technical team members. Time management, adaptability, and resilience became second
nature as I balanced multiple responsibilities and adhered to deadlines.

Learning through Observation and Mentorship

Being part of a team meant I could observe how experienced developers approached complex
problems. I learned how they wrote modular code, structured files, and made design
decisions. My mentors at PreProd Corp were supportive and approachable. Their feedback
helped me see mistakes as opportunities to grow and motivated me to explore beyond the
assigned work.

2.2 Knowledge Acquired

Throughout my internship at PreProd Corp, I acquired a broad spectrum of knowledge that

spanned technical skills, development methodologies, and workplace practices. This
internship served as a transformative experience, allowing me to turn foundational concepts
into practical expertise and deepen my understanding of how data analytics and user interface
design play a crucial role in real-world software development.

Technical Knowledge

The most immediate and significant area of growth was in technical knowledge. Prior to the
internship, I had theoretical knowledge of frontend technologies. However, being assigned to
develop the frontend for LLM Code Assist expanded my understanding in multiple ways:

B.E, Dept of ISE, 2024-25 Page7

CHAPTER 2 TASK PERFORMED

• HTML/CSS Proficiency: I became adept at using semantic HTML elements and

styling them with clean, maintainable CSS. I learned how to structure code in a way
that enhanced readability and reusability. Techniques like flexbox and grid layouts
became second nature to me, and I also developed an understanding of media queries
and responsive design principles.

• UI/UX Fundamentals: I gained hands-on experience in designing user interfaces that

prioritized usability. I learned about contrast, spacing, typography, accessibility, and
how all of these aspects impact user satisfaction. I also became more aware of the
importance of feedback systems (such as hover states, tooltips, and error messages)
in ensuring a smooth user experience.

• Device Responsiveness and Cross-Browser Compatibility: One of the tasks required

me to ensure the platform worked well across devices—mobiles, tablets, and
desktops. This pushed me to learn about viewport settings, touch-friendly elements,
and ensuring compatibility with different screen sizes and browsers.

• Dark Mode and Theming: Implementing both dark mode and light mode taught me
about managing global CSS variables and toggling themes efficiently without
breaking layouts. I explored different ways of storing user preferences using local
storage and state management.

Development Methodologies

Another crucial area of knowledge was learning about software development methodologies
and the discipline it brings to real-world projects.

• Agile Workflow: Agile was not just a concept during the internship—it was a daily
practice. I became familiar with sprint planning, daily standups, scrum roles, and
retrospective reviews. I now understand how iterative development and continuous
feedback improve product quality and team coordination.

• Jira for Project Tracking: I learned how to use Jira for task management, sprint
tracking, and documenting bugs. I developed the habit of writing clear task
descriptions, updating statuses, and using labels for categorization. Jira also gave me
visibility into how tasks progress through different phases—from backlog to testing.

B.E, Dept of ISE, 2024-25 Page8

CHAPTER 2 TASK PERFORMED

• Version Control: While I had a basic understanding of Git before, the internship taught
me how to work with version control in a team setting. I learned how to branch
effectively, write meaningful commit messages, and resolve merge conflicts. I also
became familiar with pull request protocols and review practices.

Collaboration and Communication Knowledge

Working in a team of developers, designers, and AI engineers gave me insight into how
technical professionals collaborate across roles and domains:

• Cross-functional Knowledge Transfer: I understood how AI engineers use machine

learning models to generate code, and how backend developers expose functionality
through APIs. I learned how to structure frontend code to effectively consume these
APIs while maintaining performance and security.

• Technical Documentation: I learned how to write concise and helpful documentation

for features I built. This was crucial when handing over features for testing or for
review by senior developers. I also learned how to read API documentation and
backend specifications to ensure accurate implementation.

• Meetings and Communication Tools: I became proficient in using platforms like

Microsoft Teams and Google Meet for team meetings. I also used Slack and internal
communication systems to stay updated and ask questions. These tools became
essential for reporting progress and staying aligned with the team.

Domain-Specific Knowledge

Given that PreProd Corp specializes in AI-based tools, I also gained exposure to domain-
specific concepts related to artificial intelligence, particularly in the context of code
generation.

• LLM (Large Language Models): Although I wasn’t directly involved in AI model

training, I gained knowledge about how LLMs are used to process natural language
instructions and generate Python code. Understanding this backend logic helped me
tailor the UI/UX to match the tool’s strengths.

B.E, Dept of ISE, 2024-25 Page9

CHAPTER 2 TASK PERFORMED

• Prompt Engineering Basics: In discussions with the AI team, I learned how prompt
design impacts the output of AI models. This insight was valuable in designing
frontend input fields, toggles, and helper texts that guide users in interacting with the
model effectively.

Problem-solving Knowledge

Through the challenges I faced, I acquired practical knowledge of solving real-world

development issues.

• Debugging and Error Tracing: I learned how to use browser developer tools for
debugging layout issues, network problems, and JavaScript errors. I also became more
systematic in tracing the root cause of problems and testing edge cases.

• Optimizing Performance: As the frontend evolved, I had to ensure that it remained

fast and responsive. This led me to learn about best practices such as minimizing
DOM manipulation, lazy loading elements, and optimizing images and stylesheets.

Professional and Ethical Knowledge

Lastly, I acquired knowledge on professionalism, ethics, and workplace expectations.

• Data Privacy Awareness: I learned the importance of data handling, especially while
dealing with inputs that could be interpreted and processed by an AI model. Although
I didn’t handle backend security directly, understanding frontend responsibility in data
validation and form hygiene was emphasized.

• Workplace Etiquette: I developed an understanding of how to communicate formally,

adhere to deadlines, and take ownership of responsibilities. Knowing when to ask for
help and how to update the team on blockers became part of my professional behavior.

2.3 Skills Learned

During the course of my internship at PreProd Corp, I acquired a diverse set of skills that
significantly contributed to both my personal and professional development. These skills
range from core technical capabilities and problem-solving techniques to soft skills like

B.E, Dept of ISE, 2024-25 Page10

CHAPTER 2 TASK PERFORMED

communication and teamwork. The structured working environment, guided mentorship, and
real-world challenges offered me an ideal setting to sharpen these skills.

Technical Skills

One of the most rewarding aspects of my internship was the development of practical
technical skills. Working on the frontend of the LLM Code Assist platform pushed me to
expand my capabilities in the following areas:

Frontend Development:

I developed proficiency in writing clean, modular, and semantic HTML and CSS. I learned
how to build responsive layouts using Flexbox and CSS Grid, create reusable components,
and ensure consistency across the interface using design systems. I also gained experience
using CSS variables to handle theming (for features like dark/light mode) and implement
scalable stylesheets.

• Responsive Design Implementation:

Understanding the importance of user accessibility on different devices, I honed my skills

in responsive design. I learned how to structure breakpoints, optimize images for different
screen sizes, and implement mobile-first approaches to ensure seamless user experience
on tablets, phones, and desktops.

• Dark and Light Mode Toggle:

One of my tasks was to integrate a dark/light mode switch, which involved mastering
CSS variables and JavaScript event handling to switch themes dynamically without
disrupting the user experience.

• JavaScript and DOM Manipulation:

My understanding of vanilla JavaScript deepened as I worked with form validation,

interactive elements, and API integration. I learned how to structure event listeners,
handle dynamic updates, and write efficient logic to minimize reflows and repaints.

• Version Control with Git:

B.E, Dept of ISE, 2024-25 Page11

CHAPTER 2 TASK PERFORMED

I developed hands-on experience using Git for source control. I learned how to create
and manage branches, resolve merge conflicts, and push/pull code in a collaborative
environment. Working with GitHub and understanding pull requests, code reviews,
and issue tracking became second nature.

• Basic Prompt Engineering Awareness:

Though not a core skill I mastered, I was introduced to the basics of prompt
engineering and how LLMs (Large Language Models) generate output based on
structured input.
This helped me design better UI input fields that complemented AI logic.

Analytical and Problem-Solving Skills

As tasks became more complex, I learned to approach challenges logically and develop strong
analytical reasoning:

• Debugging Techniques:

I became proficient in using browser developer tools to inspect elements, trace

JavaScript errors, and debug layout issues. This helped me resolve bugs efficiently
and avoid recurring problems.

• Performance Optimization:
I acquired knowledge on how to identify bottlenecks in the UI, reduce unnecessary
DOM updates, and ensure the site remained fast and responsive even as new features
were added.
• Edge Case Handling: I learned to think critically about user behavior and test
applications for unusual scenarios (e.g., special characters in inputs, switching modes
rapidly, etc.). This skill helped me improve application reliability and robustness.

Organizational and Project Management Skills

Working in a real-world development environment taught me how to be organized and

accountable for my tasks:

• Jira for Agile Task Management:

B.E, Dept of ISE, 2024-25 Page12

CHAPTER 2 TASK PERFORMED

I gained experience using Jira to track assigned issues, plan sprints, write detailed task
notes, and prioritize backlogs. This instilled a sense of time management and helped
me understand how large projects are broken down into manageable chunks.

• Documentation Skills:
I learned how to document code, usage instructions, and feature behaviors clearly.
Writing documentation helped me understand the importance of communication
between frontend and backend teams and how good documentation speeds up
testing and deployment.

• Time Estimation and Sprint Participation:

Estimating effort for tasks and sticking to sprint goals taught me how to break down
large tasks, manage time effectively, and deliver outcomes within deadlines.

Soft Skills

Besides technical and organizational skills, I also developed several soft skills that are
essential in any professional environment:

• Teamwork and Collaboration:

Working alongside designers, AI engineers, and backend developers helped me learn

how to collaborate effectively. I learned to listen to feedback, align my work with
others, and assist teammates when required.

• Communication:
Through daily standups, team meetings, and sprint reviews, I improved my verbal and
written communication. I learned how to present my work clearly, raise blockers
proactively, and respond to feedback with professionalism.

• Adaptability:

As new tasks were assigned or requirements changed, I had to quickly learn and adapt
to new tools and workflows. This made me more flexible and willing to take on new
challenges confidently.

• Critical Thinking and Initiative:

B.E, Dept of ISE, 2024-25 Page13
CHAPTER 2 TASK PERFORMED

Whenever I encountered a problem, I was encouraged to propose solutions instead of

waiting for instructions. This habit boosted my confidence and allowed me to take
initiative in problem-solving.

• Professional Etiquette:

I learned workplace ethics such as punctuality, respecting deadlines, updating

supervisors regularly, and being mindful of how my work impacts others.

Personal Growth Skills

On a personal level, the internship allowed me to grow in ways beyond the technical
environment:

• Self-Motivation:

Working in a hybrid/remote setting required discipline and a proactive attitude. I

learned how to structure my day, stay motivated, and hold myself accountable even
without direct supervision.

• Confidence in Skill Application: Before the internship, I had academic knowledge but
lacked real-world experience. Now, I feel confident in applying my skills in a
professional setting and taking ownership of end-to-end frontend features.

2.4 The Most Challenging Task Performed

Throughout my internship at PreProd Corp, I was assigned a variety of tasks that helped build
my confidence and technical foundation. However, one task stood out as the most
challenging—implementing a dynamic, user-friendly dark/light mode toggle across the entire
front end of the LLM Code Assist platform. While it may sound simple at first glance, the
complexity of this task became evident as I delved deeper into it. It tested my knowledge of
CSS, JavaScript, accessibility practices, and user experience design.

Overview of the Task

B.E, Dept of ISE, 2024-25 Page14
CHAPTER 2 TASK PERFORMED

The core requirement was to introduce a toggle switch that would allow users to switch
between dark mode and light mode dynamically, without needing a page reload. Furthermore,
the mode needed to persist across sessions, integrate seamlessly with all UI components, and
not interfere with the functionality or readability of the content, regardless of the user’s device
or browser.

Why It Was Challenging

1. Cross-Component Styling Consistency

Ensuring that every component—buttons, modals, text fields, dropdowns, tooltips, and pop-
ups—adopted the correct theme dynamically was extremely difficult. Many components had
hardcoded styles or inherited inconsistent class structures. It required me to go through each
component individually, audit its styles, and refactor them to use CSS variables and theme-
based classes.

2. State Management and Persistence

Maintaining the state of the theme toggle in a way that it persisted even after refreshing the
page or closing the tab was another difficult part. I had to learn about:

• Storing user preference in localStorage

• Retrieving and applying the saved theme on page load

• Handling edge cases, such as the absence of a saved preference or defaulting to system
settings
I also had to ensure that switching themes did not cause flash-of-unstyled-content (FOUC),
which often happens when the theme is toggled during or after the DOM is loaded.

3. Accessibility and Contrast

Another level of difficulty arose when I needed to ensure that the theme switch didn't compromise
accessibility. This included:

B.E, Dept of ISE, 2024-25 Page15

CHAPTER 2 TASK PERFORMED

• Ensuring proper color contrast between foreground and background

• Making sure icons, links, and text remained readable in both modes
• Keeping the focus states visible and distinct

This part introduced me to accessibility testing tools such as Chrome’s Lighthouse and the
WebAIM contrast checker.

4. Browser and Device Compatibility

Testing the theme toggle across different browsers (Chrome, Firefox, Safari, Edge) and
devices (desktop, tablet, mobile) revealed inconsistencies. Some CSS properties behaved
differently, especially transitions and scrollbars. I had to write fallback styles and test
thoroughly to ensure uniform behavior.

5. Integration with Developer Tools and LLM Output UI

One particularly tricky part was integrating the theme into the LLM-generated content
section. This section would sometimes display code snippets, AI-generated responses, or
input prompts styled by JavaScript. Adapting these dynamically injected contents to match
the theme required setting up mutation observers and triggering style updates whenever new
content was added to the DOM.

The Process of Tackling the Challenge

Although the challenge seemed daunting, I approached it systematically:

Step 1: Research and Ideation

I began by studying the best practices for implementing dark mode from trusted sources like
MDN Web Docs, CSS Tricks, and Dev.to. I evaluated different approaches: using CSS classes
(.dark / .light), media queries (prefers-color-scheme), and CSS variables for themes.

Step 2: Planning

I created a simple checklist:

• Define theme colors using CSS variables

B.E, Dept of ISE, 2024-25 Page16

CHAPTER 2 TASK PERFORMED

• Store/retrieve user preference

• Set up a toggle mechanism

• Refactor all UI components to use theme variables

• Handle accessibility

• Test across devices and browsers

Step 3: Implementation

• I defined root-level CSS variables and grouped them based on themes.

• Added a data-theme attribute to the <html> element and applied themes via that
attribute.

• Created a toggle function using JavaScript and connected it to the toggle button.

• Updated all components to rely on the CSS variables rather than fixed values.

• Stored user preference using localStorage and auto-applied it on page load.

Step 4: Testing and Refinement

After implementation, I ran usability tests with my team. Some issues I addressed were:

• Transitions being too jarring → I added smooth transitions.

• Incorrect padding/margins in certain themes → I rechecked layout consistency.

• LLM responses not matching the theme → I set mutation observers to apply theme-
based classes on dynamic content injection.

Outcome and Lessons Learned

Despite being the most challenging task, it turned out to be the most rewarding as well. The
dark/light mode feature became a highly appreciated element during sprint reviews. It
significantly enhanced user experience and showed how attention to detail in UI can make a
big difference in product usability.

Here’s what I learned from this task:

B.E, Dept of ISE, 2024-25 Page17
CHAPTER 2 TASK PERFORMED

• Modular CSS is essential: Structuring styles around CSS variables and theme classes
makes future updates and scalability easier.

• Small tasks can have hidden complexities: Even a simple toggle button can require
attention across accessibility, user preference handling, and cross-browser issues.

• Persistence and iteration matter: My first solution was far from perfect, but with
multiple reviews and testing, I was able to refine it into a robust feature.

• Design thinking is critical in frontend development: It’s not just about writing code;
it’s about thinking from the user’s perspective—how they interact with features, and
how design choices impact experience.

2.5 Problem Identified

During my internship tenure at PreProd Corp, one of the most significant problems I identified
involved the lack of standardization and inconsistency in frontend component styling and
behavior across the project. While the platform’s backend was well-structured and API-
driven, the frontend codebase—especially the UI components and their styling—exhibited
scattered logic, redundant styles, and inconsistent user experiences. This issue was not
isolated to aesthetics alone but affected the maintainability, scalability, and collaboration
within the development team.

Understanding the Problem

As I began exploring the codebase and working on tasks like implementing theme toggles,
modals, and code-assist interfaces, I started to observe patterns of duplication and
inefficiency:

1. Non-Uniform Component Structures: Components that were functionally similar—

such as buttons, popups, and modals— had different naming conventions, prop
signatures, and styling techniques. Some used inline styles, some relied on CSS files,
and others used utility-first frameworks like Tailwind. This created confusion while
modifying shared elements.

B.E, Dept of ISE, 2024-25 Page18

CHAPTER 2 TASK PERFORMED

2. Absence of a Design System or Component Library: There was no centralized design

guideline or reusable component library. As a result, developers often built similar UI
blocks from scratch, leading to a bloated codebase with repetitive logic and
inconsistent behavior.

3. Lack of Theming Consistency: Before the implementation of a structured dark/light

mode (which I worked on), several components had hardcoded background and text
colors. This meant that theme changes weren’t dynamically reflected unless every
individual style was manually adjusted—a clear violation of DRY (Don’t Repeat
Yourself) principles.

4. Poor CSS Architecture: Styles were not modular. Global CSS styles were prone to
collisions, making it difficult to isolate and debug layout issues. Many components lacked
scoped class naming conventions (like BEM or module-based styles), leading to
unintentional overrides.

5. Inconsistent UX Patterns: For actions like form submissions, confirmations, or error

messages, different parts of the application behaved differently. Some used modals,
others relied on toast notifications, and some had no feedback mechanism at all. This
inconsistency confused users and degraded trust in the product.

Root Causes

After discussing with team members and analyzing the commit history, I identified the
following root causes of the problem:

• Rapid Prototyping Phase: The product was initially built rapidly to showcase proof of
concept. As a result, the frontend was not architected with long-term scalability in
mind.

• Lack of Onboarding Documentation: My team found it difficult to navigate the

frontend codebase, leading them to duplicate components instead of reusing or
improving existing ones.

Impact of the Problem

This lack of frontend standardization had multiple consequences:

B.E, Dept of ISE, 2024-25 Page19

CHAPTER 2 TASK PERFORMED

• Increased Development Time: Developers spent more time understanding and

replicating styles instead of reusing components.

• Maintenance Challenges: Fixing a bug or updating a style required editing code in

multiple places.

• Performance Issues: Redundant styles and unoptimized CSS contributed to larger

bundle sizes and slower load times.

• Poor User Experience: Inconsistent styling and behavior made the interface feel
unreliable, affecting user satisfaction.

• Team Collaboration Bottlenecks: Without standardized naming conventions and

component usage, cross-functional teams struggled to coordinate effectively.

Steps Taken to Address the Problem

Once I clearly understood the magnitude of the problem, I collaborated with my mentor and
peers to begin addressing it in phases:

1. Audit and Documentation

• I initiated a frontend audit where I documented all the UI components, their

variants, and usages across pages.

• Created a visual map of duplicate components and identified candidates for

refactoring.

2. Established Guidelines

• Proposed the adoption of a component library (like Storybook or Bit) to

centralize reusable UI elements.

• Suggested standard naming conventions, preferred styling methods (Tailwind

+ CSS modules), and props documentation.

3. Theming Refactor

B.E, Dept of ISE, 2024-25 Page20

CHAPTER 2 TASK PERFORMED

As part of the dark/light mode implementation, I introduced a theming

architecture using CSS variables, which could be applied globally without
needing manual edits per component.

4. Component Refactoring

• I started small by refactoring buttons, alerts, and input components to follow

consistent structure and theme-based design.

• Worked with the team to replace hardcoded UI sections with these reusable
components.

5. Feedback and Code Reviews

• I participated in code reviews and highlighted areas where components could be

reused or simplified.

• Encouraged the use of prop-based configuration for flexibility instead of recreating

variations.

Lessons Learned

• Codebase Structure Matters: A poorly organized frontend can quickly become a

liability. Standardization is not just about clean code—it ensures scalability and
onboarding ease.

• Communication is Key: Identifying a problem is not enough. Effectively

communicating it to the team and working collaboratively on solutions is what drives
improvement.

• Start Small, Think Big: You don’t need to rebuild everything from scratch.
Refactoring one component at a time and gradually enforcing consistency goes a long
way.

B.E, Dept of ISE, 2024-25 Page21

CHAPTER 2 TASK PERFORMED

• Documentation Prevents Repetition: Having clear, visual documentation of UI

components and their usage helps avoid duplication and encourages reusability.

• Empathy for the User: Inconsistent UI experiences reflect poorly on the product.
Paying attention to user-centric design improves usability.

B.E, Dept of ISE, 2024-25 Page22

CHAPTER 3

REFLECTIONS

3.1 Solutions

After identifying key challenges during the course of my internship at PreProd Corp,
especially regarding frontend inconsistencies, lack of component reusability, and theming
issues, I actively contributed to proposing and implementing a series of structured solutions.
These were focused on improving code maintainability, user experience, and team
collaboration.

1. Theming Architecture with Tailwind and CSS Variables

To tackle the issue of inconsistent dark and light themes, I implemented a global theming
system using Tailwind CSS in conjunction with custom CSS variables. By organizing
variables like --background-color, --text-color, and others under root selectors, I enabled a
centralized, toggleable theme system that updated the UI dynamically with minimal rework
required on individual components.

• Integrated Tailwind's dark mode class mechanism.

• Created a ThemeContext using React's Context API to toggle and persist user
preferences via local storage.

2. Component Reusability Through Modular Design

Instead of duplicating UI components like modals, buttons, and inputs, I created reusable
components that accepted props to allow for flexibility and customization. This greatly
reduced redundancy and promoted DRY (Don't Repeat Yourself) principles.

• Developed a reusable <Button> component with variants (primary, secondary,

danger).

• Modularized the <Modal> component with reusable structure and dynamic content.

2024-25
CHAPTER 3 REFLECTIONS
• Consolidated form elements into a shared folder with consistent validation and
styling.

3. Code Quality Improvements

B.E, Dept of ISE, CITech Page 21

To improve frontend code consistency and maintainability:

• I advocated for using ESLint and Prettier with a shared configuration for formatting

• Introduced a README.md in the components/ directory to describe component

usage and expected props.

• Created JSDoc-style comments and prop-type validations to improve developer

onboarding and error prevention.

4. UX Improvements Through Consistent Feedback Mechanisms

Another recurring issue was inconsistent user feedback. To solve this:
• Integrated a universal toast notification system using libraries like react-toastify.

• Standardized form validation responses and success messages.

• Ensured confirmation prompts and modal patterns followed the same design for
predictability.

5. Collaboration and Review Workflow

To embed the solutions into team workflows:

• Encouraged and participated in peer reviews, suggesting component reuse and

flagging style inconsistencies.

• Shared best practices on Slack and team meetings, helping newer interns navigate the
frontend.

B.E, Dept of ISE, 2024-25 Page24

CHAPTER 3 REFLECTIONS
These solutions not only resolved the technical problems but also enhanced development
efficiency, user satisfaction, and code quality. They reflect a broader understanding of
scalable frontend architecture and effective team practices.

3.2 Screenshots

Fig 3.3.1 – Welcome Page

B.E, Dept of ISE, 2024-25 Page25

CHAPTER 3 REFLECTIONS
Fig 3.2.2 – Create New Project Page

Fig 3.2.3 – Entering Project requirements

Fig 3.2.4 – Analysing requirements loading page

B.E, Dept of ISE, 2024-25 Page26

CHAPTER 3 REFLECTIONS

Fig 3.2.5 – Choose a framework page

Fig 3.2.6 – Create Project page

B.E, Dept of ISE, 2024-25 Page27

CHAPTER 3 REFLECTIONS

Fig 3.2.7 – Code generated file

Fig 3.2.8 – ReadMe file generation

B.E, Dept of ISE, 2024-25 Page28

CHAPTER 3 REFLECTIONS

Fig 3.2.9 – Requirements.txt file generation

B.E, Dept of ISE, 2024-25 Page29

 CONCLUSION

The internship at PreProd Corp was more than just a temporary role—it was a transformative
experience that allowed me to grow into a more confident, capable, and responsible
professional. This journey provided me with the opportunity to immerse myself in real-world
software development practices, work collaboratively in a fast-paced environment, and
contribute meaningfully to a production-ready application.

Throughout this internship, I was involved in various aspects of the development lifecycle—
from understanding project requirements and breaking them down into actionable tasks to
designing and coding frontend components that directly impacted the user experience.
Working within a team of experienced developers and fellow interns, I learned how to
navigate version control systems like Git, work within agile sprints, and manage my tasks
using productivity tools like Trello and GitHub Projects. These practices helped instill a
strong sense of accountability and time management.

One of the most significant realizations during my time at PreProd was the importance of
writing clean, reusable, and scalable code. Initially, I approached problems with a purely
functional mindset—aiming only to "get things working." However, with mentorship and
repeated feedback, I began to see the broader picture: code readability, documentation,
maintainability, and the long-term impact of design decisions. This mindset shift marked a
turning point in how I approached each task, especially when working on shared components
or collaborating on larger features.

In terms of technical growth, I expanded my proficiency in React.js, Tailwind CSS, and

JavaScript, while also exploring important frontend design principles like responsive design,
component reusability, state management using React Context and hooks, and theming
strategies. The challenges I faced in implementing dynamic themes and managing
inconsistent UI patterns pushed me to research solutions independently, thereby developing
both my technical confidence and problem-solving abilities.

Just as valuable were the soft skills I gained. Communication proved to be key—whether it
was updating my mentor on task progress, writing clear pull request descriptions, or
participating in weekly stand-up meetings. I learned the importance of asking the right

2024-25 Page30
B.E, Dept of ISE, CITech

CONCLUSIONS

questions, offering constructive feedback, and collaborating effectively in a remote team

setting. These experiences have not only improved my interpersonal skills but have also made
me more adaptable and open to learning from others.

The culture at PreProd encouraged learning by doing. Unlike passive classroom

environments, here I was encouraged to make mistakes, explore new approaches, and iterate
until I arrived at the most efficient solution. This hands-on exposure has given me the
confidence to tackle real- world challenges independently and with clarity.

To summarize, this internship has been a pivotal step in my journey toward becoming a
professional software developer. The blend of technical and interpersonal growth, exposure
to industry standards, and real-time application of knowledge has provided me with a solid
foundation for future endeavors. I now leave this internship with a stronger resume, a richer
portfolio, a clearer career direction, and above all, a deeper passion for creating impactful
digital solutions.

I am extremely grateful to the entire team at PreProd for their mentorship, patience, and belief
in my capabilities. As I move forward, I carry with me not just the knowledge I gained, but
also the confidence that I am ready to take on greater responsibilities and contribute
meaningfully to the tech industry.

2024-25 Page31
B.E, Dept of ISE, CITech

2024-25 Page32