1|P age

Netaji Subhas University Of

Technology

Training and Internship

Report
(COCSC21)

Submitted by:
Lekha Soni (2020UCO1694)
COE Section 3
Semester 7
2|P age

Table of Content

SNo Title Page no.

1 Certificate 3

2 Acknowledgement 4

3 Abstract 5

4 About the company 6

5 Project Description and 7

Technical Aspects
6 Challenges 12

6 Key takeaways and 14

learning
7 Conclusion 15
3|P age

Internship Certificate
 4|P age

Acknowledgement

I, Lekha Soni, would like to express my sincere gratitude towards

FeetWings Private Limited for providing me the excellent
opportunity to be a part of their Web Development team. I am
very much grateful to our Manager, Hritik Jaiswal, for mentoring
me throughout the internship period and guiding me at every
step. Also, I would like to give a very big thanks to my entire team
and friends for supporting me every time and helping me in
every possible way. The internship provided me with a great
experience and also helped to enhance my skills and learn new
skills.

I would like to thank the entire FeetWings team. The project

would not have been possible without their efforts and support.
 5|P age

Abstract

This project report aims to give readers a brief account of the work done
during my summer internship (remote- work from home) 2023 at
FeetWings. The 8 weeks of my internship extended from 25 May 2023 to
29 July 2023.This report also presents an insight into the project
allocated to me at FeetWings and an explanation of the steps taken to
complete the task allocated.

The objective of my project was to develop and maintain a dynamic

website for the start-up which includes a chat feature as well.
 6|P age

About the Company

FeetWings is a PadUp Ventures mentee startup. Feetwings is co-founded

by Dr. Siddhant Bhargava, Hrithik Jaiswal and Animesh Kumar. Dr.
Bhargava is a lifestyle medicine-obesity specialist & celebrity nutritionist
while Hrithik and Animesh are 3rd year biotechnology students from
NSUT, Delhi, in November 2020.
Their past experience has helped them in understanding the real pain
points in current solutions and after witnessing the horrifying outcome of
diabetes, they cemented their thoughts on the pressing need of coming up
with a holistic solution for diabetics. It aims at making a pain free &
affordable alternative for measuring blood glucose levels along with a
system that alerts diabetics with other associated ailments such as foot
ulceration and peripheral neuropathy with help of Machine Learning &
AI. With the motto of “developing cost effective and easy-to-use
management tools to help diabetics lead a better life”, FeetWings
introduces a smart healthcare assistant that continuously monitors
patient's vitals such as foot temperature and blood glucose non-
invasively through its Smart Socks, providing diabetics an accurate, cost
effective and non-invasive tool for monitoring and management of blood
glucose, peripheral neuropathy and foot ulcers.
 8| P a g e

About the Project

The internship project centered on the development of a website

for a startup specializing in advanced healthcare technology – a
smart sock designed to provide early warnings and manage
diabetes complications non-invasively. The website served as a
comprehensive platform, showcasing the innovative product's
features and benefits. It prominently featured an integrated chat
application, facilitating direct communication with users for
inquiries and support. By combining information dissemination
with real-time user interaction, the website aimed to promote
awareness, engagement, and accessibility, furthering the
startup's mission in revolutionizing diabetes management. The
project offered valuable experience in merging healthcare
technology with web development, fostering a user-friendly and
informative online presence for the innovative smart sock.
 8| P a g e

Tech Stack Used

FRONT-END:

➢ Next.js for the web application framework.

➢ TypeScript for enhanced code quality and type safety.
➢ Tailwind CSS for styling and responsive design.
➢ Twilio Conversations SDK for building the chat feature

BACK END

➢ GraphQL for querying and manipulating data.

➢ Apollo Client for managing GraphQL state and connecting to the
backend.
 8| P a g e

Project Overview and

Technical Aspects

➢ Onboarding and Project Familiarization

The internship began with a comprehensive onboarding process, where I

familiarized myself with the startup's mission and goals. I collaborated
with the development team to understand the scope of the web
application and its role in attracting and engaging users.

➢ Front-End Development with Next.js and Tailwind CSS

I took the lead in designing and implementing the front-end of the

website using Next.js and Tailwind CSS. This involved creating responsive
and visually appealing user interfaces that aligned with the startup's
brand. I ensured that the website was not only aesthetically pleasing but
also highly performant and accessible.

Tasks and Achievements:

1. Project Setup:
- Set up a Next.js project, leveraging its benefits such as server-side
rendering and easy routing.
- Configured TypeScript for type safety, enhancing the robustness of the
codebase.

2. Responsive Design with Tailwind CSS:

- Utilized Tailwind CSS to implement a responsive and visually
appealing design that aligned with the startup's brand.
- Leveraged Tailwind's utility-first approach for efficient and
maintainable styling.
 8| P a g e

3. Component Architecture:
- Designed and implemented key components that would serve as
building blocks for the website's various sections.
- Ensured a modular and scalable component architecture for easier
maintenance and future expansion.

4. Accessibility Considerations:
- Paid attention to accessibility best practices, ensuring that the website
was usable and navigable for users with diverse needs.

➢ Twilio Integration for Chat Feature

Integrating the Twilio Conversations SDK to enhance user engagement

through a real-time chat feature on the startup's website.

Tasks and Achievements:

1. Twilio Conversations SDK Integration:

- Integrated the Twilio Conversations SDK into the web application to
facilitate real-time communication between users.
- Implemented a chat interface that allowed users to engage in
conversations seamlessly.

2. User Authentication with Twilio:

- Established secure user authentication mechanisms using Twilio to
ensure that only authorized users could participate in the chat feature.

3. Real-Time Updates:
- Utilized Twilio's real-time capabilities to provide users with instant
updates and notifications when new messages were sent or received.

4. Error Handling and Edge Cases:

- Implemented robust error-handling mechanisms to gracefully manage
any unexpected scenarios, such as connectivity issues or message
delivery failures.
 8| P a g e

- Considered edge cases to ensure a smooth user experience under

various conditions.

➢ Reusable Components and GraphQL + Apollo Integration

Creating reusable components with interactive UI elements and

integrating them with the backend using GraphQL and Apollo.

Tasks and Achievements:

1. Reusable Component Development:
- Identified common UI patterns and functionalities across the website.
- Created reusable components with interactive elements, enhancing
consistency and maintainability.

2. GraphQL Schema Definition:

- Worked on defining and understanding the GraphQL schema needed
for communication between the front-end and the backend.
- Collaborated with the backend team to ensure alignment between the
front-end queries and the backend data structure.

3. Apollo Client Integration:

- Integrated Apollo Client into the front-end application to manage the
state of the GraphQL queries and mutations.
- Utilized Apollo's caching mechanisms to optimize data retrieval and
minimize unnecessary requests.

4. Connected Front-End with GraphQL Backend:

- Implemented GraphQL queries and mutations in the front-end
components to fetch and manipulate data from the backend.
- Ensured that the components seamlessly interacted with the GraphQL
server, providing a smooth user experience.
 8| P a g e

These weeks were crucial in shaping the foundation of the startup's

website, integrating key features such as real-time chat and laying the
groundwork for future scalability and expansion. The tasks undertaken
during these weeks contributed significantly to the overall functionality,
interactivity, and user engagement of the web application.

➢ Key Achievements:

1. Developed and maintained a dynamic and responsive website using

Next.js, TypeScript, and Tailwind CSS, aligning with the startup's
vision and brand identity.
2. Successfully integrated the Twilio Conversations SDK to implement
a robust and real-time chat feature, enhancing user engagement.
3. Created reusable components with interactive and accessible UI,
connecting seamlessly with the backend through GraphQL and
Apollo.
 16| P a g
e

Challenges
The internship project encountered several challenges during
the development of the website for the startup focusing on a
smart sock for diabetes management.

1. Integration Complexity:
- Integrating diverse technologies such as Next.js, TypeScript,
Tailwind CSS, Twilio Conversations SDK, GraphQL, and Apollo
introduced complexities. Ensuring seamless collaboration and
functionality across these components demanded careful
coordination and troubleshooting.

2. Healthcare Compliance:
- Adhering to healthcare regulations and ensuring the
website's alignment with privacy and security standards posed
a significant challenge. Meeting compliance requirements while
providing an engaging and user-friendly experience required
meticulous attention to detail.

3. Real-Time Chat Implementation:

- Integrating the Twilio Conversations SDK to establish a real-
time chat feature presented challenges in terms of user
authentication, message delivery, and ensuring a smooth and
responsive chat experience. Overcoming these hurdles required
in-depth knowledge of Twilio's capabilities and robust
debugging.

4. Responsive UI Design:
- Crafting a website that caters to a diverse audience with
varying devices and screen sizes posed challenges in achieving a
responsive UI design. Balancing aesthetics with functionality
across different platforms required continuous testing and
refinement.
 16| P a g
e

5. Accessibility Standards:
- Ensuring the website's accessibility to users with diverse
needs and abilities was a priority. Meeting accessibility
standards (such as WCAG) demanded meticulous attention to
design details, coding practices, and user testing to guarantee
an inclusive user experience.

6. User Education and Engagement:

- Communicating the complex functionalities of the smart sock
effectively on the website proved challenging. Balancing
technical details with user-friendly content and providing
educational resources required thoughtful content strategy and
design.

7. Project Time Constraints:

- Meeting project deadlines within the specified timeframe
presented a consistent challenge. Managing tasks efficiently,
prioritizing features, and addressing unexpected issues
required effective project management and adaptability to
changing timelines.

8. Scalability Planning:
- Anticipating the potential growth of the startup and ensuring
that the website could scale accordingly presented challenges.
Planning for scalability involved considerations for increased
user traffic, feature expansions, and evolving technology
requirements.

Navigating these challenges required a collaborative and

problem-solving approach. Overcoming these hurdles not only
contributed to the successful completion of the internship
project but also provided valuable insights and skills in
handling multifaceted web development challenges in a
dynamic and technology-driven environment.
 16| P a g
e

Key takeaways and learnings

I learned a lot during the internship, I was able to not just
able to contribute in the field of developing the application,
but in the managerial and designing aspect as well.
Some of the key takeaways are:
• The importance of documentation. The
documentation part is something that most
developers hate, but at times when we have to re
use some ones product, tools, application the
documentation reduces the time it takes toget the
application ready. Not just that the documentation
also reduces the re writing of the code and allows
early corrections reducing both time and efforts
• Importance of clean code, here at the university
level we do not focus on writing clean code, we just
try to make it work using lot of short handed
variable names. But at the company level when a lot
of people are working on same code, it becomes
impossible to understand previous code ifthe code
quality is low
• Importance of network. A network is
something that isessential for every employee be
it a developer, manager,designer, business etc.
With a wide network we can get access to a lot
of help and it helps us to understand the
company and the project at the wider level.
• Importance of meetings, sometimes the developers
think that meeting reduces their available time to
code. But whenworking for a longer duration I
realized that productive meetings actually reduces the
overall time, since we can figure out redundant work
at early stage, reduce the errors and fixes at the later
stage.
 16| P a g
e

Conclusion

In conclusion, the internship project culminated in the successful

development of a sophisticated and user-centric website for the forward-
thinking startup specializing in a smart sock for diabetes management.
Leveraging a tech stack that included Next.js, TypeScript, Tailwind CSS,
Twilio Conversations SDK, and GraphQL with Apollo, the website
emerged as a comprehensive platform, seamlessly combining information
dissemination with real-time user interaction. Throughout the project,
various challenges, including technology integration complexities,
healthcare compliance requirements, and the need for a responsive and
accessible design, were effectively navigated. The incorporation of a real-
time chat feature using Twilio Conversations SDK underscored the
commitment to fostering user engagement and support, demonstrating a
holistic approach to user interaction.

The project's success is not only attributed to technical proficiency but

also to a keen awareness of healthcare regulations, accessibility
considerations, and the delivery of an exceptional user experience. The
strategic emphasis on scalability planning and effective project
management reflects a forward-looking approach, anticipating the
potential growth and evolution of the startup. The collaborative nature of
the project highlighted the importance of teamwork, adaptability, and a
user-focused mindset. The website now stands as a digital representation
of the startup's groundbreaking product and exemplifies the successful
integration of healthcare technology with contemporary web
development practices.

As the internship concludes, the gained experience in overcoming

challenges, leveraging diverse technologies, and contributing to an
innovative healthcare solution serves as a solid foundation for future
endeavors in web development and health-tech integration. The project's
success is a testament to the dedication, problem-solving skills, and
collaborative spirit invested in achieving the startup's mission of
revolutionizing diabetes management.
16| P a g
e
16 | P a g e
12 | P a g e