Institute of Engineering and Technology

Dr Ram Manohar Lohia Awadh University

Ayodhya (224001)

TWO MONTH’S INTERNSHIP REPORT

On
SDE INTERN AT BLUESTOCK FINTECH

Submitted By
ANUJ KUMAR GUPTA
Roll No- 21314
Information Technology

Under the Guidance of

BLUESTOCK FINTECH
From 01-AUG-2024 to 30-SEP-2024
 DECLARATION

I, ANUJ KUMAR GUPTA, hereby declare that the internship report titled "Internship Report for
SDE INTERN at Bluestock Fintech is an original piece of work carried out by me during my
internship tenure from 1st Aug 2024 to 30th Sep 2024.

This report is based on my practical experiences and contributions made during the internship period.
I affirm that the content provided is authentic, and I have not plagiarized or reproduced it from any
other source.

I also declare that this report is being submitted as a requirement for my academic curriculum and
has not been submitted to any other institution or organization for any purpose.

(Signature of student)

ANUJ KUMAR GUPTA

Date: 23/11/2024
 ACKNOWLEDGEMENT

I would like to express my sincere gratitude to Bluestock Team, for providing me with the
opportunity to undertake this internship as a Software Developer Intern (SDE). It has been a
rewarding experience that has significantly enhanced my technical and professional skills.

I extend my heartfelt thanks to Mr. Ganesh Karale, Founder and CEO of Bluestock Fintech and
Mentor Om Sai Charan, for his constant support and guidance throughout the internship period. I
am also grateful to my team members for their invaluable coordination, timely feedback, and
encouragement, which played a crucial role in completing our project successfully.

I would also like to thank my college, IET, Dr. Ram Manohar Lohia Avadh University, Ayodhya,
for equipping me with the necessary knowledge and skills that enabled me to perform effectively
during the internship. Finally, I am deeply thankful to my family and friends for their unwavering
support and motivation.

Thanking You.

ANUJ KUMAR GUPTA

 ABSTRACT

This report summarizes my Two-month internship experience as a “Software Developer

Intern” at Bluestock Fintech,. The internship provided an opportunity to enhance my technical
and professional skills through real-world projects and responsibilities. During this period, I
worked on developing responsive and cross-browser-compatible web application using
ReactJs, Tailwind CSS, HTML5, Python, Django. Additionally, I optimized web
applications for better performance, implemented front-end best practices, and collaborated
with design and development teams to ensure seamless integration.

The internship enabled me to apply theoretical knowledge to practical scenarios while staying
updated with the latest web development trends and technologies. It was a valuable learning
experience that contributed significantly to my growth as a web developer and helped me
understand the importance of teamwork, communication, and meeting project deadlines.
 TABLE OF CONTENTS

1. About the Internship

2. Roles and Responsibilities
3. Technical Skills Acquired
4. Challenges and Solutions
5. Learning Outcomes
6. Bibliography
 ABOUT THE INTERNSHIP

Company Name: BLUESTOCK FINTECH

Internship Duration: 1st Aug 2024 – 30th Sep 2024

Internship Position: Software Developer Intern (SDE)

Location: Remote

Internship Objective:

The primary objective of this internship was to gain practical experience in full-stack web
development, with a strong focus on front-end technologies and project management. During
my tenure, I contributed to designing, developing, and maintaining web applications,
leveraging technologies such as HTML, Tailwind CSS, JavaScript, React, Python, and
Django.

My goal was to bridge the gap between academic learning and professional work by applying
theoretical concepts to real-world scenarios. The internship also provided an opportunity to
improve my problem-solving abilities, coding efficiency, and collaboration skills.

Internship Highlights:

 Project Leadership: As the Frontend Team Co-Lead, I managed and coordinated

tasks among team members to ensure smooth project progress and delivery.

 Collaboration: Worked closely with senior developers, designers, and stakeholders to

implement key features in web applications, ensuring high-quality outcomes.

 Practical Insights: Gained in-depth exposure to the workings of a stock marketing

company, understanding how web development integrates with larger marketing
strategies and customer engagement.

 Skill Development: Enhanced my expertise in building responsive and user-friendly

interfaces while ensuring robust backend functionality and performance optimization.

This internship was instrumental in equipping me with technical and leadership skills, as well
as a comprehensive understanding of how technology drives business outcomes. It marked a
significant milestone in my journey toward becoming a proficient software developer.
 ROLES AND RESPONSIBILITIES

As a Software Developer Intern at Bluestock Fintech, I took on key responsibilities as the

Frontend Team Co-Lead, driving the development of responsive, efficient, and user-centric web
solutions.
1. Team Leadership and Collaboration
o As the Co-Lead of the frontend team, I coordinated tasks, set priorities, and ensured
timely delivery of project milestones.
o Collaborated with the design and backend teams to achieve seamless integration
between front-end elements and backend functionalities.
o Participated in team meetings, code reviews, and mentoring sessions to foster
knowledge sharing and teamwork.
2. Developing and Maintaining Web Pages
o Led the design and development of responsive and cross-browser compatible web
pages using HTML, CSS, and JavaScript.
o Ensured adherence to W3C standards and implemented SEO best practices to
maximize web page performance and visibility.
3. Optimizing Web Performance
o Focused on improving website speed and scalability by optimizing images,
minifying scripts, and implementing lazy loading techniques.
4. Troubleshooting and Debugging
o Identified and resolved compatibility issues across multiple browsers and devices.
o Implemented bug fixes and performance optimizations, ensuring a seamless and
engaging user experience.
5. Research and Innovation
o Kept updated with the latest trends in front-end development technologies to
enhance team capabilities.
o Proposed and implemented improvements to UI/UX design and website
functionality based on research and feedback.
This role provided me with hands-on experience in project leadership and technical expertise,
significantly enhancing my ability to deliver impactful software solutions while working
collaboratively within a team.
 TECHNICAL EXPERTISE ACQUIRED

Web Development Technologies:

Web development involves designing, creating, and maintaining websites that are functional,
responsive, and interactive. During my internship at Bluestock and other projects, I extensively
utilized a variety of web development technologies and tools. Below is a detailed explanation of
these technologies, their role in web development, and how I applied them in real-world scenarios.

1. HTML (Hypertext Markup Language)

HTML serves as the backbone of web development, defining the structure and content of web pages.
Every project I worked on began with HTML, which helped create the foundation for the user
interface.
Key Concepts in HTML:
 Elements and Tags: Used <div> tags to structure layouts and semantic tags like <header>
and <footer> for better accessibility.
 Attributes: Leveraged attributes such as id and class to organize and style components
dynamically with CSS and JavaScript.
 Semantic HTML: Implemented semantic tags like <section> and <article> to improve SEO
and accessibility.
Where I Used HTML:
 In the AI Tutor Application, I structured the question and answer sections using HTML,
ensuring a logical flow for user interactions.
 In the Health Tracking Application, I created forms for users to log health metrics like body
temperature, blood pressure, and heart rate.

Impact: HTML's simplicity and versatility allowed me to focus on creating well-organized and
accessible websites, forming the foundation for further enhancements with CSS and JavaScript.
2. CSS (Cascading Style Sheets)
CSS is crucial for styling and layout, making web pages visually appealing and responsive. I used
CSS extensively to enhance the aesthetics and usability of my projects.
Key Concepts in CSS:
 Box Model: Managed spacing and layout using margins, padding, and borders to create
clean, structured designs.
 Responsive Design: Utilized media queries to ensure a seamless experience across devices.
 CSS Grid and Flexbox: Designed complex layouts with CSS Grid for dashboards and
Flexbox for mobile-friendly navigation bars.
 Animations and Transitions: Created hover effects and subtle animations for improved
interactivity.
Where I Used CSS:
 In the Student Compass Project, I styled dashboards and user profiles, focusing on
readability and design consistency.
 In the Health Tracking Web Application, CSS was used to create a visually appealing
metrics dashboard, including charts and data visualizations.

Impact: CSS allowed me to transform basic HTML structures into engaging user interfaces,
enhancing the overall user experience and ensuring responsiveness on all devices.

3. JavaScript (JS)
JavaScript brought interactivity and dynamic functionality to my projects, enabling user engagement
and real-time updates.
Key Concepts in JavaScript:
 DOM Manipulation: Used JS to dynamically update page content, such as rendering quiz
questions in the AI Tutor Application.
 Event Handling: Managed user interactions like button clicks and form submissions.
 AJAX: Enabled asynchronous data fetching in the Health Tracking Application, allowing
users to log health metrics without page reloads.
 ES6+ Features: Simplified code with modern features like promises, async/await, and arrow
functions.
Where I Used JavaScript:

 In the Quiz Application, JavaScript was used to navigate between questions, handle answer
submissions, and calculate scores in real-time.
 In the AI Tutor Application, I implemented dynamic quiz rendering and live validation for
fill-in-the-blank answers.
Impact: JavaScript elevated the interactivity of my projects, creating dynamic and user-friendly
experiences while optimizing performance.

4. Front-End Frameworks and Libraries

To streamline development, I leveraged front-end frameworks and libraries that offered reusable
components and robust features.
Frameworks and Libraries:

 React.js: Utilized React for building modular and reusable UI components in the AI Tutor
Application, particularly for rendering quizzes and managing state with Redux.
 Bootstrap: Used Bootstrap's grid system and pre-built components for responsive layouts in
the Student Compass project.
 Chart.js: Integrated charts in the Health Tracking Application to visualize user data
effectively.
Where I Used Them:
 React.js allowed me to create a dynamic and responsive quiz system with real-time feedback.
 Bootstrap and Chart.js streamlined design and data visualization, reducing development time.
Impact: These tools helped me build scalable, maintainable, and aesthetically pleasing web
applications efficiently.
5. Web Development Tools
Modern web development is incomplete without tools that enhance productivity and ensure code
quality.
Tools I Used:
 Git: Managed version control for all projects, ensuring collaborative efficiency during my
internship at Bluestock.
 VS Code: Used for coding, leveraging extensions for linting, debugging, and syntax
highlighting.
 Chrome DevTools: Debugged issues and optimized performance, particularly in the AI
Tutor Application, where I resolved rendering bugs.
Impact: These tools streamlined my workflow, minimized errors, and improved the quality of my
deliverables.

6. Hosting and Website Management

Deploying web applications is as critical as building them. I gained hands-on experience in hosting
and managing websites on servers.
Key Concepts:
 Deployed projects on Netlify and Vercel for front-end hosting.
 Hosted full-stack applications on Heroku and Render, managing both the server and
database.
 Configured DNS settings and enabled SSL certificates for secure access.
Where I Applied It:
 Hosted the AI Tutor Application for testing and demonstration purposes during client
reviews.
 Deployed the Health Tracking Application to enable remote access for potential users.
Impact: Learning hosting and management ensured my projects reached real users, providing a
complete end-to-end development experience.
7. Debugging and Optimization
Debugging and optimization were crucial for delivering seamless user experiences.

Skills Gained:
 Optimized load times using code splitting and lazy loading in React applications.
 Debugged state management issues in the Quiz Application, ensuring smooth question
navigation.
Impact: These practices enhanced application performance, reduced latency, and provided a
polished user experience.

8. UI/UX Design Collaboration

Understanding user needs and collaborating with designers improved my perspective on how front-
end development contributes to user satisfaction.

Collaborations:
 Worked with UI/UX teams to design intuitive dashboards for the Student Compass project.
 Integrated feedback from testers to improve navigation and accessibility in the AI Tutor
Application.
Impact: This experience highlighted the importance of user-centric design in building impactful
applications.
 CHALLENGES AND SOLUTIONS

1. Cross-Browser Compatibility:

 Challenge: Ensuring that web pages appeared correctly on different browsers.

 Solution: Conducted extensive cross-browser testing and used browser-specific

prefixes for CSS properties.

2. Performance Issues with Heavy Web Pages:

 Challenge: Some web pages were loading slowly due to large images and
unoptimized scripts.

 Solution: I used image compression, implemented lazy loading, and minimized

JavaScript files to improve performance.

3. Dynamic State Management for Complex User Interactions

o Challenge: Managing complex states in the application caused issues like
unexpected behavior and data inconsistencies during navigation and updates.
o Solution: Implemented Redux for centralized state management, utilized middleware
like Redux Thunk for handling asynchronous actions, and refactored code to ensure
predictable state transitions.
 LEARNING OUTCOMES

 Gained in-depth understanding of front-end development tools and technologies:

 Acquired proficiency in frameworks like React.js, Bootstrap, and Tailwind CSS to build
responsive and dynamic web interfaces.
 Mastered state management using Redux and modern JavaScript ES6+ features.

 Developed the ability to troubleshoot and debug issues across multiple platforms:
 Resolved complex bugs using Chrome DevTools and other debugging tools, ensuring
consistent functionality across browsers and devices.
 Diagnosed and fixed performance bottlenecks in both front-end and back-end systems.

 Improved collaboration and communication skills by working remotely with a diverse team:
 Coordinated effectively using tools like Slack, Zoom, and Google Workspace for project
discussions and updates.
 Contributed to GitHub repositories by managing pull requests, code reviews, and version
control.

 Enhanced problem-solving skills in optimizing web performance and enhancing user

experience:
 Applied techniques like lazy loading, code splitting, and caching to reduce page load times.
 Implemented SEO best practices and accessibility features to improve user engagement.

 Strengthened back-end development expertise:

 Gained hands-on experience with Node.js and Express.js for building scalable REST APIs.
 Learned database design and optimization techniques using MongoDB and MySQL.

 Learned effective project management and time management:

 Balanced multiple projects and deadlines, delivering functional and well-tested applications.
 Documented workflows and maintained structured task lists to ensure efficient progress
tracking.

 Acquired knowledge of real-world application deployment and hosting:

 Deployed full-stack applications on platforms like Netlify, Vercel, and Heroku.
 Configured DNS and SSL certificates for secure, professional-grade application hosting.

 Broadened understanding of user-centric design principles:

 Collaborated with UI/UX designers to create intuitive interfaces and improve navigation
flow.
 Gathered and applied user feedback to refine features and enhance usability.
 BIBLIOGRAPHY

MDN Web Docs. "HTML5." Mozilla Developer Network (MDN).

https://developer.mozilla.org/en-US/docs/Web/HTML
Description: This source provided detailed documentation on HTML5 elements, attributes,
and best practices.
W3Schools. "CSS Tutorial." W3Schools.com. https://www.w3schools.com/css/
Description: W3Schools offered practical guides and examples for learning CSS, including
Flexbox, Grid, and media queries for responsive design.

JavaScript Info. "The Modern JavaScript Tutorial." JavaScript.info. https://javascript.info/

Description: This tutorial helped me grasp core concepts of JavaScript, including DOM
manipulation, event handling, and asynchronous programming.

Bootstrap Documentation. "Bootstrap - The Most Popular HTML, CSS, and JavaScript
Framework for Developing Responsive, Mobile-First Projects on the Web." Bootstrap.
https://getbootstrap.com/
Description: The Bootstrap documentation provided a comprehensive guide on how to use
this responsive framework to build mobile-first websites.
GitHub Docs. "Git Basics." GitHub Docs. https://docs.github.com/en/github/getting-started-
with-github/git-basics
Description: GitHub’s guide to version control and Git helped me understand how to
collaborate on coding projects and track changes efficiently.

Stack Overflow. "Common JavaScript Issues and Fixes." Stack Overflow.

https://stackoverflow.com/questions/tagged/javascript
Description: Stack Overflow served as an essential resource for troubleshooting JavaScript
errors and learning solutions from experienced developers.
MDN Web Docs. "CSS Layouts." Mozilla Developer Network (MDN).
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout
Description: This resource helped me better understand how to design layouts using CSS
Grid and Flexbox, which I applied in the development of the landing pages.