REPORT ON

FIFTEEN WEEKS OF INTERNSHIP

Carried out at

ROSETTE SMART LIFE

Submitted to

NMAM INSTITUTE OF TECHNOLOGY, NITTE

(An Autonomous Institution affiliated to VTU, Belagavi)

In partial fulfillment of the requirements for the award of the

Degree of Bachelor of Engineering

in
Computer Science and Engineering

by
SHIVAM KUMAR
4NM21CS154

Under the guidance of

Dr. Asmita Poojari

(Asst. Professor Gd-III)

 CERTIFICATE

This is to certify that the “Internship report” submitted by Mr. Shivam

Kumar bearing USN 4NM21CS154 of 8th semester B.E., a bonafide student

of NMAM Institute of Technology, Nitte, has undergone fifteen weeks of

internship at Rosette Smart Life from January 2025 to April 2025 fulfilling

the partial requirements for the award of degree of Bachelor of Engineering

in Computer Science and Engineering at NMAM Institute of Technology,

Nitte.

____________________________ ________________________
Name and Signature of Mentor Signature of HOD

i
 Industry CERTIFICATE

ii
ACKNOWLEDGEMENT

The satisfaction that accompanies the completion of any task would be

incomplete without the mention of all the people, without whom this endeavour
would have been a difficult one to achieve. Their constant blessings,
encouragement, guidance and suggestions have been a constant source of
inspiration

First and foremost, my gratitude to my project guide, Dr. Asmita Poojari for her
constant guidance throughout the course of this Seminar work and for the
valuable suggestions.

I acknowledge the support and valuable inputs given by, Dr. Jyothi Shetty the
Head of the Department, Computer Science and Engineering, NMAMIT, Nitte.

My sincere thanks to our beloved principal, Dr. Niranjan N Chiplunkar for his
guidance and support.

Finally, thanks to staff members of the Department of Computer Science and

Engineering and our friends for their honest opinions and suggestions.

Shivam Kumar
(4NM21CS154)

iii
 TABLE OF CONTENTS

CHAPTE CHAPTER NAME PAGE

R NO. NO.
ABSTRACT 1

1 INTRODUCTION TO THE INDUSTRY 2

2 OBJECTIVES OF THE INTERNSHIP 3-7

3 TECHNOLOGIES USED 8-9

4 MODULES IMPLEMENTED 10-15

5 WORK DETAILS & TECHNICAL 16-19

IMPLEMENTATION

6 CONCLUSION 20

REFERENCES 21-22

iv
 ABSTRACT
This report outlines the work undertaken during 15 week full-stack web development internship
at Rosette Smart Life. The company was assigned the task of creating a web platform for NICO
(Nano Intelligence Corporation Organization), which specializes in nanobubble technology for
applications such as water treatment, agriculture, and sustainability. My role involved building
and improving the frontend and backend components of the web application for managing
devices and customers remotely. The report elaborates on the tools and technologies used, major
modules implemented, challenges faced, and skills gained throughout the internship.

Page 1
CHAPTER 1
INTRODUCTION TO THE INDUSTRY
During my internship, I worked with Rosette Smart Life, a tech-driven company focused
on delivering smart, scalable digital solutions across industries. Rosette specializes in web
development, IoT integration, automation, and system design. The company undertakes
client-based projects requiring tailored solutions for operational efficiency and remote
monitoring. As an intern, I was part of a team working on a client project for NICO
Nanobubble India Co.

NICO (Nano Intelligence Corporation Organization) is a company focused on the

research and development of nanobubble technology, which has transformative
applications in water treatment, agriculture, aquaculture, and environmental
sustainability. Their core products rely on intelligent devices that generate and manage
nanobubbles—tiny gas bubbles with unique physical properties that enhance water quality
and promote healthier ecosystems.

To manage these devices efficiently across various deployment locations, NICO

outsourced the development of a centralized web platform to Rosette Smart Life. This
platform was intended to allow:

 Remote monitoring and management of nanobubble devices,

 Real-time service request handling and alerts,
 Role-based access for different users (admin, associates, vendors),
 Seamless integration of customer data and company details,
 And an intuitive, responsive user interface suitable for all screen types.

My role in this collaborative project was as a Full-Stack Developer Intern, where I

contributed to both the frontend development (UI/UX, routing, React components) and
the backend integration (API calls, role-based access control, database operations). Over
the course of the internship, I worked closely with the development team to design,
implement, and refine various modules that form the backbone of the platform.

Page 2
CHAPTER 2
OBJECTIVES OF THE INTERNSHIP

· Understanding Full-Stack Web Development in a Real-World

Setting
One of the primary objectives of this internship was to immerse myself in full-stack
development through the lens of a real-world project. In academic settings, we often work
on theoretical or isolated projects with predetermined outcomes, but real-world
development presents a more dynamic and complex scenario. During my internship at
Rosette Smart Life, working on a live project for NICO Nanobubble India Co., I was
introduced to the end-to-end development process. I learned how the frontend and backend
must communicate efficiently, and how even small design or logic decisions can
significantly impact performance and user experience. I began by analyzing the existing
project repositories and gradually started contributing to both frontend components and
backend services. I gained a deeper understanding of how APIs are constructed and
consumed, how state is managed across different pages in React, and how data flows
through controllers and routes in a Node.js environment. Debugging also became a crucial
part of my routine. Unlike in class, where issues are often synthetic, here I encountered
real problems like improper state updates, unhandled exceptions, or layout issues on
mobile screens. Solving these problems required a clear understanding of the full stack,
including knowledge of how data is stored in databases like PostgreSQL, how it's retrieved
via backend routes, and how it is displayed or manipulated on the frontend. I also began
understanding the principles of maintainability—ensuring that the code I wrote could be
easily read and modified by someone else in the future. This objective allowed me to
appreciate the interconnectedness of different layers of web development and how a
change in one layer could propagate and influence others. By the end of the internship, I
was no longer just writing code—I was solving problems holistically by considering
security, responsiveness, performance, and user expectations.

· Building a Responsive and Scalable Web Platform

Creating a platform that is not only visually appealing but also functional across various
devices and usage scenarios was another major objective of the internship. This involved
understanding the nuances of responsive design and what it takes to scale an application
efficiently. Responsive design refers to the ability of a webpage to adapt its layout and
content depending on the screen size and orientation of the device accessing it. For

Page 3
example, a desktop user should see a fully spaced-out layout with appropriate alignment
and content positioning, while a mobile user should experience a more compact but
equally navigable interface. To implement this, I learned how to use media queries
effectively, adjusted flex and grid properties in CSS, and tested UI responsiveness across
emulators and actual devices. I also explored component reusability and state management
to ensure that data remains consistent across different screen sizes without redundancy or
lag. Scalability, on the other hand, goes beyond design and touches on system architecture.
I had to ensure that the backend systems, particularly those built using Node.js and
PostgreSQL, were capable of handling increasing amounts of data and simultaneous users.
I implemented modular routes and services, broke down large components into smaller,
testable units, and ensured proper error handling and logging mechanisms were in place.
We also made design decisions like pagination and lazy loading in certain components to
reduce load time and improve performance. Understanding scalability also involved
architectural foresight—making sure that the system could be extended easily. For
example, when I worked on the Service Requests and Alerts module, I structured it in such
a way that adding new alert types in the future would require minimal changes to the
codebase. Through this objective, I came to understand that responsive and scalable design
is not a one-time task—it’s an ongoing discipline that requires testing, feedback,
optimization, and continuous learning.

· Creating Seamless Navigation and UI/UX for Multiple

Stakeholders
User Interface (UI) and User Experience (UX) are often underestimated by beginner
developers, but my internship taught me how crucial they are in determining how
successful a platform will be. A major part of my work involved refining existing pages
and building new ones with a clear focus on visual coherence, usability, and accessibility.
I worked on several web pages including the Device Addition page, Service Requests
module, Alerts section, Customer Management dashboard, and more. Each page was
designed to be intuitive, visually clean, and responsive to a wide range of devices.
Through this process, I became well-versed in CSS, flexbox and grid layouts, as well as
utility-first design using tools like Tailwind CSS and standard class-based styling. I
worked extensively on aligning components, choosing consistent color schemes (within
company branding), and improving visual hierarchy. Typography, padding, margins,
button styling, and responsive containers were all things I learned to tweak for maximum
clarity. One of the biggest revelations was understanding how users interact with systems.
During field testing, I observed how users struggled with certain buttons or misunderstood

Page 4
navigation flows. These real-world insights helped me implement changes such as clearer
labels, more visible action buttons, breadcrumb navigation, and real-time feedback for
loading or error states. This experience also gave me exposure to accessibility concerns
like color contrast, font readability, and tab-based navigation. For instance, in the Service
Requests page, I added visual cues and success/error messages to guide users through a
multi-step process. I also ensured that form elements were spaced well for both desktop
and mobile interfaces, enhancing overall usability. Beyond visual design, UX also meant
streamlining workflows—ensuring that users could complete tasks like adding a device or
updating their profile in as few clicks as possible. I also integrated logic to handle edge
cases like empty form fields, invalid entries, and server delays. Altogether, the focus on
UI/UX helped me build empathy for the end user and made me realize that a technically
functional system isn’t enough—it must also be enjoyable and accessible to use.

· Improving Collaboration and Development Workflow

During internship at Rosette Smart Life, which involved building a device and customer
management platform for NICO Nanobubble India Co., one of the most essential and
impactful areas I contributed to was improving the collaboration and development
workflow within our development team. Efficient collaboration is at the heart of
successful software development, especially when multiple developers are working on
different modules in a time-sensitive, production-oriented environment.

The development process initially faced several friction points: merge conflicts,
inconsistent coding standards, communication delays between frontend and backend
teams, and occasional overwrites of work due to unclear version control practices. To
address these issues, I participated in refining the Git-based version control and project
management workflow, as well as fostering communication through structured updates
and improved documentation practices.

My first step toward improving collaboration was to understand and refine how our Git
workflow was being handled. In the early days of the project, most developers were
working directly on the main or development branches, which led to frequent merge
conflicts and bugs being pushed into the working build. I advocated for and helped
implement a feature-branch-based Git strategy, where each new feature, bug fix, or
module enhancement was handled in a dedicated branch. For example, for any work I
undertook — be it creating a new UI for the device page or integrating backend APIs — I
created branches named with proper conventions like feature/device-ui or bugfix/alert-

Page 5
routing. These branches were only merged into the development branch after thorough
testing and code reviews.

To support this, I also worked with my mentor to enforce pull request (PR) protocols.
Every piece of code was required to go through a PR process, where the changes were
reviewed by another developer, feedback was given if necessary, and only then approved
for merging. This improved code quality significantly, ensured knowledge transfer among
the team, and prevented bugs from slipping into the main codebase.

Moreover, I took responsibility for helping new interns get comfortable with our version
control practices. I created a simple onboarding document that detailed how to clone the
repository, set up environment variables, follow naming conventions, and commit code
responsibly. This document was stored on our internal documentation space and proved
useful especially when two new joinees were added to the project in later weeks. I also
conducted a short walkthrough session to explain the Git workflow and typical use cases
like resolving conflicts, performing interactive rebases, and syncing branches.

On the communication side, we utilized platforms like MS Teams , ClickUp and Google
Meet for daily standups and sync calls. I suggested we start using issue tracking boards,
such as those available in GitHub Projects, to assign, track, and prioritize tasks. Each team
member would update their progress, mark blockers, or comment on ongoing issues,
which improved transparency and reduced dependency bottlenecks.

Towards the latter part of the internship, I dealt with resolving merge conflicts — an area
where many junior developers struggled. I took initiative to debug conflicts, explain
resolution strategies, and share tips like using visual merge tools (such as VS Code’s built-
in merge editor). This not only kept the codebase clean but also built mutual confidence
and fostered a more collaborative environment.

· Enhancing Personal Technical Skills and Professional Growth

My internship at Rosette Smart Life gave me a taste of real-world, industry-oriented
development, where the requirements could change mid-way, bugs were expected, and
deadlines were real. One of the major goals was to immerse myself in the professional
software development lifecycle, from understanding the client’s problem statement to
deploying functional modules that met real user needs. Working on a project intended for
NICO Nanobubble India Co., a company specializing in sustainable nanobubble

Page 6
technology, added even more weight to the importance of precision and reliability in
development.

I participated in stand-ups, discussed project goals with mentors, and adapted to agile
development methods. This helped me build soft skills like communication, time
management, and task prioritization. I was expected to estimate timelines, break down
tasks into achievable chunks, and handle blockers independently or through collaboration.
I also had to get comfortable with tools like version control systems (Git), code review
platforms, documentation portals, and productivity tools like Trello or Notion.

Moreover, I learned how to translate vague or high-level requirements into technical tasks.
The instruction to “make the website responsive” involved understanding various
breakpoints, media queries, device sizes, and layout restructuring. Similarly, “add
customer management” required database schema design, secure CRUD operations, access
control logic, and UI for data filtering and updates. Every small task was a lesson in
decomposition and planning.

Debugging in a live or semi-live environment was another aspect of industry experience.

Unlike in college projects where bugs are easily traceable due to small codebases, here I
had to deal with interconnected components, asynchronous processes, and third-party
dependencies. I learned how to use console logs effectively.

Security and data integrity were also part of the real-world concerns. When working on
authorization and user role-based access, I learned the importance of token expiration,
session handling, and preventing unauthorized data access. This was something not often
emphasized in academic settings but crucial in industry.

Finally, deploying features and receiving feedback from real users during field tests helped
to appreciate how users interpret interfaces and what features are truly valuable to them.
This feedback loop taught me to iterate quickly, accept constructive criticism, and be
flexible with my implementation. All in all, this objective grounded my theoretical
knowledge in practical challenges and taught me how to approach development not just as
a coder but as a problem-solver in a team-oriented, outcome-driven environment.

Page 7
CHAPTER 3
TECHNOLOGIES USED
The following technologies and tools were employed throughout the internship:

 Frontend: React.js, React Router, HTML, CSS

The frontend of the web platform was developed using React.js, a powerful JavaScript
library for building user interfaces. React’s component-based architecture allowed for
reusable UI components, which significantly improved development speed and
maintainability. Its virtual DOM and efficient state management enabled smoother updates
and dynamic content rendering. I used React Router to manage routing and navigation
between different pages without refreshing the page, creating a seamless single-page
application (SPA) experience. Styling was done using CSS, with a focus on
responsiveness and clean UI design. I utilized Flexbox and CSS Grid layouts to ensure
the application looked consistent across different screen sizes. The combination of these
tools enabled the delivery of a polished, interactive, and user-friendly interface.

 Backend: Node.js, Express.js

The backend was built using Node.js, a runtime environment that allows JavaScript to be
run on the server side. Node.js was crucial for building scalable and non-blocking APIs,
thanks to its event-driven, asynchronous nature. It provided a consistent development
experience by enabling full-stack JavaScript development. On top of Node.js, I used
Express.js, a lightweight and fast web framework, to handle routing, middleware logic,
and backend functionality. Express enabled rapid API development and simplified the
process of connecting frontend requests to backend responses. Together, Node and
Express formed the backbone of the server-side logic and were essential for handling data
processing, authorization flows, and integration with the database.

 Database: PostgreSQL
For database management, I used PostgreSQL, a powerful open-source relational
database system. PostgreSQL was chosen for its reliability, robustness, and advanced

Page 8
querying capabilities. It provided support for complex data relationships, data integrity
constraints, and transactional operations, all of which were essential in handling sensitive
information such as device data, user profiles, and access roles. Working with PostgreSQL
gave me practical experience in designing schema, writing SQL queries, and integrating
backend logic with persistent data storage. The use of PostgreSQL was instrumental in
ensuring that the platform had a secure and efficient data layer.

 Version Control: Git and GitHub

For collaboration and source code management, I used Git along with GitHub. Git
allowed me to track changes, work in branches, and manage multiple versions of the
project simultaneously. It was vital for maintaining code integrity and avoiding overwrites
during concurrent development. GitHub served as the centralized repository where the
team could review code, resolve conflicts through pull requests, and maintain
documentation. This experience deepened my understanding of collaborative development
practices and version control workflows used in professional environments.

 Other Tools & Practices

In addition to the core technologies, I applied RESTful API design principles to ensure
clear and consistent communication between the frontend and backend. I also learned to
implement role-based access control for different user types (Admin, Associate, User),
which added a layer of security and personalization to the platform. Furthermore,
debugging tools, browser dev tools, and Postman were used during development and
testing to verify API functionality and inspect data flow.

Page 9
CHAPTER 4
MODULES IMPLEMENETED
 Authentication and Role-Based Access Control
The Authorization and Access Management module was one of the most critical
components of the web platform. Its primary objective was to ensure that different
categories of users—namely Admin, Associate, and Regular User—had controlled and
appropriate access to the application’s features and data. This module helped protect
sensitive customer and device data, restricted unauthorized access, and provided a
customized user experience based on roles.

The implementation started by designing a role-based access control (RBAC) system on

the backend using Node.js and Express.js. Each user was assigned a role upon
registration, and the middleware functions were used to intercept incoming requests and
verify permissions before allowing access to any protected route or feature. JSON Web
Tokens (JWT) were used to manage session-based authentication securely. The token
included payload data such as user ID and role, which was decrypted at the server to
validate user credentials and control access dynamically.

On the frontend, Users with different roles were shown only the relevant parts of the UI.
For instance, the Admin had access to company management tools, while a Regular User
only had access to personal profile data and device status. This not only enhanced security
but also simplified the user interface by hiding irrelevant options.

One of the challenges faced in this module was ensuring that real-time permission updates
were accurately reflected in the UI without forcing a complete page reload. To address
this, A state management techniques and conditional rendering in React was added.
Middleware at the backend acted as a gatekeeper, ensuring requests that didn’t meet role
criteria were denied at the source.

This module was integral to the success of the project as it enabled the platform to be used
by multiple stakeholders while preserving data confidentiality and operational boundaries.
It also set the stage for expanding the platform to accommodate more user types in the
future, such as field engineers or monitoring teams.

Page 10
 Device Management Module
The Device and Customer Management module was another foundational part of the
platform. This module enabled authorized users to remotely manage various IoT-based
nanobubble generation devices, track their status, and link them with customers such as
vendors or registered companies. It also allowed the administration to maintain customer
records and associate devices with specific clients.

The device management interface was developed using React.js, where users could add,
edit, or remove device entries. A dedicated page was created with a form to register new
devices, including details like device ID, location, status (active/inactive), type, and last
maintenance date. This page was linked to a backend API developed using Express.js,
which handled data validation and insertion into the PostgreSQL database.

Customer management was split into two sub-modules: Registered Companies and
Vendors. Each had a separate UI view for managing respective user groups. Admins
could add new clients, view their profiles, assign devices, and track usage. This
information was tightly integrated with the access control system to allow only specific
roles to perform certain actions.

One of the complex functionalities in this module was the relational linking between
devices and customers. Each device was associated with a customer ID, and backend APIs
were created to fetch relevant data based on these relationships. SQL JOIN operations
were extensively used to fetch combined datasets, such as customer details along with
assigned devices.

To improve usability, I implemented features like search, sort, and filter options on the
frontend so that users could quickly find specific devices or clients. A responsive layout
was ensured through CSS media queries and Flexbox, allowing for mobile and tablet
compatibility.

Another important part of this module was status monitoring and alerting. Devices with
critical issues or requiring maintenance would generate alerts, which were shown on the
admin dashboard and on the newly built Alerts Page. This ensured that system
administrators were constantly informed of the operational state of each device.

Page 11
The Customer Management Module not only helped centralize the client database but also
contributed directly to improving business operations by allowing real-time visibility and
efficient device-to-client mapping. It bridged the gap between field operations and
administrative control, making the platform highly functional and business-relevant.

 Customer Management Module

The Customer Management Module was one of the core components of the platform,
primarily built to help administrators and authorized associates manage the records of all
customer types, including Registered Companies and Vendors. It was designed to enable
seamless tracking, organization, and interaction with different customer categories while
maintaining a high level of security, access control, and usability.

This module was implemented with two separate web pages for better clarity—Registered
Companies and Vendors—both developed using ReactJS. The design language was kept
minimalist and clean, aligning with the rest of the platform’s aesthetic, but structured to
allow dense information to be displayed clearly. Each page featured a data table with
sortable columns and search functionality for efficient navigation and lookup.

The frontend was designed to accommodate responsive layouts so that customer details
could be easily viewed on tablets or mobile screens. Real-time filtering and pagination
were implemented to ensure smooth performance even as the volume of customers
increased.Additionally, each entry in the tables could be clicked to view detailed
customer profiles, which included metadata such as company name, contact person,
email, registered devices, service request history, and last interaction date. For vendors,
additional fields such as services provided and linked deployment zones were also shown.

 Profile Management Module

The Profile Management Module was a fundamental part of the platform, designed to
allow users to view and manage their own account information securely and efficiently. A
robust profile section not only enhances user personalization but also plays a crucial role
in access control, data tracking, and overall system interaction.

This module started with the creation of a dedicated frontend page using React, where
users could access their profile details, including their name, role (admin, associate,
vendor, etc.), email ID, contact number, and associated company. The UI was kept clean
and responsive, with a focus on clarity and ease of navigation. The data was fetched from
a PostgreSQL database, where user records were stored with roles and permissions
Page 12
attached. The system ensured that no cross-user data leakage occurred. Additionally, based
on role-based access control (RBAC), some users had limited profile fields editable, while
admins could view and update broader information. To improve user experience, the
profile page included dynamic update forms—allowing users to change specific editable
fields like phone number or password. These forms included frontend validations for
inputs (e.g., phone number format, password strength), and server-side validations were
also performed before any data updates were persisted.

From a design standpoint, the layout was built to be fully responsive, adjusting neatly for
various screen sizes including desktops, tablets, and mobile phones. The page had
collapsible sections, form tooltips, and styled alerts for feedback (like “Profile Updated
Successfully” or “Error Occurred”) to ensure clear communication with the user.

One of the challenges faced in this module was maintaining consistency between session
states and the information displayed. For this, I implemented a system to auto-fetch the
latest user data from the backend when a session resumed, ensuring any updates (e.g., role
changes) reflected immediately upon login.

From a system perspective, this module also laid the groundwork for integrating audit
logs in the future—keeping track of user changes, login times, and profile activity. This
would be useful for administrative oversight and system transparency.

 Service Requests and Alerts Module

The Service Requests & Alerts Handling Module was designed to facilitate real-time
communication between the system and the users, particularly in cases involving device
deployment, maintenance, or issue resolution. This module ensured that alerts and requests
generated by the system or users were properly routed, displayed, and actionable by the
appropriate personnel.

Service Requests were generated when a user or system action required manual
intervention, such as installing a new device, editing existing configurations, or verifying
abnormal operational data. These requests were logged and stored in a PostgreSQL table
along with metadata such as timestamps, device IDs, request types, priority levels, and
user IDs. On the backend, I designed API endpoints that allowed fetching pending
requests, updating their status (approved, rejected, or pending), and logging actions taken.

On the frontend, I created a clean and intuitive React-based UI where authorized users
could view all incoming requests in a tabulated format. Each row had details like the
Page 13
device involved, the action requested, the user who initiated it, and action buttons for
approval or rejection. Filters by date, request type, and status were implemented to help
navigate large datasets. From a UX perspective, the design emphasized visual cues—
color-coded severity levels (red for critical, orange for warning, green for resolved)—and
ensured responsiveness across all devices. I implemented modals that opened on click for
each alert, providing detailed logs and recommended actions.

This module significantly boosted the proactiveness and reliability of the platform. It
empowered users to take swift action in the face of system changes or device
malfunctions. It also reduced the dependency on manual communication like emails or
calls, leading to faster resolutions and better system uptime.

 UI/UX Improvement and Responsive Design Module

A critical aspect of my internship involved creating an intuitive, professional, and
accessible user interface that aligned with modern design principles and functioned
seamlessly across all devices. This UI/UX Improvement and Responsive Design
Module spanned across the entire platform and ensured that every webpage—from
dashboards to detailed forms—offered a consistent and engaging user experience.

The work began with a thorough UI audit of the existing pages and components. I
identified inconsistent paddings, irregular font sizes, misaligned components, and non-
responsive layouts that disrupted usability, especially on tablets and mobile phones.
Addressing these issues required a systematic redesign of CSS structure and component
logic.

Using CSS Flexbox, Grid, and Media Queries, I implemented responsive design
standards across all major views. Each webpage was tested across screen sizes to ensure
content reflowed elegantly without breaking. For example, in tables, unnecessary columns
were hidden in smaller viewports while preserving critical information like device names
and statuses. I used React’s conditional rendering and dynamic class assignments to
enable this adaptability. From a design system perspective, I followed a minimalist and
consistent color scheme, with clearly defined primary, secondary, and danger colors to
guide user attention. Reusable CSS classes and components were created to ensure
maintainability and scalability. This consistency made the application look clean and
professional while reducing development time for new features.

Another major area of work was on component alignment and layout spacing. I adjusted
margins, padding, and placement of buttons, inputs, and headings to enhance readability
Page 14
and reduce clutter. The profile and device management pages especially benefited from
these improvements, becoming more user-friendly and professional-looking. In addition to
static improvements, I also worked on interactive UI elements—such as dropdowns,
modals, confirmation dialogs, and hover effects—that improved the system’s usability.
These elements were built using pure CSS or lightweight libraries to maintain
performance.

Furthermore, accessibility enhancements were introduced. I ensured proper labeling of

input fields, appropriate use of semantic HTML elements, and contrast ratios that met
WCAG standards. These changes made the website more inclusive for users with visual or
cognitive impairments. Finally, I collaborated with testers and other developers to gather
user feedback from field testing, after which several UI tweaks were implemented. For
instance, form placeholders were clarified, alert badges were made more visible, and
loading states were introduced for better user communication.

Page 15
CHAPTER 5
WORK DETAILS & TECHNICAL IMPLEMENTATION
During my full-stack development internship at Rosette Smart Life, I was entrusted with
building and refining several integral components of a web application designed for NICO
Nanobubble India Co. The platform was intended for seamless remote management of
devices and customer data. My work primarily involved the frontend (React.js) and
backend (Node.js) development, with a focus on page creation, user experience
enhancement, and responsive interface design. Below is a detailed breakdown of the key
pages I created and the technical implementation involved:

 ADD NEW DEVICE PAGE

The Add New Device Page was one of the first core components I built. This page allows
administrators to register new IoT devices into the system and assign them relevant
metadata such as device ID, location, status, and associated customer/company.

From a frontend perspective, I implemented a form-based layout using React functional

components and hooks for managing form state. I incorporated controlled inputs for
every field, ensuring data integrity and validation before submission. Client-side
validation was implemented for mandatory fields using custom logic and integrated with
alert pop-ups for user feedback.

To connect with the backend, I wrote API calls using Axios, which sent POST requests to
the Node.js backend. These requests triggered server-side logic to store the new device
data in a PostgreSQL database. A major consideration in the backend logic was
preventing duplicate entries and validating device metadata.

Security was maintained by integrating authentication tokens, ensuring only authorized

users could access this page. The UI was designed to be clean and responsive, using CSS
Flexbox and Grid, and adjusted dynamically across various screen sizes for tablet and
mobile views.

 PROFILE PAGE

Page 16
The Profile Page served a dual function: authenticating users securely and displaying
user-specific data upon login. I worked extensively on both the UI and development of the
page. For the profile section, I designed a dynamic layout that fetched and displayed user
data based on the JWT token. I integrated middleware logic that ensured only
authenticated users could access profile data. The profile page included user role, name,
email, and company affiliation, with an option for updating profile information in future
updates. This feature laid the groundwork for role-based access control in subsequent
pages.

UI responsiveness was enhanced using media queries and conditional rendering based on
device width, ensuring a seamless experience across desktops and smartphones.

 ACCESS MANAGEMENT PAGES

To enforce role-based access control, I implemented two critical modules: one for
managing Registered Companies and another for Vendors. These pages were accessible
only by users with admin-level privileges.

I designed distinct pages listing all companies and vendors registered on the platform.
Each entry had options to update access roles, link or delink devices, or disable accounts.
Data fetching was handled via GET API requests, while updates triggered PATCH or
POST requests, all protected through authentication headers.

For UI, I used tabular data displays enhanced with sorting and filtering functionality using
third-party libraries like React Table. I also implemented conditional rendering logic to
display only relevant options based on the user’s role.

This access management module significantly contributed to maintaining data

segmentation and operational hierarchy, ensuring that only authorized personnel could
manage or view sensitive data.

 LEARNING TRAINING TO CREATE A GRAPHICAL

DASHBOARD
Midway through the internship, I was assigned the task of watching a React-based
dashboard creation tutorial and then replicating the dashboard using what I had learned.
This was a transformative experience for me, as it allowed me to understand how real-
world React applications are structured and managed. Through this process, I learned
about:
Page 17
 Component-based architecture: I understood how to break down a large UI into
reusable functional components.
 State and props management: I practiced how data flows between parent and child
components and how state is managed using React hooks like useState, useEffect, and
useContext.
 Routing and navigation: I implemented React Router and grasped the logic of nested
routes, route protection, and parameter passing.
 Design systems and styling: I explored how to use CSS-in-JS, Tailwind CSS, and
Material UI to quickly build consistent, responsive designs.

Through this hands-on replication task, I gained confidence in building scalable layouts,
dynamically rendering data, and optimizing performance using lazy loading and
memoization techniques. This exercise helped me apply those learnings directly to the
main project, especially while working on the Service Requests Page and UI
responsiveness fixes.

 SERVICE REQUESTS AND ALERTS PAGE

This module was among the most interactive components I built. The Service Requests
and Alerts Page allowed users to view system-generated notifications and requests
regarding device deployments, edits, or fault alerts.

The UI featured a card-based layout where each alert/request was displayed as a separate
item, detailing the device name, location, and nature of the alert. I used asynchronous
polling to check for new alerts every few seconds and update the UI in real-time without
requiring a full-page refresh.

On the backend, I created logic that monitored device metrics and triggered alert records
based on thresholds defined by the system. These were stored in a dedicated database table
and retrieved through secure APIs.

I also added interactive buttons to approve, dismiss, or escalate requests. Each action
triggered an API call to update the alert status and store the response log, enabling
traceability and accountability.

This page played a critical role in enhancing the reactiveness of the system, giving
admins a real-time interface to address device issues as they arose.

 UI AND RESPONSIVENESS FIXES

Page 18
Beyond creating specific pages, a significant part of my contribution was in refining the
UI/UX and responsiveness of the entire web application. This involved:

 Pre-Registered Devices Page: I improved the layout by organizing device metadata

in collapsible cards. I ensured that all content was clearly visible and accessible even
on smaller screens. Font sizes and paddings were dynamically adjusted using
responsive CSS units like rem and vw.
 Device Details Page: This page had multiple dynamic components including status
charts, logs, and connectivity history. I implemented lazy loading and conditional
rendering to ensure fast performance. I also integrated real-time device status
indicators using WebSocket-based data fetching like to check whether the device is
connected to the power or not.
 Customers Page: This section displayed a list of customers with filters and role-based
views. I improved its responsiveness by wrapping elements inside fluid containers and
optimizing the data table to collapse gracefully on smaller screens. A search bar and
pagination were added to improve usability.
 Global Fixes: I standardized the color palette across all pages, made forms accessible
with proper labeling, and ensured cross-browser compatibility. Every major view was
tested using Chrome’s device toolbar for responsiveness validation.

Page 19
CHAPTER 6
CONCLUSION
The internship at Rosette Smart Life, working on a project for NICO Nanobubble India
Co., has been an incredibly enriching and transformative experience. Over the course of
this internship, I had the opportunity to apply my theoretical knowledge in a real-world
environment and gain hands-on experience as a full-stack developer. From understanding
project requirements and analyzing large codebases to implementing complete modules
and optimizing UI/UX, each phase of the internship challenged me to grow technically
and professionally.

Through this project, I became proficient in several key technologies such as React.js,
Node.js, Express.js, PostgreSQL, Git, and RESTful APIs, and understood how they
come together to create scalable and maintainable web applications. I improved not only
my coding skills but also learned how to structure applications, handle complex routing
logic, implement access control, and work with databases in a production environment. I
learned how to write clean, reusable code, collaborate in a version-controlled environment,
and resolve real-time issues effectively. Additionally, I developed a deeper appreciation
for UI/UX design principles and responsive development, which significantly improved
the usability and accessibility of the platform.

Beyond technical development, this internship allowed me to understand how real-world

software teams collaborate, iterate based on feedback, and ensure product quality through
testing and field trials. I learned the importance of communication, team coordination,
documentation, and adaptability in a professional setting. I also took on responsibilities
such as guiding new team members, conducting functionality checks, and participating in
planning discussions, which helped me grow in terms of leadership and ownership.

In summary, this internship provided me with a comprehensive learning experience that

bridged the gap between classroom learning and industry expectations. It equipped me
with both the technical skills and the professional mindset required to work in the software
industry. The knowledge, experience, and confidence gained during this period will

Page 20
undoubtedly play a crucial role in shaping my future as a software developer and
technology professional.

Page 21
References
· React – A JavaScript library for building user interfaces.
Meta (Facebook):https://react.dev/

· Node.js – JavaScript runtime built on Chrome’s V8 JavaScript engine.

Node.js Foundation:https://nodejs.org/

· Express – Fast, unopinionated, minimalist web framework for Node.js.

ExpressJS Documentation:https://expressjs.com/

· PostgreSQL – The world’s most advanced open-source relational database.

PostgreSQL Global Development Group: https://www.postgresql.org/

· Git – Distributed version control system.

Git SCM Documentation: https://git-scm.com/doc

· GitHub – Collaboration platform for software development.

GitHub Docs: https://docs.github.com/

· React Router – Declarative routing for React.

Remix Software: https://reactrouter.com/en/main

· Material UI – React components for faster and easier web development.

MUI Documentation: https://mui.com/

· Tailwind CSS – A utility-first CSS framework for rapidly building custom designs.
Tailwind Labs: https://tailwindcss.com/

· VS Code – Visual Studio Code Editor.

Microsoft Corporation: https://code.visualstudio.com/

· DigitalOcean Community Tutorials – Git Merge Conflicts.

DigitalOcean: https://www.digitalocean.com/community/tutorials/how-to-resolve-merge-
conflicts-in-git

· W3Schools – CSS and Responsive Web Design.

W3Schools.com: https://www.w3schools.com/css/

· MDN Web Docs – JavaScript and Web Development Resources.

Mozilla Developer Network: https://developer.mozilla.org/

· React Dashboard Tutorial – YouTube & Open Source GitHub Repos.

https://www.youtube.com/watch?v=wYpCWwD1oz0&t=502s

Page 22