INTERNSHIP – FRONTEND DEVELOPER

AN INTERNSHIP REPORT

Submitted by
AKSHIT MURARKA
200420107100

In partial fulfillment for the award of the degree of

BACHELOR OF ENGINEERING

in

Department of Computer Engineering

Sarvajanik College of Engineering and Technology, Surat

Gujarat Technological University, Ahmedabad

April, 2024

i
 Sarvajanik College of Engineering and Technology, Surat
Dr. R. K. Desai Marg, Opp. Mission Hospital, Athwalines, Surat - 395001

CERTIFICATE
This is to certify that the project report submitted along with the project entitled
INTERNSHIP – FRONTEND DEVELOPER has been carried out by AKSHIT
MURARKKA under my guidance in partial fulfillment for the degree of Bachelor of
Engineering in Computer Engineering, 8th Semester of Gujarat Technological
University, Ahmedabad during the academic year 2023-24.

Prof. (Dr.) Bintu Kadhiwala Prof. (Dr.) Dipali Kasat

Internal Guide Head of the Department

ii
iii
 Sarvajanik College of Engineering and Technology, Surat
Dr. R. K. Desai Marg, Opp. Mission Hospital, Athwalines, Surat - 395001

DECLARATION

We hereby declare that the Internship report submitted along with the Internship entitled
INTERNSHIP - FRONTEND DEVELOPER submitted in partial fulfillment for the
degree of Bachelor of Engineering in Computer Engineering to Gujarat Technological
University, Ahmedabad is a bonafide record of original project work carried out by me
at Department of Computer Engineering, Sarvajanik College of Engineering and
Technology, Surat under the supervision of Prof. (Dr.) Bintu Kadhiwala and that no
part of this report has been directly copied from any students’ reports or taken from any
other source, without providing due reference.

Name of the Student Sign of Student

___________________________ ___________________________

iv
 Acknowledgements
The satisfaction that accompanies the successful completion of this project would be incomplete
without mentioning the people who made it possible, without whose constant guidance and
encouragement would have made efforts go in vain. I consider myself privileged to express gratitude
and respect towards all those who has guided through the completion of projects.

I extend my deepest gratitude to my mentor Prof. (Dr.) Bintu Kadhiwala for guiding, supporting,
and helping me in every possible way.

During my internship, My supervisor Mr. Piyush Jain from DEVX Technology was very helpful and
extended his valuable guidance and provide help whenever required.

I am grateful to Prof. (Dr.) Dipali Kasat, Head of the Department, Computer Engineering, SCET for
giving us the support and encouragement that was necessary for the completion of this internship.

I would also like to express my deepest gratitude to Dr. Hiren H. Patel, Principal of Sarvajanik
College of Engineering and Technology for providing us congenial environment to work in. I would
also like to thank placement cell of the department for giving me an opportunity to be part of this
Internship. I extend my gratitude to all the faculty members for their understanding and guidance that
gave me strength to work to long hours for developing a project and preparing the report.

v
 Abstract
In this report, I outline the tasks I completed during the internship phase, which involved learning
various technologies such as Next.js, JavaScript, ReactJS, and AWS services. I developed a web
application with a serverless backend, including login and registration functionality, using these
technologies. Over eight weeks, I navigated a dynamic journey within my internship, encountering
unique challenges and growth opportunities each week.

In the initial phase, I immersed myself in the project, familiarizing myself with assigned tasks and
getting to know the DevX team. This period included setting up a robust development environment
with Next.js, integrating essential tools, and exploring the project architecture and objectives.

As weeks progressed, my focus shifted to practical implementations, starting with the integration of
AppSync GraphQL APIs. With each passing week, my responsibilities expanded to encompass various
aspects of project development and optimization. I collaborated closely with my team to integrate the
backend and frontend of the project and conducted thorough quality assurance to ensure data
integrity.

As the project advanced, I transitioned to UI/UX development, optimizing performance, and

integrating crucial analytics and AWS services. This progression provided me with invaluable insights
into real-world development challenges, spanning from database management to infrastructure setup,
ultimately resulting in the successful deployment of the project on Vercel.

Through these experiences, I not only improved my technical skills but also gained a deeper
understanding of collaborative teamwork and project management in a professional environment.

vi
 List of Figures

Fig 1.1 Company Logo…………………………………………………….......................... 1

Fig 1.2 Agile SDLC Model………………………………………………………………… 4
Fig 4.1 Login page and register page………………………………………………………. 11
Fig 4.2 New user registration flow…………………………………………………………. 12
Fig 4.3 Wall page…………………………………………………………........................... 13
Fig 4.4 Analytics Page……………………………………………………........................... 14
Fig 4.5 Collection page…………………………………………………….......................... 15
Fig 4.6 Add new component page………………………………………….......................... 16
Fig 4.7 Different add component…………………………………………........................... 17
Fig 4.8 Arrange section and subsection……………………………………………………. 18
Fig 4.9 Final wall page…………………………………………………….......................... 19
Fig 4.10 Preview page………………………………………………………......................... 21

vii
 Table of Contents
Acknowledgement…………………………………………………………………………....... v
Abstract………………………………………………………………………………………… vi
List of Figures………………………………………………………………………………….. vii
Table of Contents………………………………………………………………………………. viii
Chapter 1 Overview of the Company………………………………………………………... 1
1.1 Company Details……………………………………………………….. 1
1.2 Services of the Company……………………………………………….. 2
1.3 Technologies used by the Company……………………………………. 2
1.4 Company website………………………………………………………. 3
1.5 Work being carried out in each department…………………………..... 3
1.6 Schematic Layout………………………………………………………. 4
1.7 Details of Stages of Production………………………………………… 4
Chapter 2 Technologies Used and Learned………………………………………………… 6
2.1 JavaScript……………………………………………………………….. 6
2.2 ReactJs………………………………………………………………….. 6
2.3 Next.js…………………………………………………………………... 7
2.4 Redux…………………………………………………………………… 7
Chapter 3 Introduction of the Project………………………………………………………. 9
3.1 About the Project……………………………………………………….. 9
3.2 Tech Stack Used………………………………………………………... 9
Chapter 4 Implementation of the Project…………………………………………………… 11
4.1 Login and Register page………………………………………………... 11
4.2 New user register flow…………………………………………………. 12
4.3 The wall page…………………………………………………………… 13
4.4 Analytics page………………………………………………………….. 14
4.5 Collection page…………………………………………………………. 15
4.6 Add new component page……………………………………………… 16
4.7 Different add component……………………………………………….. 17
4.8 Arrange section and sub section………………………………………... 18
4.9 Final wall page………………………………………………………….. 18
4.10 Preview page……………………………………………………………. 20

viii
 4.11 Deployment……………………………………………………………... 22
4.12 Quality assurance testing……………………………………………….. 22
Chapter 5 Conclusion………………………………………………………………………… 23
5.1 Overall analysis of internship…………………………………………... 23
5.2 Problem encountered & Possible solution……………………………… 23
5.3 Summary of internship…………………………………………………. 24
References…………………………………………………………........................................... 25
Appendix-I………………………………………………………….......................................... 26
Appendix-II……………………………………………………….......................................... 27

ix
 1. Overview of the Company

1.1 Company Details

Figure 1.1 Company Logo

DEVX Technology is a tech consulting company with a team of superstar developers to solve tech
problems.

Their expert team has helped countless D2C brandsand large organizations navigate the complexities
of modern business with unparalleled expertise. They are enthusiastic about leveraging our expertise
to create new opportunities that will lead to smarter businesses and better lives for all involved.

Their organization is dedicated to using technology to solve complex business problems for both D2C
brands and large enterprises. Their mission is to build a passionate and value-driven organization that
benefits all stakeholders, including customers, employees, suppliers, and society. To accomplish this,
we strive to provide the best business software solutions possible, utilizing innovation and cutting-
edge technologies to stay ahead of the competition.

They are providing solutions for industries such as E-commerce,payment integrations.

● Mission: - Our organization is dedicated to solving complex business problems for both SMEs and
large enterprises by utilizing technology solutions. Our mission is to create a passionate and value-
driven company that benefits all stakeholders, including clients, employees, suppliers, and society. To
achieve this, we strive to provide the best business software solutions, utilizing innovation and cutting-
edge technologies to stay ahead of the curve.

1
● Vision:- To become the most Trusted and Leading ‘Business-Technology’ solutions organization
for D2C brands, Startups, and Growth driven companies.

1.2 Services of the Company

 Custom Software Solutions

 Web AppDevelopment
 Mobile App Development
 Cross Platform App Development
 AWS Integration

1.3 Technologies Used By the Company

1.3.1 Mobile

 React Native
 ReactJs

1.3.2 Frontend

 HTML5
 CSS3
 JavaScript
 ReactJs
 NextJs
 Redux

1.3.3 Backend

 Express
 NodeJs

1.3.4 Database

 AWS
 Dynamo DB

2
1.4 Company Website

https://www.devxtechnology.com/

1.5 Work Being Carried Out In Each Department

● Quality Assurance: A quality assurance specialist ensures that the final product observes the
company's quality standards. In general, these detail-oriented professionals are responsible for the
development and implementation of inspection activities, the detection and resolution of problems,
and the delivery of satisfactory outcomes.

● Development: Researching, designing, implementing, and managing software programs. Testing

and evaluating new programs. Identifying areas for modification in existing programs and
subsequently developing these modifications. Work with developers to design algorithms and
flowcharts. Produce clean, efficient code based on specifications. Integrate software components and
third-party programs.

● Technical Support Team: Technical Support Specialists work in a fast-paced environment, using
their experience in computer and information systems and in customer service management to provide
support to others promptly. They are depended on for their in-depth knowledge of computer hardware
and systems to ensure that company IT systems run efficiently.

● Management Team: The management team is responsible for managing every aspect of the
employment process, including the orientation and training of new staff members. Also assist with
payroll management, so employees receive their pay checks on time.

● Designer Team: UI/UX designers are responsible for the design and implementation of all the
experiences a user has when interacting with a digital tool, such as a website. The UI/UX designer will
work closely with our marketing team and designers to ensure seamless web/mobile design and the
successful implementation of UI/UX best practices and principles across all our digital platforms.

3
1.6 Schematic Layout

● The typical day of a web developer requires meeting with clients and/or management to discuss
website needs, writing code using programming languages, testing applications and interfaces, and
working with other team members to determine website layout.

● Agile Software Development Life Cycle (SDLC) is a framework that defines activities that are
performed during the software development process.

Figure 1.2 Agile SDLC Model

1.7 Details of Stages of Production

1) Requirements: This phase is most fundamental in the SDLC process. In this first phase, all the
requirements are collected from the mentor. All the detail are discussed with the industrial mentor.it
includes some documentation. The aim of the requirements analysis is for quality assurance, technical
feasibility, and to identify potential risks to address in order for the software to succeed.

2) Design: (a). High-level design (HLD): It gives the architecture of a software product. (b). Low-level
design (LLD): It describes how every feature in the product should work and every component.

3) Implementation / Iteration: This phase consists of Front end and Back end. For front end our
Front-end team used HTML, CSS, Tailwind, JavaScript and for backend we used Nest Js

4) Testing: Testing is carried out to verify the entire system. The tester aims to find out the gaps and
defects within the system and to check whether the system is running according to the requirement of
the customer/client.

4
5) Deployment: After successful testing the product is delivered/deployed to the client, even clients
are trained on how to use the product.

6) Feedback / Review: After releasing of the product, the last step is to feedback it. In this step, the
team receives feedback about the product and works through the feedback.

5
 2. Technologies Used and Learned

2.1 JavaScript

1. Fundamentals: Learned the fundamental concepts of JavaScript, including variables, data types,
operators, control structures, and functions.
2. DOM Manipulation: Gained proficiency in manipulating the Document Object Model (DOM)
using JavaScript, enabling dynamic interactions and updates on web pages.
3. Asynchronous Programming: Acquired knowledge of asynchronous programming techniques
such as callbacks, Promises, and async/await, essential for handling asynchronous operations
efficiently.
4. ES6 Features: Utilized modern JavaScript features introduced in ECMAScript 6 (ES6), including
arrow functions, template literals, destructuring, and spread/rest operators, to write cleaner and
more concise code.
5. Error Handling: Learned how to effectively handle errors and exceptions in JavaScript
applications, improving the robustness and reliability of code.
6. Event Handling: Mastered event handling mechanisms in JavaScript, enabling the
implementation of interactive features and user interface enhancements.

2.2 ReactJS

1. Component-Based Architecture: Learned the concept of component-based architecture in React,

enabling the creation of reusable UI elements for building scalable applications.
2. Virtual DOM: Understood the Virtual DOM concept in React and its role in optimizing rendering
performance by minimizing DOM manipulations.
3. State Management: Explored various state management techniques in React, including useState
and useContext hooks, as well as external libraries like Redux, for managing application state
effectively.
4. Lifecycle Methods: Familiarized myself with React component lifecycle methods, such as
componentDidMount and componentDidUpdate, to handle side effects and perform actions at
different stages of component rendering.

6
5. JSX Syntax: Practiced writing JSX (JavaScript XML) syntax to describe the UI components in
React, enabling a more declarative and expressive approach to building user interfaces.
6. React Router: Used React Router library to implement client-side routing in React applications,
enabling navigation between different views and pages without full page reloads.

2.3 Next.js

1. Server-Side Rendering (SSR): Explored Next.js's server-side rendering capabilities, enabling

faster initial page loads and improved SEO by generating HTML on the server.
2. Static Site Generation (SSG): Learned about Next.js's static site generation feature, allowing
pre-rendering of pages at build time, which enhances performance and reduces server load.
3. API Routes: Utilized Next.js API routes to create serverless functions for handling backend logic,
such as fetching data from external APIs or interacting with databases.
4. File-Based Routing: Leveraged Next.js's file-based routing system, where the file structure
determines the URL structure of the application, simplifying navigation and organization of code.
5. Automatic Code Splitting: Took advantage of Next.js's automatic code splitting feature, which
optimizes bundle size by splitting JavaScript code into smaller chunks that are loaded on-demand.
6. Custom Server Configuration: Explored custom server configuration options in Next.js for
advanced use cases, such as integrating with existing backend systems or implementing custom
server logic.

2.4 Redux

1. Global State Management: Learned how to manage global application state using Redux,
providing a centralized store for data that can be accessed and modified by different components.
2. Actions and Reducers: Understood the concept of actions and reducers in Redux, where actions
describe state changes and reducers specify how those actions affect the state.
3. Immutable State: Embraced the principle of immutable state in Redux, where state updates are
made by creating new copies of state objects, ensuring data integrity and predictable behavior.
4. Middleware: Explored Redux middleware, such as redux-thunk or redux-saga, for handling
asynchronous actions, side effects, and other advanced scenarios in Redux applications.

7
5. DevTools Integration: Integrated Redux DevTools extension into the development workflow for
debugging and inspecting application state changes in real-time, enhancing development
efficiency.
6. Selectors: Utilized selectors in Redux to extract specific pieces of state from the Redux store,
facilitating efficient data access and reusability across different parts of the application.

8
 3. Introduction of the Project

3.1 About the Project

 I contributed to the development of MyWall, a live project within the company aimed at providing
influencers with a personalized portfolio platform.
 MyWall serves as a digital space where influencers can showcase their profiles, detailing
information about themselves and their work.
 In MyWall, influencers have the flexibility to add custom links, YouTube videos, shopping links,
app links, and Instagram links to enhance branding and affiliation opportunities.
 Additionally, influencers can upload their logos and media files directly from their devices,
showcasing their portfolio effectively.
 MyWall offers the functionality to import videos or reels from various social media platforms
such as YouTube, Facebook, and Instagram, enabling influencers to consolidate their content in
one place.
 The platform integrates social account login functionality, allowing influencers to access analytics
metrics such as view counts, like counts, and more across their connected accounts conveniently.
 MyWall facilitates easy sharing through shareable links, enabling influencers to distribute their
portfolios among their audience and potential brands effortlessly.
 To provide influencers with a glimpse of their portfolio's appearance to their audience and
potential collaborators, a preview page is available within MyWall, ensuring a user-friendly
experience.

3.2 Tech Stack Used

 Frontend
o NextJs
o ReactJs
o Redux
o TypeScript
o Tailwind CSS

9
 Backend
o AWS
o Dynamo DB
o AppSync

 Support
o GraphQL
o Github
o React libraries
o AWS Cognito
o Vercel

10
 4. Implementation of the Project

4.1 Login and Register Page

Figure 4.1 Login Page and Register Page

 This section comprises the login and registration pages of MyWall. Users have the option to
register using a custom email and password, or alternatively, they can utilize Google login
functionality for both login and registration purposes.
 AWS Lambda and AWS Cognito services have been integrated into MyWall for authenticating
user credentials, ensuring secure access to the platform and safeguarding user data.

11
4.2 New User Registration Flow

Figure 4.2 New User Registration Flow

 Upon registering on MyWall, new users are prompted to select a unique username for their profile.
 Following username selection, users are required to upload a profile picture, craft a personalized
bio, and select a theme color for their profile page.
 Additionally, users are given the option to add their social media account links during the
registration process. However, this step can be skipped if they prefer to update this information
later.

12
4.3 The Wall Page

Figure 4.3 Wall Page

 This is the initial "dummy wall" page that users encounter upon completing the registration
process.
 Users have the capability to add new components to their wall, including custom links, YouTube
videos, Instagram posts, app links, and shopping links.
 Additionally, users can upload media files and logos directly to their wall, or import media from
various social media platforms such as YouTube, Instagram, and Facebook.

13
4.4 Analytics Page

Figure 4.4 Analytics Page

 This is the analytics page where influencers can link their social media accounts such as YouTube
and Instagram.
 On this page, influencers can access their analytics data, including metrics such as view count,
like count, and other relevant statistics.

14
4.5 Collection Page

Figure 4.5 Collection Page

 This is the collection page, showcasing all the imported videos from the influencer's social media
accounts.
 Serving as a gallery for the imported media, this page provides a comprehensive overview of the
influencer's video content.
 Here, influencers can select videos from the collection and choose to display them on their wall
page, enhancing the visual appeal and engagement of their profile.

15
4.6 Add New Component Page

Figure 4.6 Add new component page

 The "Add New Component" page presents a comprehensive list of options that influencers can
incorporate onto their wall page.
 This feature-rich page includes various components such as custom links, YouTube links,
shopping links, app links, Instagram links, media uploads, logos, and connections to social
media platforms like Facebook, Instagram, and YouTube.

16
4.7 Different Add Component

Figure 4.7 Different add component

17
 The "Custom Link," "YouTube Link," "Shopping Link," "App Link," and "Instagram Link"
components allow users to input URLs. Upon clicking the link preview, our integrated link scrapper
retrieves essential data from the link.
 For "Media" and "Logo" components, users have the option to upload images and videos directly
from their device.

 Components like "YouTube," "Facebook," and "Instagram" feature a login interface for users to
link their accounts. Following account linking, an API call is made to fetch all media from the user's
account, which is then displayed on our platform.

4.8 Arrange Section and Sub Section

Figure 4.8 Arrange section and sub section

 Users have the capability to reorder both sections and subsections according to their preference.

4.9 Final Wall Page

18
Figure 4.9 Final Wall Page

19
 Upon adding components, they are seamlessly integrated into the wall layout, as depicted in the
above figure.
 Each component is accompanied by an edit icon, enabling users to easily modify the title or
delete the component as needed.
 Within each component, a horizontal scroll feature facilitates navigation through different cards.
Each card is equipped with an edit icon, allowing users to edit the data or delete the item with
ease.
 This intuitive design fosters efficient content management, allowing users to make real-time
adjustments and updates to their wall with minimal effort.
 By facilitating seamless editing and customization capabilities, the platform empowers users to
maintain a dynamic and engaging online presence, tailored to their unique preferences and
objectives.

4.10 Preview Page

20
 Figure 4.10 Preview Page

 The preview page serves as a valuable tool for influencers to assess and refine the visual
presentation of their content before it is shared with their audience.
 By offering a comprehensive overview of the wall's layout and appearance, the preview page
empowers influencers to make informed decisions regarding content placement and design
elements.
 Through the preview page, influencers can ensure consistency in branding, optimize content
organization, and create a visually appealing experience for their audience and potential
collaborators.
 This feature enhances the efficiency of content creation and refinement processes, enabling
influencers to iterate on their wall design until they achieve the desired aesthetic and messaging.

21
4.11 Deployment

 Once all these pages are integrated, the final step is to make the project live by deploying it on
Vercel.
 Deployment on Vercel ensures that the project is accessible to users worldwide, providing a
seamless and reliable hosting solution.
 Vercel offers robust deployment capabilities, ensuring high performance and scalability for the
live project.
 By deploying the project on Vercel, it becomes instantly accessible via a secure HTTPS
connection, enhancing user trust and accessibility.
 Vercel's continuous deployment features streamline the process of updating and maintaining the
live project, facilitating agile development practices and rapid iteration.
 Furthermore, Vercel provides comprehensive monitoring and analytics tools, enabling real-time
performance tracking and optimization efforts for the live project.

 Overall, deploying the project on Vercel marks the culmination of development efforts,
transforming it from a local development environment to a fully functional, accessible, and
scalable web application.

4.12 Quality Assurance Testing

 Following deployment of the project, it undergoes thorough quality assurance testing to ensure its
functionality and reliability.
 Through rigorous quality assurance testing, any bugs or issues identified during testing are
addressed and resolved promptly.
 The testing process involves comprehensive validation of all features and functionalities to
guarantee a seamless user experience.
 Various testing methodologies, including unit testing, integration testing, and end-to-end testing,
are employed to verify the project's performance across different scenarios and environments.
 Quality assurance testing aims to identify and mitigate any potential risks or vulnerabilities in the
deployed project, safeguarding against disruptions or malfunctions.
 By prioritizing quality assurance testing after deployment, the project is poised to deliver a
consistent and reliable experience to its users.

22
 5. Conclusion

5.1 Overall Analysis of Internship

Overall, my internship experience in front-end development using ReactJS was highly beneficial and
provided me with a valuable learning experience. The following analysis highlights the key aspects of
my internship:

Guidance and Mentorship: I received good guidance and mentorship from my supervisor throughout
the internship, which helped me to gain a deeper understanding of the ReactJS framework and its
practical applications. My supervisor provided regular feedback on my work, which enabled me to
improve my skills and knowledge.

Complexity and Variety of Projects: The projects I worked on during the internship varied in
complexity and provided me with the opportunity to work on a diverse range of front-end development
tasks. This helped me to develop a better understanding of how ReactJS can be used in different
contexts and for different purposes.

Quality of Learning Resources: The quality of the learning resources provided during the internship
was high, and I was able to access a range of online materials and documentation that helped me to
develop my skills in ReactJS. The learning resources were well-organized and structured, which made
it easier for me to navigate and find the information I needed.

Personal Goals and Expectations: The internship allowed me to achieve my personal goals and
expectations, as I was able to gain hands-on experience in front-end development using ReactJS. I was
also able to work on projects that were aligned with my career aspirations, which gave me a better
understanding of the skills and knowledge required to pursue a career in this field.

5.2 Problem Encountered & Possible Solution

During my previous internship in front-end development using ReactJS, I encountered a problem when
one of the projects I was working on required integration with a third-party API, which was not well-
documented and had some inconsistencies in its data format. To address this issue, I consulted with

23
my supervisor and other team members to brainstorm possible solutions, such as using a middleware
layer to standardize the data format and reduce errors. Through collaboration and experimentation, we
were able to successfully integrate the API with the project and deliver a working solution. This
experience highlighted the importance of effective problem-solving skills and the need to collaborate
with team members to find creative solutions to complex problems.

5.3 Summary of Internship

My internship in front-end development using ReactJS was a valuable learning experience that helped
me to develop my skills and knowledge in this field. During the internship, I worked on various
projects that provided me with hands-on experience in using ReactJS for building user interfaces. I
also received good guidance and mentorship from my supervisor, who provided regular feedback on
my work and helped me to improve my skills. The projects I worked on varied in complexity and
provided me with the opportunity to work on a diverse range of front-end development tasks, which
helped me to develop a better understanding of how ReactJS can be used in different contexts and for
different purposes. I also encountered a problem during the internship when working with a third-party
API, but through collaboration with my team members, we were able to find a creative solution to the
problem. Overall, my internship was a positive experience that allowed me to achieve my personal
goals and expectations and prepared me for a career in web development.

24
 References

[1] ReactJs- https://reactjs.org/

[2] Redux- https://redux.js.org/
[3] Tailwind Css- https://tailwindcss.com/
[4] Next Js- https://nextjs.org/docs
[5] AWS- https://docs.aws.amazon.com/

25
Appendix - I

26
Appendix - II

27