Internship Project Report On

Full Stack Development Engineer

Submitted in the partial fulfilment of the requirements for the award of the degree of

Bachelor of Technology
In
Electronics & Communication Engineering

By

VIKRAM KUMAR SAW (2020UGEC077)

Under the supervision of
Dr. DILIP KUMAR Mrs. Sarashti Jain
Associate Professor Mentor
DECE, NIT Jamshedpur Coding Club India

NATIONAL INSTITUTE OF TECHNOLOGY JAMSHEDPUR

JHARKHAND-831014, INDIA

MAY 2024

1
 National Institute of Technology Jamshedpur
Department of Electronics & Communication Engineering

CERTIFICATE

This is to certify that the B.Tech Project entitled, “Full Stack Development Engineer”
Submitted by “Vikram Kumar Saw” B.Tech student of ECE department of NIT, Jamshedpur,
India is a record of bona-fide project work carried out by him under our supervision. This project
is submitted in partial fulfilment of the award of the degree of Bachelor of Technology in
Electronics and Communication Engineering. The work incorporated in this project has not
been, to the best of our knowledge, submitted to any other university or Institute for the award or
any degree or diploma.

The viva-voce exam has been held on 7th May 2024 in offline mode.

Dr. DILIP KUMAR Dr. Basudeb Behera Dr. DILIP KUMAR

Supervisor Faculty Advisor Head of Department (ECE)

2
3
 CANDIDATE’S DECLARATION

I hereby declare that the presented report is as per my internship titled “Full Stack
Development Engineer” is uniquely prepared by me in the continuation of my 6
months of internship study and work at Coding Club India from 05/01/2024 to
04/07/2024 under the guidance of, Mrs. Sarashti Jain, Full Stack Developer ,
Coding Club India, and Dr. DILIP KUMAR, Professor, NIT Jamshedpur and
submitted in partial fulfilment of the credits for the degree of Bachelor of
Technology in Electronics And Communication Engineering, NIT Jamshedpur
during the academic semester January 2024 to May 2024. The matter embodied in
this report has not been submitted to any other university or institution for the
award of any degree.

VIKRAM KUMAR SAW(2020UGEC077)

4
 ACKNOWLEDGEMENT

I would like to express my gratitude to my mentors at Coding Club India for their
continuous guidance, assistance and encouragement throughout the development of
this project.
I am grateful to the Training and Placement Coordinator, Dept. Of Electronics And
Communication Engineering, NIT Jamshedpur for organizing, managing and
helping out with the entire process.
I am deeply grateful to all the Faculty Members of Electronics & Communication
Engineering Department, NITJSR, who have taught me and also for providing to
me various opportunities and enlightenment every step of the way.
Finally, this project could not have been completed without the continual support
and encouragement I have received from my parents and my friends.

VIKRAM KUMAR SAW (2020UGEC077)

5
 TABLE OF CONTENTS

1. Abstract 7
2. List of Figures 8
3. Introduction 9
4. About the Organization 10
5. About the Project 13
6. Tools and Technology Used 15
7. Work Done 24
8. Result and Discussion 28
9. Conclusion 29
10. Reference 30

6
 ABSTRACT

As an intern in a Coding Club India, I focused on Improving website’s performance for

the website. I developed the Login/Sign-in and Register/Sign-up web page for the
website. My work aimed to improve the website's performance, user engagement, and
conversion rates. Through my contributions, I helped enhance the user experience,
making it easier to login and signup and I have hashed the password so Only user can
know his account password. My report presentation will highlight the impact of my
work on improving the website's performance.

This project presents a comprehensive user authentication system designed for a web
application, featuring both login and registration functionalities. The primary aim is to
ensure secure access to the application's features while providing a seamless and
intuitive user experience.

The login page offers registered users a straightforward method to authenticate

themselves, requiring entry of their credentials. Conversely, the registration page allows
new users to create accounts by supplying essential details such as username, email, and
password.

To bolster security, the system employs a blend of client-side validation for data
integrity and server-side verification to thwart unauthorized access attempts. Moreover,
industry-standard techniques like password hashing and salting are implemented to
safeguard user credentials and sensitive information.

Emphasis is placed on user-centric design principles, ensuring accessibility and

responsiveness across various devices and screen sizes. Future iterations may explore
enhancements like multi-factor authentication and integration with external identity
providers for enhanced security and user convenience.

7
 LIST OF FIGURES

Figure 1: Coding Club India Logo 10

Figure 2: VS Code Logo 13

Figure 3: React JS Logo 14

Figure 4: Node JS Logo 15

Figure 5: Express JS Logo 16

Figure 6: GIT Logo 17

Figure 7: MongoDB Logo 18

Figure 8: JWT Logo 19

Figure 9: Rest API Logo 20

Figure 10: Postman Logo 21

Figure 11: Bcrypt JS 22

Figure 12: JavaScript Logo 23

8
 Introduction

As a Full Stack Development intern at a Coding Club India, my primary focus was
on login and signup functionality for the company's website. I utilized my technical
skills to develop and implement login and signup page and APIs with JWT
authentication to ensure secure communication between the website and the server.

In addition to developing the login and signing page , I have hashed the password
of the user while storing the user’s data in the MongoDB Databases so the users
data will be secured.

Furthermore, I collaborated with cross-functional teams, marketing teams, to align

on optimization strategies and implement changes. Through my contributions, the
website's performance was enhanced, providing a better user experience and
ultimately driving higher conversion rates for the company's services.

My work has provided me with valuable experience in web development, data

analysis, and collaboration with cross-functional teams. I have gained insights into
best practices and how it can positively impact a company's online presence,
contributing to the success of the Coding Club India’s website.

9
 ABOUT THE ORGANIZATION

Figure:1 : Coding Club Logo

(Source: https://codingclub.tech/)

Coding Club India is a multifaceted organization dedicated to promoting coding literacy

and fostering a vibrant tech community in India. Through a range of services and
initiatives, they strive to empower individuals with coding skills and technological

knowledge. Their offerings include coding classes, workshops, and online courses tailored
to different age groups and skill levels, covering popular programming languages such as

Python, Java, and C++. They also organize coding bootcamps, hackathons, and
competitions, providing platforms for enthusiasts to showcase their talents and

collaborate with peers. Coding Club is strongest network of best coders in India,
connecting coders ,across 250+ top colleges now.

10
 ABOUT THE PROJECT

As a Full Stack Developer intern at Coding Club India, I have been involved in
an exciting project focused on developing register/sign-up and login/sign-in web
page for the company’s website. The website offers a range of study resources,
including access to experts, paid tutors, paid courses, and blogs aimed at helping
individuals in learning new skills, technologies, programming languages such as
Python, Java, and C++. They also organize coding bootcamps, hackathons, and
competitions, providing platforms for enthusiasts to showcase their talents and
collaborate with peers.

In a user authentication project, both frontend and backend components have

distinct responsibilities that contribute to the overall functionality and security of
the system. Here are the key responsibilities for each:
Frontend:
1. User Interface (UI) Design:
- Designing and implementing intuitive and visually appealing login and
registration
forms.
- Ensuring accessibility and responsiveness across various devices and screen
sizes.
2. Form Validation:
- Implementing client-side validation to ensure that users provide valid and
properly formatted input data.
- Displaying helpful error messages to guide users when validation fails.
3. User Feedback:
- Providing feedback to users upon successful login or registration.
-Handling error messages gracefully to inform users about issues like incorrect
credentials or server errors.
4. Interacting with Backend:
- Sending HTTP requests to backend API endpoints for user authentication and
registration.

11
 - Managing responses from the backend and updating the UI accordingly.

Backend:

1. API Endpoint Implementation:

- Creating and maintaining RESTful API endpoints for handling login and
registration requests.
- Validating incoming data, such as username and password, and responding
with appropriate HTTP status codes and messages.

2. Authentication Logic:
- Implementing the logic for verifying user credentials during login.
- Generating and validating JSON Web Tokens (JWTs) for authenticated
sessions.
- Managing user sessions securely, ensuring tokens are properly encrypted and
stored.

3. Security Measures:
- Hashing and salting user passwords before storing them in the database.
- Protecting against common security vulnerabilities such as SQL injection and
cross-site
scripting (XSS) attacks.

4. Integration with Database:

- Interfacing with the database to store and retrieve user account information
securely.
- Implementing database queries for operations like user creation,
authentication, and data
retrieval.

5. Middleware and Route Protection:

- Implementing middleware to authenticate and authorize requests before they
reach
protected routes.
- Ensuring that only authenticated users can access certain resources and
12
functionalities.

6. Scalability and Performance:

- Designing the backend architecture to handle increasing traffic and user loads
efficiently.
- Implementing caching mechanisms and optimization techniques to improve
performance and reduce response times.

By fulfilling these key responsibilities, both frontend and backend components

work together to create a secure, user-friendly, and reliable user authentication
system.

13
 TOOLS AND TECHNOLOGIES USED

1. VS Code

Figure: 2: VS Code Logo

(Source: https://code.visualstudio.com/)

Visual Studio Code (VS Code) is a lightweight, open-source code editor developed by
Microsoft, widely acclaimed for its versatility and productivity-enhancing features. It
supports multiple programming languages and frameworks, providing a seamless
development experience for a diverse range of projects. VS Code offers an intuitive user
interface with customizable layouts and themes, allowing developers to tailor their
coding environment to their preferences. Its extensive ecosystem of extensions further
enhances functionality, enabling developers to add features such as debugging, linting,
and version control integration. One of its standout features is IntelliSense, which offers
intelligent code completion and context-aware suggestions, speeding up development
and reducing errors. Additionally, VS Code boasts excellent performance, even with
large codebases, making it a preferred choice for developers across various platforms
and industries. Its cross-platform compatibility ensures a consistent experience whether
working on Windows, macOS, or Linux, further cementing its position as one of the
most popular code editors available.

15
2. React
JS

Figure: 3: React JS Logo

React.js is a JavaScript library for building user interfaces, developed by Facebook. It

has gained immense popularity due to its simplicity, flexibility, and efficiency in
creating interactive web applications. At its core, React.js utilizes a component-based
architecture, where the user interface is composed of reusable and independent
components. These components encapsulate the structure, behavior, and appearance of
different parts of the application, making it easier to manage and scale complex
interfaces.

One of the key features of React.js is its virtual DOM (Document Object Model),
which enhances performance by minimizing the number of direct manipulations to the
actual DOM. Instead, React.js maintains a lightweight in-memory representation of the
DOM, allowing it to efficiently update and render only the necessary components when
the data changes.

React.js follows a declarative approach to programming, where developers describe

the desired outcome of the UI and let React.js handle the underlying logic to achieve
it. This simplifies the development process and improves code readability.

16
3. Node JS

Figure: 4: Node JS Logo

(Source: https://nodejs.org/en)

Node.js is a powerful, open-source, server-side JavaScript runtime environment that

allows developers to build scalable and high-performance applications. It utilizes the
V8 JavaScript engine from Google Chrome, enabling it to execute JavaScript code
outside of a web browser. One of the key features of Node.js is its event-driven, non-
blocking I/O model, which enhances performance and efficiency by handling
multiple connections concurrently. This makes it particularly well-suited for building
real-time applications like chat applications or streaming services. Node.js also boasts
a vast ecosystem of libraries and packages available through npm (Node Package
Manager), facilitating rapid development and code reuse. Additionally, Node.js
enables developers to use JavaScript for both frontend and backend development,
fostering code consistency and enabling full-stack JavaScript development. Overall,
Node.js empowers developers to build fast, scalable, and data-intensive applications
across various domains with ease.

17
4. ExpressJS

Figure: 5: Express JS Logo

Express.js is a minimalist and flexible web application framework for Node.js,

designed to simplify the process of building web applications and APIs. It provides a
robust set of features for creating server-side applications, including routing,
middleware support, and HTTP utilities. Express.js follows a modular approach,
allowing developers to seamlessly integrate additional functionalities through
middleware, making it highly extensible and customizable.

One of the key advantages of Express.js is its simplicity and minimalistic design,
which enables developers to create lightweight and efficient applications with ease. It
abstracts away much of the complexity of handling HTTP requests and responses,
allowing developers to focus on implementing business logic.

Express.js also boasts a vibrant ecosystem of plugins and extensions, providing

developers with a wide range of tools and functionalities to enhance their applications.
Overall, Express.js is a popular choice for building web applications and APIs due to
its simplicity, flexibility, and performance.

18
5. Git

Figure: 6: Git Logo

(Source: https://git-scm.com/)

Git is a widely used distributed version control system (VCS) that has become a
staple tool in the world of programming. Developed by Linus Torvalds, the creator
of Linux, Git allows developers to track changes in their codebase, collaborate with
team members, and manage different versions of their code. With its distributed
architecture, Git enables developers to work offline and independently, while also
facilitating seamless collaboration with others.

One of the key features of Git is its ability to create branches, allowing multiple
developers to work on different features or bug fixes simultaneously. Branches can
be easily merged or rebased, enabling efficient collaboration and minimizing
conflicts. Git also provides powerful tools for resolving conflicts and managing
changes, making it easier to track and merge code changes across different team
members or branches.

Another advantage of Git is its support for a wide range of workflows, including
the popular Gitflow workflow, which provides a clear structure for managing
feature development, release cycles, and hotfixes. Git also offers a robust set of
tools for managing repositories, including tagging, stashing, and cherry-picking,
allowing developers to organize and manipulate their codebase efficiently.

19
6. MongoDB

Figure: 7: MongoDB Logo

(Source: https://www.mongodb.com/)

MongoDB is a popular NoSQL database that has gained significant traction in the world
of modern application development. Known for its flexibility, scalability, and
performance, MongoDB is designed to handle large amounts of unstructured and semi-
structured data, making it a suitable choice for a wide range of applications, including
web, mobile, and IoT applications.

One of the key features of MongoDB is its document-oriented data model, where data is
stored in flexible, JSON-like documents called BSON. This allows developers to store
complex data structures, such as nested arrays and documents, without needing to define a
rigid schema upfront, making it suitable for agile development and fast iterations.

Another notable feature of MongoDB is its powerful query language and indexing
capabilities, which provide efficient ways to search, filter, and retrieve data from the
database. MongoDB also offers support for advanced data processing capabilities, such as
aggregation pipelines and MapReduce, enabling developers to perform complex data
analysis and transformations directly within the database.

20
 .

7. JWT

Figure: 8: JWT Logo

(Source: https://jwt.io/)

JSON Web Token (JWT) authentication is a popular method for securing web
applications and APIs. JWT is a compact, URL-safe means of representing claims
between parties as a JSON object, which is digitally signed and encrypted for integrity
and confidentiality. The JWT authentication process involves the generation of a token by
the server upon successful user authentication, which is then sent to the client and stored
securely, typically in a client-side cookie or local storage. The client includes the token in
the headers or payload of subsequent HTTP requests to the server, allowing the server to
verify the authenticity of the request and authorize access to protected resources. JWT
authentication is stateless, meaning the server does not need to store session information,
making it scalable and suitable for distributed systems. JWT authentication is widely used
in modern web applications and APIs due to its simplicity, flexibility, and interoperability
with different programming languages and platforms. However, proper implementation
and secure handling of JWT tokens are crucial to prevent security risks, such as token
tampering or unauthorized access, and ensure the confidentiality and integrity of user
data.

21
8 .Rest
API

Figure: 9: Rest API Logo

(Source: https://aws.amazon.com/)

A REST (Representational State Transfer) API, also known as RESTful API, is a set of
conventions and constraints used to design and interact with web services. It provides a
standardized way for different systems to communicate over the internet, enabling
clients to request data or perform operations on a server. REST APIs are based on the
principles of simplicity, scalability, and statelessness, making them widely used for
building modern web applications and integrating different systems. REST APIs use
HTTP methods such as GET, POST, PUT, PATCH, and DELETE to perform operations
on resources represented as URLs, and responses are typically in formats such as JSON
or XML. REST APIs have become a popular choice for building APIs due to their
flexibility, ease of use, and compatibility with various programming languages and
platforms. They are commonly used in web development, mobile app development, and
integration with other systems to enable seamless communication and data exchange.

22
9. Postman

Figure: 13: Postman Logo

Postman is a powerful API development tool that simplifies the process of testing,
documenting, and sharing APIs. It provides a user-friendly interface for sending HTTP
requests and inspecting responses, making it invaluable for developers, testers, and API
consumers alike.

With Postman, users can easily construct requests using various HTTP methods,
headers, parameters, and authentication methods. It supports both REST and SOAP
APIs, offering flexibility for different use cases. Additionally, Postman allows for the
creation of automated test scripts using JavaScript, enabling comprehensive testing of
API endpoints and workflows.

One of Postman's standout features is its ability to organize requests into collections,
making it easy to manage and share API workflows across teams. Collections can be
exported/imported in various formats, facilitating collaboration and integration with
other tools.

Postman also offers features like environment variables, which enable users to
streamline testing across different environments (e.g., development, staging,
production).

Overall, Postman is an essential tool for anyone working with APIs, providing a
comprehensive solution for API development, testing, and collaboration.

23
10. BcryptJS

Figure: 11: Bcrypt JS Logo

Bcrypt.js is a library for hashing passwords and performing password-based

encryption in JavaScript. It utilizes the bcrypt hashing algorithm, which is known for
its strong security features and resistance to various cryptographic attacks. Bcrypt.js
simplifies the process of securely storing passwords in databases by providing an
easy-to-use interface for generating salted password hashes. Salting involves adding
random data (salt) to each password before hashing, which mitigates the risk of
common attacks like rainbow table attacks.

One of the primary advantages of bcrypt.js is its focus on security and resistance to
brute- force attacks, making it a popular choice for password hashing in web
applications and other systems that handle sensitive user data. Additionally, bcrypt.js
is compatible with various JavaScript environments, including Node.js and web
browsers, making it versatile and widely applicable. Overall, bcrypt.js is a valuable
tool for developers seeking to enhance the security of their applications by securely
storing and managing user passwords.

24
11. JavaScript

Figure: 12: Java Script Logo

JavaScript is a versatile programming language primarily used for creating interactive

and dynamic content on websites. As a client-side scripting language, it runs directly
in web browsers, enabling developers to manipulate the HTML and CSS of web
pages in real-time, thereby enhancing user experience. JavaScript's dynamic nature
allows for event-driven programming, where actions like mouse clicks or keyboard
inputs trigger specific behaviors or responses. Additionally, JavaScript has evolved
beyond the browser with platforms like Node.js, enabling server-side programming
for building scalable and efficient web applications. It features a wide range of built-
in functions and methods, making it easy to manipulate data, handle asynchronous
operations, and interact with APIs. JavaScript's popularity stems from its simplicity,
flexibility, and ubiquity, as it is supported by all major web browsers and has a vast
ecosystem of libraries and frameworks, empowering developers to build a
variety of applications across different domains.

25
 WORK DONE

As a Full Stack Development intern in Coding Club India , my role has been primarily focused
on Login and Signing Functionality, with a focus on developing APIs to improve various aspects
of the website. Here's an in-depth overview of the two main works I have contributed to, along
with the technologies used for each work.

1. Implemented Login and Signup Functionality.

One of my main responsibilities was to develop the login and signup window with the
required field.
a) Login Page Design:
 Create a login form with fields for username/email and password.
 Considered the visual hierarchy and layout to ensure ease of use and
accessibility.
 Used clear labels, placeholders, and error messages to guide users through the
login process.
 Add styling to make the form visually appealing and cohesive with the website's
design.

26
b) Signup Page Design:
 Design a registration form with fields for username, email, password.
 Include validation for ensuring data accuracy and security (e.g., password
strength validation, email format validation).
 Considered implementing a confirmation password field to prevent typos.
 Offered clear instructions and tooltips to guide users through the registration
process.
 Ensured the design is responsive, adapting seamlessly to various screen sizes
and devices.
 Use consistent branding elements and design aesthetics to maintain visual
coherence across the website.

c) Integration and Functionality:

 Implement server-side logic to handle user authentication and registration
securely.
 Validate user input on both client and server sides to prevent security
vulnerabilities.
 Implement error handling mechanisms to provide informative feedback to users
in case of validation errors or login/signup failures.

27
 Utilize appropriate security measures such as HTTPS protocol and encryption
for protecting sensitive user data.
Test the login and signup functionality thoroughly across different browsers and
devices to ensure compatibility and usability.

2. Functions for Retrieving Desired Results from APIs using

MongoDB Database:

I also developed functions that were responsible for retrieving desired results from the website's
APIs. These functions were designed to efficiently handle requests and responses from APIs and
were particularly focused on retrieving data from the MongoDB database.
MongoDB is a popular open-source relational database management system that is widely used
for storing and retrieving data in web applications. By leveraging MongoDB, I was able to design
and implement functions that retrieved data from the database, processed it, and presented it to
users in a meaningful way. This involved data manipulation, filtering, and processing to present
the most relevant and accurate information to users, ultimately enhancing their overall
satisfaction and engagement with the website.

The technology stack used for this work includes:

● MongoDB: MongoDB is a popular, open-source, NoSQL database management system
known for its flexibility, scalability, and performance. It employs a document-oriented
data model, storing data in flexible, JSON-like documents, making it easy to represent
complex hierarchical relationships and dynamic schemas. MongoDB's architecture
supports horizontal scalability through sharding, allowing it to handle large volumes of
data and high throughput applications efficiently. It offers a rich set of features including
ad-hoc queries, indexing, aggregation, and replication for data redundancy and fault
tolerance. MongoDB's query language and rich ecosystem of drivers and libraries make it
accessible across various programming languages and platforms. It is widely used in

28
 modern web development, big data applications, real-time analytics, and content
management systems, where rapid iteration, scalability, and flexibility are essential
requirements. Overall, MongoDB empowers developers to build robust, scalable, and
high-performance applications by providing a versatile and developer-friendly database
solution.
● JavaScript : JavaScript is a versatile, high-level programming language primarily used
for creating dynamic and interactive content on websites. As the core technology behind
web development, it enables developers to manipulate HTML, CSS, and the Document
Object Model (DOM) dynamically, allowing for real-time updates and user interactions.
JavaScript can be executed both on the client-side, within web browsers, and on the
server-side, using platforms like Node.js. Its rich ecosystem of frameworks and libraries,
such as React.js and AngularJS, facilitates the development of complex web applications.
With its simplicity, flexibility, and ubiquity, JavaScript remains a cornerstone of modern
web development, powering a vast array of online experiences.

29
 RESULTS AND DISCUSSION

The implementation of Login and Signup Functionality has significantly improved the user
experience and performance of the website. The use of JWT authentication has ensured secure
user authentication, while MongoDB database has enabled efficient caching of data for faster
retrieval. The functions developed for retrieving desired results from MongoDB database have
facilitated efficient data processing. Additionally, the ongoing development of an API for
handling appointment notifications using MongoDB database is expected to further enhance user
engagement. Overall, the use of diverse technologies and tools has optimized the website's
performance and contributed to the successful implementation of the Login and Signup
Functionality.

30
 CONCLUSION

In conclusion, my work as a Full Satck Development intern in the company involved

Implementing Login and Signup Functionality and developing APIs with JWT authentication and
MongoDB database for secure user authentication and caching data. Additionally, I developed
functions to retrieve desired results from MongoDB database for data processing whing logging
in. These technologies, including Bcrypt JS, JWT, Regex and MongoDB, were used to optimize
the website's performance and provide a seamless experience for users .

31
 REFERENCES
1. JavaScript: https://www.javascript.com/

2. React.js: https://react.dev/

3. Node.js: https://nodejs.org/en

4. Express.js: https://expressjs.com/

5. MongoDB: https://www.mongodb.com/

6. JSON Web Tokens (JWT) Authentication: https://jwt.io/

7. MongoDB: https://www.mongodb.com/

8. REST API: https://www.restapitutorial.com/

9. Postman: https://www.postman.com/

10. GitHub: https://github.com/

32