Internship on Full Stack Development

(Summer Internship)
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
BONAM VENKATA CHALAMAYYA ENGINEERING COLLEGE
(AUTONOMOUS)
(Approved by A.I.C.T.E, New Delhi & Permanently Affiliated to J. N.T.U.K, Kakinada)
(Accredited by N.B.A & NAAC with ‘A’ Grade)
ODALAREVU – 533210
2024-25

COMPLETED AT

ANDHRA PRADESH STATE COUNCIL OF HIGHER EDUCATION(APSCHE)

Submitted By:
AMAN VERMA
22221A05D0
 BONAM VENKATA CHALAMAYYA ENGINEERING COLLEGE
(AUTONOMOUS)
(Approved by A.I.C.T.E, New Delhi & Permanently Affiliated to J. N.T.U.K, Kakinada)
(Accredited by N.B.A & NAAC with ‘A’ Grade)
ODALAREVU – 533210
2024-25
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

CERTIFICATE

This is to certify that AMAN VERMA, a student of the Department of Computer Science and
Engineering at BVC Engineering College, has successfully completed the 8 weeks Summer
Internship at International Institute of Digital Technologies, from 2nd May 2024 to 25th June
2024.
During the internship, students demonstrated their knowledge, skills, and professionalism while
contributing to projects and activities within Full Stack Development. Their performance has
been assessed and found to be satisfactory, meeting the expectations set by both the Department
and the Company.

Internship Coordinator Head of the Department

P Ramesh Dr. B S N MURTHY
Assistant Professor Professor

External Examine
CERTIFICATE ISSUED BY COMPANY
 TABLE OF CONTENTS

ACKNOWLEDGEMENT:

CHAPTER1: Frontend Development

- Hyper Text Markup Language

- Cascading Style Sheets

- JavaScript

CHAPTER 2: Backend Development

- Server Side Languages: (Python, Java, etc)

- Framework: Django

- Databases: SQL (MySQL, PostgreSQL) and NoSQL (MongoDB)

CHAPTER 3: DevOps

- Version Control: Git & GitHub

- Cloud Services: AWS , Azure , Google Cloud

 ACKNOWLEDGEMENT

I would like to express my sincere gratitude to “APSCHE Foundation”, for providing me with
the knowledge and skills necessary to successfully complete this internship on “Full Stack
Development”. Their guidance, support, and encouragement throughout the duration of the
course were invaluable.

I would also like to extend my appreciation to all the staff members and fellow students, who
helped me in various ways to complete this internship. Their contributions and support helped
me to achieve my goals.

Lastly, I would like to acknowledge my family and friends for their unwavering support and
encouragement throughout this journey. Without their support, it would not have been possible
for me to complete this internship.

Thank you all for your support.

With Sincere Regards,

Aman Verma
INTRODUCTION

 Full stack development refers to the practice of working on both the front end (client
side) and the back end (server side) of a web application. Full stack developers have
the skills to create a complete web application from scratch, encompassing
everything from the user interface to the database.
  Mastering full stack development requires a broad skill set and continuous
learning due to the fast-paced nature of web technologies. It's a challenging but
rewarding path for those who enjoy a variety of development tasks. Are you
considering diving into full stack development?

 Full stack development is widely utilized in building comprehensive e-commerce

platforms. These platforms require a seamless integration of user-facing components
and robust backend functionalities. Full stack developers can create visually
appealing product pages, shopping carts, and payment gateways on the front end,
while ensuring secure transactions, inventory management, and order processing on
the back end. Their ability to handle both aspects of the development process ensures
a smooth and efficient user experience.

 Enterprise-level software solutions also benefit from full stack development. These
applications often require custom features and integrations that cater to specific
business needs. Full stack developers can design intuitive dashboards, reporting
tools, and analytics interfaces on the front end, while implementing database
management, API integrations, and security protocols on the back end. This end-to-
end capability allows businesses to streamline their operations and improve
productivity through tailored software solutions.

 Lastly, full stack development is essential in the creation of educational platforms.

These platforms need to provide an interactive learning environment for students and
educators. Full stack developers can build user-friendly interfaces for course
materials, quizzes, and discussions on the front end, while managing user data,
content delivery, and performance tracking on the back end. This comprehensive
development approach ensures that educational platforms are engaging, efficient, and
scalable.

Introduction about Frontend Development

Frontend development is the creation of the parts of a website or web application that users
directly interact with. This involves crafting the layout, design, and interactivity using
technologies like HTML, CSS, and JavaScript. Essentially, it's all about making sure that when
users visit a site, they have a smooth and visually appealing experience.

Introduction about HTML

 HTML, or HyperText Markup Language, is the standard language used to create and
structure the content on the web. It forms the backbone of web pages, defining elements
like headings, paragraphs, links, images, and more. HTML uses a system of tags and
attributes to tell the browser how to display the content. Essentially, it’s what makes a
web page look like more than just plain text on a screen. Without HTML, the web would
be a pretty dull place.

Applications of HTML

 Webpage Structure: The primary use of HTML is to structure web pages by defining
elements like headings, paragraphs, links, and multimedia.

 Forms and Input: HTML is used to create forms that allow users to input data, such as
contact forms, search boxes, and user registration forms.

 Multimedia Embedding: HTML enables the embedding of multimedia elements like

images, videos, and audio clips within web pages.

 Navigation: HTML is used to create navigation links, menus, and buttons, which help
users move around a website.

 Web Applications: HTML is used in conjunction with CSS and JavaScript to create
interactive web applications, providing the basic structure while CSS and JavaScript
handle styling and functionality.

 Email Templates: HTML is used to create visually appealing and structured email
templates for newsletters, promotions, and other communications.

 Document Sharing: HTML can be used to create documents that are easy to share and
access across different platforms and devices.
 SEO: HTML is used to structure content in a way that search engines can understand,
improving search engine optimization and making web pages easier to find.

 HTML Tags:

HTML tags are the building blocks of HTML and define the structure and content of web
pages. Here are some commonly used HTML tags:

 <html>: The root element that wraps the entire HTML document.
 <head>: Contains meta-information about the document, like title, scripts, and
styles.
 <title>: Sets the title of the document, shown in the browser’s title bar.
 <body>: Encloses the content of the HTML document that is visible to users.
 <h1> to <h6>: Heading tags, with <h1> being the highest level and <h6> the
lowest.
 <p>: Defines a paragraph.
 <a>: Creates a hyperlink.
 <img>: Embeds an image.
 <ul>, <ol>, <li>: Create unordered and ordered lists, with <li> defining each list
item.
 <div>: Defines a division or section in a document.
 <span>: Used for inline sections of content.
 <table>, <tr>, <td>: Create tables, table rows, and table cells.
 <form>: Encloses form elements.
 <input>: Defines an input control.
 <br>: Inserts a line break.

Example of HTML:
 <!DOCTYPE html>

<html>

<body>

<h2>Contact Us</h2>

<form>

<label for="fname">First Name:</label><br>

<input type="text" id="fname" name="fname"><br>

<label for="lname">Last Name:</label><br>

<input type="text" id="lname" name="lname"><br><br>

<input type="submit" value="Submit">

</form>

</body>

</html>

Introduction of Cascading Styles Sheet:

 What is CSS?

 CSS stands for Cascading Style Sheets

 CSS describes how HTML elements are to be displayed on screen, paper, or in other
media

 CSS saves a lot of work. It can control the layout of multiple web pages all at once

 CSS Application:

Styling:

 Layout: CSS is used to design the layout of web pages, including elements like
navigation bars, sidebars, and footers. This helps in creating a visually structured
page.

 Design and Themes: CSS allows for the creation of aesthetically pleasing themes
and styles. This includes colors, fonts, spacing, and overall design elements.
 Responsive Design:

 Media Queries: CSS enables responsive design, which ensures that web pages look
good on all devices, from desktops to smartphones. Media queries allow developers
to apply different styles based on screen size and device type.

Animation:

 Transitions and Animations: CSS can create animations and transitions, making
web pages more interactive and engaging. This includes effects like fading, sliding,
and transforming elements.

Accessibility:

 Accessibility Features: CSS helps in making web pages accessible to all users,
including those with disabilities. It allows for customization of visual elements to
enhance readability and navigation.

Customization:

 Custom Properties (CSS Variables): CSS enables the use of custom properties,
which allow developers to store values and reuse them throughout the stylesheet. This
makes the code more maintainable and flexible.

Styling HTML Elements:

 Targeting Specific Elements: CSS selectors can target specific HTML elements to
apply styles. This includes class selectors, ID selectors, and pseudo-class selectors.

 Pseudo elements and Pseudo classes: CSS can apply styles to specific parts of
elements, such as the first line of a paragraph, or change the appearance of elements
when they are in certain states, like hovered over or focused.

 Examples of CSS:
 <!DOCTYPE html>

<html>

<body>

<h1 style="color: blue; text-align: center;">This is a heading</h1>

<p style="color: red;">This is a paragraph with red text.</p>

<a href="https://www.example.com" style="font-size:20px; color: green;">This is a

link</a>

</body>

</html>

Introduction to JavaScript:

JavaScript, often abbreviated as JS, is a versatile and powerful programming language

primarily used for enhancing web pages and creating dynamic, interactive user experiences.

Interpreted Language: JavaScript code is executed line by line by the browser's JavaScript
engine, without needing prior compilation.

Dynamic Typing: Variables in JavaScript do not require a type definition. The type is
determined at runtime, making the language more flexible.

Prototype-based: JavaScript uses prototypes instead of classes for inheritance. Every object has
a prototype object from which it can inherit methods and properties.

First-class Function: Functions in JavaScript are treated as first-class citizens, meaning they can
be assigned to variables, passed as arguments, and returned from other functions.

Asynchronous Programming: JavaScript is single-threaded, meaning it executes code line by

line. However, for tasks like reading files or fetching data from a server, JavaScript uses
asynchronous programming to prevent blocking the main thread.

Objects and Arrays: Objects store key-value pairs, where each key (also called a "property") is a
string (or Symbol), and the value can be any data type. Arrays are ordered collections of values,
and they can store mixed data types.

Arrow Functions in JavaScript: Arrow functions, introduced in ECMAScript 6 (ES6), provide

a more concise syntax for writing functions. They offer several advantages, such as shorter
syntax, lexically bound this, and better readability in certain cases.
Data Types of JavaScript:

DOCUMENT OBJECT MODEL:

 document: Represents the entire HTML document.

 Element Properties: Includes properties like innerHTML, outerHTML, and

textContent to get or set content inside elements.

 Attributes: Access properties like id, className, and attributes to manage

element attributes.

 Style: Modify element styles using the style property.

  Children and Parent Nodes: Work with element relationships using children and
parentNode.

 Dimensions: Use clientWidth and clientHeight to get element dimensions.

Introduction about Django:

Django is a high-level Python web framework that promotes rapid development and clean,
pragmatic design. It is widely used in web development for its robust features, scalability,
and security. Here are some of the key uses and advantages of the Django framework in
web development:

1. Rapid Development

 Built-in Features: Django comes with many built-in features, such as an admin panel,
user authentication, and form handling, which significantly speed up the development
process.
 Convention Over Configuration: Django follows the principle of "convention over
configuration," which reduces the amount of boilerplate code developers need to write.

2. Robust ORM (Object-Relational Mapping)

 Database Abstraction: Django's ORM allows developers to interact with the database
using Python objects instead of writing raw SQL queries. This abstraction simplifies
database operations and enhances code readability.

 Database Migrations: Django provides a migration system that makes it easy to manage
database schema changes over time.

3. Scalability

 Modular Design: Django's architecture is designed to scale, allowing developers to build

applications that can handle increased traffic and data loads. Its modular nature enables
teams to work on different components of an application simultaneously.

 Caching: Django includes built-in support for caching, which can improve performance
and scalability by reducing the load on the database.

4. Security

 Built-in Security Features: Django includes protection against common web

vulnerabilities, such as SQL injection, cross-site scripting (XSS), cross-site request
forgery (CSRF), and clickjacking. This focus on security helps developers build secure
applications more easily.

 User Authentication: Django provides a robust authentication system that includes user
registration, login, and permission management out of the box.

5. Admin Interface

 Automatic Admin Panel: Django automatically generates an admin interface for

managing application data. This feature allows developers and administrators to perform
CRUD (Create, Read, Update, Delete) operations without needing to build a custom
interface.

 Customizable: The admin interface is highly customizable, allowing developers to tailor

it to meet specific needs.

6. RESTful API Development

 Django REST Framework (DRF): Django can be used to build RESTful APIs efficiently
with the help of the Django REST Framework, which provides tools for serialization,
authentication, and view sets, making it easier to create and manage APIs.
 7. Templating System

 Dynamic HTML Generation: Django's templating engine allows developers to create

dynamic HTML pages using template tags and filters. This separation of logic and
presentation makes it easier to manage the user interface.

 Template Inheritance: Developers can create a base template and extend it in other
templates, promoting code reuse and maintainability.

8. Internationalization and Localization

 Multi-language Support: Django includes built-in support for internationalization (i18n)

and localization (l10n), allowing developers to create applications that can be easily
translated into different languages and adapted to various regions.

9. Community and Ecosystem

 Active Community: Django has a large and active community that contributes to its
development, providing a wealth of third-party packages and plugins that extend its
functionality.

 Comprehensive Documentation: Django's documentation is thorough and well-organized,

making it easier for developers to learn and implement various features.

10. Testing Framework

 Built-in Testing Tools: Django includes a robust testing framework that allows
developers to write unit tests and functional tests for their applications, ensuring that code
changes do not introduce new bugs.

Introduction about Backend Development:

Backend development refers to the server-side part of web development. It focuses on how a
website works, including databases, server logic, and application architecture. It's all about the
behind-the-scenes processes that power the front-end experience.

Key Aspects of Backend Development:

1. Server:
 o A server processes incoming requests from clients (like web browsers) and sends
back the appropriate response. Common server-side languages include JavaScript
(Node.js), Python, Ruby, Java, and PHP.

2. Database:

o Databases store and manage data that the website or application needs. Backend
developers design database schemas and write queries to fetch, insert, update, and
delete data. Popular databases include MySQL, PostgreSQL, MongoDB, and SQL
Server.

3. APIs (Application Programming Interfaces):

o APIs allow different software systems to communicate with each other. Backend
developers create RESTful or GraphQL APIs to enable the front end to interact
with the server and database.

4. Authentication and Authorization:

o This ensures that users can securely log in and access data or services they’re
allowed to. Backend development often involves setting up user accounts,
authentication systems, and permission controls.

5. Server Logic:

o This encompasses the core application logic, including data processing,

calculations, and decision-making. Backend developers write the code that
handles business rules and operations.

6. Security:

o Ensuring that the backend is secure from threats like SQL injection, cross-site
scripting (XSS), and data breaches is crucial. This includes implementing
encryption, secure coding practices, and regular security audits.

Introduction to Python:
 Python is a powerful and versatile programming language that plays a significant
role in web development. Its ease of use, extensive libraries, and frameworks make it
a popular choice among developers for building web applications. Below are some
key aspects of Python in the context of web development:
1. Web Frameworks

 Python has several robust web frameworks that simplify the development process by
providing tools and libraries to handle common tasks. Some of the most popular
frameworks include:

 Django: A high-level web framework that encourages rapid development and clean,
pragmatic design. It comes with built-in features like an admin panel, ORM (Object-
Relational Mapping), authentication, and security measures, making it suitable for
building complex web applications quickly.

 Flask: A lightweight and flexible micro-framework that is easy to use for small to
medium-sized applications. Flask provides the essentials for web development and allows
developers to add extensions as needed, giving them more control over the components
they use.

 FastAPI: A modern, fast (high-performance) web framework for building APIs with
Python 3.6+ based on standard Python type hints. It is designed for speed and is ideal for
building RESTful APIs.

 Pyramid: A flexible framework that can be used for both small and large applications.
Pyramid allows developers to start small and scale up as needed, providing a wide range
of features and flexibility.

2. Template Engines

 Python web frameworks often include template engines that allow developers to separate
the presentation layer from the business logic. Popular template engines include:

 Jinja2: The default templating engine for Flask, Jinja2 is powerful and easy to use,
supporting template inheritance and dynamic content generation.

 Django Templates: Django comes with its own templating engine that allows developers
to create dynamic HTML pages using template tags and filters.

3. Database Integration

 Python web frameworks typically support various databases through Object-Relational

Mapping (ORM) systems, which allow developers to interact with databases using
Python objects instead of raw SQL. Common ORMs include:
 Django ORM: Integrated with Django, it allows for easy database manipulation and
migration.

 SQLAlchemy: A powerful and flexible ORM that can be used with Flask and other
frameworks, providing a full suite of database tools.

4. RESTful APIs

 Python is widely used to create RESTful APIs, which allow different applications to
communicate over the web. Frameworks like Flask and FastAPI are particularly well-
suited for building APIs, providing tools to handle routing, request parsing, and response
formatting easily.

5. Asynchronous Programming

 With the introduction of asynchronous features in Python (especially in Python 3.7+),

frameworks like FastAPI and Starlette allow developers to build high-performance web
applications that can handle many requests concurrently. This is particularly useful for
applications that require real-time data processing or long-lived connections.

6. Security Features

 Python frameworks often come with built-in security features to help developers protect
their applications from common vulnerabilities, such as SQL injection, cross-site
scripting (XSS), and cross-site request forgery (CSRF). Django, for example, includes
features like protection against XSS and CSRF out of the box.

7. Community and Ecosystem

 The Python web development community is large and active, providing a wealth of
libraries, plugins, and resources. This support makes it easier for developers to find
solutions to problems and share knowledge.

8. Deployment and Hosting

 Python web applications can be deployed on various platforms and services, including
traditional servers, cloud services (like AWS, Google Cloud, and Heroku), and
containerization platforms (like Docker). Tools like Gunicorn and uWSGI are commonly
used to serve Python web applications in production.
Introduction about MongoDB:

MongoDB is a popular, open-source NoSQL database designed for handling large volumes of
unstructured data. Unlike traditional relational databases that store data in tables with rows and
columns, MongoDB uses a flexible, document-oriented data model, storing data in JSON-like
BSON (Binary JSON) format. This allows for a more scalable and dynamic data structure.

Key Properties of MongoDB:

1. Document-Oriented:

o Data is stored in flexible, JSON-like documents. This allows for the storage of
complex data structures and nested arrays.

2. Schema-Less:

o MongoDB is schema-less, meaning it doesn’t require a fixed schema for data

storage. This provides flexibility in data modeling, allowing for changes in data
structure without requiring a rewrite of the schema.

3. Scalability:

o Built for horizontal scalability, MongoDB can distribute data across multiple
servers to balance load and ensure high availability. Sharding is used to partition
data across a cluster of machines.

4. Indexing:

o MongoDB supports various types of indexes, enabling fast query execution and
efficient data retrieval. Indexing helps in searching, sorting, and filtering data.

5. Replication:

o MongoDB supports replication through replica sets, which provide high

availability and redundancy. A replica set consists of a primary node and multiple
secondary nodes that replicate the data from the primary node.

6. Aggregation Framework:
 o MongoDB includes a powerful aggregation framework for data processing and
analysis. It allows for complex data manipulations, transformations, and
computations directly within the database.

7. Geospatial Support:

o MongoDB provides geospatial queries for location-based data. This includes

features like finding documents within a certain radius, intersecting with a
geographic area, and more.

8. ACID Transactions:

o Starting from version 4.0, MongoDB supports multi-document ACID

transactions, ensuring data integrity and consistency across multiple documents.

Common Use Cases:

 Content Management Systems: Flexible schema makes it ideal for storing diverse content
types.

 Real-Time Analytics: Capable of handling large-scale, real-time data analysis and

reporting.

 Internet of Things (IoT): Efficiently manages and processes data from IoT devices.

Version Control:
Git:

Git is a distributed version control system used to track changes in source code during software
development. It enables multiple developers to work on a project simultaneously without
interfering with each other's work. Git's key features include branching, merging, and the ability
to maintain a complete history of changes.

Key Features of Git:

 Version Control: Tracks changes in code over time, allowing for easy reversion to
previous states.

 Branching and Merging: Facilitates the creation of branches for new features, which can
be merged back into the main codebase once complete.

 Distributed System: Each developer has a complete copy of the project history, ensuring
resilience and flexibility.

 Staging Area: Provides a space to review changes before committing them to the project
history.

GitHub:

GitHub is a web-based platform that uses Git for version control and offers additional features
for collaboration and project management. It's widely used for hosting open-source projects and
allows developers to share code, track issues, and collaborate more efficiently.

Key Features of GitHub:

 Repositories: Storage locations for project code and history.

 Pull Requests: Facilitate code reviews and discussions before merging changes.

 Issues: Track bugs, enhancements, and other project tasks.

 Actions: Automate workflows, such as continuous integration and deployment.

 Collaborations: Tools for team collaboration, including project boards and wikis.

Process to Upload a Project to GitHub:

 1. Install Git:

Ensure Git is installed on your local machine.

2. Set Up GitHub Account:

Create an account on GitHub if you don't already have one.

3. Create a Repository:

On GitHub, click the '+' icon in the top right corner and select "New repository." Name
your repository and click "Create repository."

4. Initialize Your Project:

a. Navigate to your project directory in the terminal.

b. Run git init to initialize a new Git repository.

5. Connect to GitHub:

a. Add the GitHub repository as a remote to your local project:

i. git remote add origin https://github.com/your-username/your-

repository.git.

6. Stage and Commit Changes:

a. Stage your files for the first commit: git add.

b. Commit the files: git commit -m "Initial commit"

7. Push to GitHub:

a. Push your changes to the GitHub repository: git push -u origin main.

This process will upload your project to GitHub, where you can collaborate with others, track
issues, and manage your project's development.

Conclusion:

The internship experience in Full Stack Developer has been a transformative journey, bridging
academic knowledge with real-world applications. Working on practical projects allowed me to
apply theoretical concepts, sharpen my technical skills, and develop an in-depth understanding of
Full Stack Developer potential to drive innovation. By working directly with full Stack
Developer, I learned the importance of efficient data management which are crucial in building
scalable and robust systems.

References:

 IIDT-APSCHE Full Stack documentation

 Python: Van Rossum, Guido. "Python programming language." USENIX annual

technical conference. Vol. 41. No. 1. 2007.

 Django: Chen, Songtao, et al. "Django web development framework: Powering the
modern web." American Journal of Trade and Policy 7.3 (2020): 99-106.Edunet
Foundation

 Git and GitHub: Blischak, John D., Emily R. Davenport, and Greg Wilson. "A
quick introduction to version control with Git and GitHub." PLoS computational
biology 12.1 (2016): e1004668.

THANK YOU!