Summer Training Report

On
Full Stack MERN Technology

Submitted in partial fulfilment of requirements for the award of

the Degree of
Bachelor of Technology
In
Information Technology

Submitted By

Harshit khatter (03311503120)

Under the guidance of

Mr. Pranav Grover

(CEO,Craving4Gaming
)

Department of Information Technology

Bharati Vidyapeeth’s College of Engineering, New Delhi – 110063, INDIA

August 2023
 CANDIDATE’S DECLARATION

It is hereby certified that the work which is being presented in the B. Tech Industrial
training Report entitled "Web Development Intern" in partial fulfilment of the
requirements for the award of the degree of Bachelor of Technology and submitted in
the Department of Information Technology of BHARATI VIDYAPEETH’S
COLLEGE OF ENGINEERING, New Delhi (Affiliated to Guru Gobind Singh
Indraprastha University, Delhi) is an authentic record of my own work carried out
during a period from July – August 2023.
The matter presented in the B. Tech Industrial Training Report has not been submitted by me for the award
of any other degree of this or any other Institute.

Student Name: Harshit khatter

Enrollment No: 03311503120

This is to certify that the above statement made by the candidate is correct to the best of my knowledge.
He/She/They are permitted to appear in the External Industrial/In-house training Examination.

Industrial/In-house training Coordinator (Signature of External Examiner)

1
 ACKNOWLEDGEMENT

I express my deep gratitude to Pranav Grover, CEO, Craving4Gaming, for his valuable guidance
and suggestion throughout my internship. Along with him Shrey Gupta the Co-founder, C4G, for
his motivating and heart-warming words of supports and gestures that pushes me to learn more
and deliver more. I express my word of thanks for my class advisors as well for their supportive
guidance and motivation.

2
 Table of Contents

CANDIDATE DECLARATION….................................................................................................................1

ACKNOWLEDGEMENT................................................................................................................................2

TABLE OF CONTENTS….............................................................................................................................3

LIST OF FIGURES..........................................................................................................................................4

LIST OF TABLES……………………………………………………………………………………………5

1. Company Details………………………………………………………………………………………….6

2. Web Development……………………………………………………………………………………… 7-12

3. Tool and Technologies used……………………………………………………………………………...13-18

4. Introduction to MEMORIES……………………………………………………………………………...19

5. Code………………………………………………………………………………………………………20

6. Screen Shots………………………………………………………………………………………………21-22

7. Conclusion…………………………………………………………………………………………………23

8. References………………………………………………………………………………………………….24

3
 List of Figures

Fig 2.1: Web Platforms......................................................................................................9

Fig 2.2: Development Layers.............................................................................................9
Fig 2.3: Frontend................................................................................................................10
Fig 2.4: Backend................................................................................................................11
Fig 3.1: JavaScript logo......................................................................................................13
Fig 3.2: MongoDB logo.....................................................................................................14
Fig 3.3: Express logo…………………………………………………………………….14
Fig 3.4: ReactJs logo........................................................................................................15
Fig 3.5: NodeJs logo.........................................................................................................15
Fig 3.6: HTML logo.........................................................................................................16
Fig 3.7: CSS logo.............................................................................................................17
Fig 7.1: Home page..........................................................................................................21
Fig 7.2: Login page..........................................................................................................21
Fig 7.3: Adding memory..................................................................................................22
Fig 7.4: Review................................................................................................................22

4
Weekly Report
The Four-week Internship at CRAVING FOR GAMING from 25.07.2023 –26.08.2023,
involved developing a web Technology project.

Week 1 Learned the industry and corresponding requirement.

Week 2 Evaluate some similar requirement website’s

Week 3 Start building the application

Week 4 Completed the application

5
 Company Details

In 2019, three ordinary college students discussed their shared love for gaming and came up with the idea
that built CFG. In the years to follow, with a lot of research, trial n’ error, finally launched Craving For
Gaming to share the love of gaming with everyone, at the comfort of their homes.

Company’s Mission:
We have always been to change a consumer’s mindset of not spending hefty amount on buying a console,
when one can easily rent and get it home delivered for the time period they wish along with the best titles
in market at no additional costs!

What does company do?

Craving for gaming is rental based company which lease out gaming consoles and games to the customer
base. It provides consoles at very economical rates to those gamers who are not able to afford gaming
consoles. Also they have a facility to purchase a old gaming console and user can also sell his old gaming
console over this platform.
Consoles includes Play stations such as PS4 , PS5. they have variety of latest games to lease out such as
FIFA,WWE ,God Of War etc.

6
 Web Development
Web development refers to the creating, building, and maintaining of websites. It includes aspects such as
web design, web publishing, web programming, and database management. It is the creation of an
application that works over the internet i.e. websites.
The word Web Development is made up of two words, that is:

● Web: It refers to websites, web pages or anything that works over the internet.
● Development: It refers to building the application from scratch.

In the process of Web Development, Developers build web pages and applications for either the Intranet, a
private network, or the Internet. It does not necessarily focus on a website’s design; rather, it is majorly
concerned with the programming and coding part, which is the main reason for the functioning of the
website.
It refers to developing and maintaining web pages, including bits and pieces of concepts like web design,
web programming, web publishing, and database management. Further, it includes various types of web
development tools and techniques such as text editors for manually coding the websites, Dreamweaver for
developing a web page, using a blogging website to update blogs, and more.
From basic and simple websites to complex web applications and social media platforms and from
numerous online shopping web pages to even content management systems (CMS), all the online tools and
websites that we use regularly are part of Web Development. Besides, all these tools and websites are built
by Web Developers.

THE WEB DEVELOPMENT PROCESS

Whether you're creating a website or web application with a team of three or 300, web development tends
to follow the same seven steps.

Information gathering
Information gathering includes addressing internal factors (like the website's purpose) and external factors
(like information about the target audience and competing websites).
Questions you'll need to answer during this stage include:

● Why is the client creating a website?

● Who do they want to visit the site?
● What will people be able to do on the website or in the web application?
● Why will people want to use the client's website instead of someone else's?

Planning
Once you understand the purpose of your website and what kind of people you want to visit, it's time to
start planning. During this stage, dev teams put together an outline of the website and its web pages. This
is known as a sitemap.
Think of the sitemap as the skeleton of the website. Web Developers use sitemaps to flesh out how
webpages will link to each other through menus and how website data should be structured on the
webserver.
7
Design
In the design phase, the dev team begins to create something like an actual website. Layouts, images,
logos, colors, fonts, and other aesthetic features are put together and visualized during this phase. The
client may provide an existing logo and color scheme or be open to designs your team presents.
Next, you and the client will agree on a layout, information structure, and aesthetic direction to guide the
rest of the web development project.

Content creation
Until now, the web development team will have put in placeholder images and text in the website design
until the real content is ready to be inserted.
Typically, it's up to the client to provide the content. And because content creation can be done throughout
the rest of the web development process, the content should be ready as soon as the design phase is
finished.
At this point, the web development team may work with the client to adjust word counts and character
limits for menus and ensure that image and video files look full size.

Coding
Once the website design and content are finalized, it's time to start coding. At this point, both Front-End
Developers and Back-End Developers will work to turn the website design on paper into a working reality
that functions within a browser.
The coding process itself depends on the size of the project and the design approach of the development
team. For example, a small project for an informational website might involve just a couple of
programmers working together. A large-scale web application might involve teams of developers adopting
an Agile approach like Scrum.

Testing and launch

Just like with software, websites need to be tested and debugged before they're ready to go live. That
means developing test cases and ensuring that the website code follows the client's QA/QC procedures.
Web development testing might include checking all hyperlinks, searching for typos, and ensuring that the
website works well on different browsers and devices.
Finally, the website is ready to be uploaded to the webserver and accessed publicly on the internet.

Maintenance
After the website is up and running, it still needs to be maintained. Websites need to be updated for dozens
of reasons — team member bios are added and removed, product and service descriptions change, and
blog posts are published.
On the back end, a website or web application that stores customer data will need to ensure that databases
are secure and comply with the latest data privacy regulations.

Hand coding vs. CMS

When developing a website, you have two primary options for how to
do it: Coding from scratch or use a website builder. When you code from scratch, you develop the entire
website from the ground up. If you opt to use a website builder, you use a content management system
(CMS) to create it from a preexisting model.
A CMS gives you the basic building blocks of a website and lets you piece them together without having
to know in-depth coding. In other words, the CMS handles the coding for you in advance — you just
arrange the surface-level elements.
While using a CMS is very helpful if you don’t know anything about coding, hand-coding gives you the
opportunity to create a more customized website for your business.

8
 Fig-2.1: WEB PLATFORMS

3 Layers of Web Development

The Web Development process can broadly be defined in the following three layers:

● Frontend Web Development

● Backend Web Development
● Full Stack Web Development

Fig-2.2: DEVELOPMENT LAYERS

Frontend Web Development

This type of Web Development helps convert information and available data into a graphical user interface
using CSS, HTML, and JavaScript such that users can easily interact with the provided interface. It deals
with the part of the website that users can see and easily comprehend.

For instance, on your browser, you as a user see and interact with the website’s frontend. It consists of all
the things that you can view and experience directly, including colors, text, images, buttons, etc.

9
 Fig-2.3: FRONTEND

● HTML: HTML stands for HyperText Markup Language. It is used to design the front end portion
of web pages using markup language. It acts as a skeleton for a website since it is used to make
the structure of a website

● CSS: Cascading Style Sheets fondly referred to as CSS is a simply designed language intended to
simplify the process of making web pages presentable. It is used to style our website.

● JavaScript: JavaScript is a scripting language used to provide a dynamic behavior to our website.

● Bootstrap: Bootstrap is a free and open-source tool collection for creating responsive websites
and web applications. It is the most popular CSS framework for developing responsive, mobile-
first websites. Nowadays, the websites are perfect for all the browsers (IE, Firefox, and Chrome)
and for all sizes of screens (Desktop, Tablets, Phablets, and Phones).

Frontend Frameworks and Libraries:

● AngularJS
● React.js
● VueJS
● jQuery
● Bootstrap
● Material UI

10
 ● Tailwind CSS
● jQuery UI

Backend Web Development

The backend part of any web page is the portion that users don’t or can’t see. It is the backbone of the
website. Users cannot see it, but it is the part responsible for the functioning of the website. It allows
developers to store and organize data, as well as ensures the proper working and functioning of everything
available on the frontend or the client-side.
The backend portion interacts with the frontend part of the web page by sending and receiving data that is
shown live on the website. When users enter some data, fill out forms, or purchase something, the browser
sends that request to the backend (the server-side) which, in turn, sends back the data as frontend code for
the web page to comprehend, interpret, and make it visible for you.

Fig-2.4: BACKEND

● PHP: PHP is a server-side scripting language designed specifically for web development.

● Java: Java is one of the most popular and widely used programming language. It is highly
scalable.

● Python: Python is a programming language that lets you work quickly and integrate
systems more efficiently.
11
 ● Node.js: Node.js is an open source and cross-platform runtime environment for executing
JavaScript code outside a browser.

● Back End Frameworks: The list of back end frameworks are: Express, Django, Rails,
Laravel, Spring, etc.

Full Stack Web Development

Full Stack development is the combined development of the frontend and the backend of a web page. It
includes the development of the graphics and design of the web page, along with managing the database
for data organization and storage.

Why web development is important?

It wasn't too long ago that companies thought their web presence was peripheral to their day-to-day
business. Today, they rely on their websites to attract new customers and communicate with existing ones.
Still, business owners want to focus on their actual products and services rather than building and
managing their websites. That's why web development is so important. Professional Web Developers
provide an essential service to businesses and organizations for a few reasons.

12
Tools and Technology Used
MERN Stack
MERN is one of several variations of the MEAN stack (MongoDB Express Angular
Node), where the traditional Angular.js front-end framework is replaced with React.js.
Other variants include MEVN (MongoDB, Express, Vue, Node), and really any front-end
JavaScript framework can work. MERN Stack is a JavaScript Stack that is used for easier
and faster deployment of full-stack web applications. Each of these 4 powerful
technologies provides an end-to-end framework for the developers to work in and each of
these technologies play a big part in the development of web applications.

Technology

- JavaScript

Fig-3.1: JavaScript logo

JavaScript is a text-based programming language that allows you to create interactive

elements on your web page. The World Wide Web as we know it looks nothing like the
early days of grey boxes and walls of text. Nowadays, we can’t imagine browsing the
web without interactive websites, clickable buttons, and online video games. The ways
we interact with the internet have radically changed over the years and, for the most part,
it’s all down to JavaScript. But all these new gadgets and gizmos are also putting a much
larger strain on our browsers than ever before. In other words, the rise of JavaScript has
also made keeping an eye on your site performance a crucial part of any online strategy.
Before we can get into that, though, let’s take a closer look at what JavaScript is and what
it does for your website. JavaScript has existed since 1995 and has since taken over as the
dominant language for web development. For much of its life, JavaScript was used
mainly for client- side scripting inside <script> tags executing in web browsers. This
limitation meant that developers were often working in many different languages and
frameworks between the front-end (client-side) and backend (server-side) aspects of a
web application. Although there were other projects to bring JavaScript to server- side
applications, the functionality took off with the launch of Node.js in 2009.

13
- MongoDB

Fig-3.2: MongoDB logo

MongoDB is a source-available cross-platform document- oriented database

program. Classified as a NoSQL database program, MongoDB uses JSON-like
documents with optional schemas. MongoDB is developed by MongoDB Inc. and
licensed under the Server-Side Public License (SSPL) which is deemed non-free
by several distributions. MongoDB is a cross-platform, document-oriented
database that provides high performance, high availability, and easy scalability.
MongoDB works on concept of collection and document. MongoDB stores data in
flexible, JSON-like documents, meaning fields can vary from document to
document and data structure can be changed over time. The document model
maps to the objects in your application code, making data easy to work with. Ad
hoc queries, indexing, and real time aggregation provide powerful ways to access
and analyse your data. MongoDB is a distributed database at its core, so high
availability, horizontal scaling, and geographic distribution are built in and easy to
use.

- Express

Fig-3.3: Express logo

Express is a minimal and flexible Node.js web application framework that

provides a robust set of features for web and mobile applications. It comes with a
myriad of HTTP utility methods and middleware at your disposal, creating a
robust API is quick and easy. Express provides a thin layer of fundamental web
application features, without obscuring Node.js features that you know and love.
Express.js is a small framework that works on top of Node.js web server
functionality to simplify its APIs and add helpful new features. It makes it easier
to organize your application’s functionality with middleware and routing. It adds
helpful utilities to Node.js HTTP objects and facilitates the rendering of dynamic
HTTP objects. Makes Node.js web application development fast and easy. It is
easy to configure and customize. It allows you to define routes of your application
based on HTTP methods and URLs. It includes various middleware modules
which you can use to perform additional tasks on request and response. Easy to
integrate with different template engines like Jade, Vash, EJS etc. Allows you to
define an error handling middleware. Easy to serve static files and resources of
14
your application. Allows you

15
 to create REST API server. Easy to connect with databases such as MongoDB,
Redis, MySQL.

- ReactJs

-
Fig-3.4:ReactJs logo

React is a JavaScript library developed by Facebook which, among other things,

was used to build Instagram.com. Its aim is to allow developers to easily create
fast user interfaces for websites and applications alike. The main concept of
React.js is virtual DOM. It is a tree based on JavaScript components created with
React that mimics a DOM tree. It does the least amount of DOM manipulation
possible in order to keep your React components up to date. Firstly, react was
deployed by Facebook in 2011 and 2012. Instagram was written entirely in React.
According to JavaScript analytics service Lismore, react is currently being used
on the homepages and other web pages of Netflix, Imdur, Bleacher Report,
Feedly, Airbnb, Seat Geek, HelloSign, and others.
Being a part of the JavaScript language, using React spawns lots of advantages.
Products built with React are simple to scale, a single language used on the
server/client/mobile side of things grants outstanding productivity, there are
workflow patterns for convenient teamwork, UI code is readable and
maintainable, and more. World-leading companies have used React and other JS
technologies in some of the top market- defining products out there (Instagram,
Reddit, and Facebook being the most vivid examples).

- NodeJS

-
Fig-3.5:NodeJs logo

Per the Node.js homepage, Node “uses an event- driven, non-blocking I/O
model.” In practice, this means that Node is built well to handle asynchronous
JavaScript code to perform many asynchronous activities such as reading and
writing to the filesystem, handling connections to database servers, or handling
requests as a web server. To handle asynchronous code, Node uses a call back-
16
based system. Node functions and methods that will implement some
asynchronous activity take a call back function. This call back will be called
whenever the asynchronous operation

17
 has been resolved. By convention, the first argument of this call back is an error
placeholder. If an error occurred in the asynchronous operation occurred (trying to
read a non-existent file, for example), the error argument will be an Error object,
but it will be null if no error occurs. Node allows developers to write JavaScript
code that runs directly in a computer process itself instead of in a browser. Node
can, therefore, can be used to write server-side applications with access to the
operating system, file system, and everything else required to build fully
functional applications. Node.js is written in C, C++, and JavaScript, and it is built
on the open-source V8 JavaScript engine which also powers JS in browsers such
as Google Chrome. As V8 supports new features in JavaScript, they are
incorporated into Node.

- HTML

Fig-3.6:HTML logo

This is the basic programming language that forms the foundation of all websites.
It allows you to create content, put it on a page, and link to other pages. The
Hypertext Markup Language or HTML is the standard markup language for
documents designed to be displayed in a web browser. It can be assisted by
technologies such as Cascading Style Sheets (CSS) and scripting languages such
as JavaScript. Web browsers receive HTML documents from a web server or from
local storage and render the documents into multimedia web pages. HTML
describes the structure of a web page semantically and originally included cues for
the appearance of the document. HTML elements are the building blocks of
HTML pages. With HTML constructs, images and other objects such as
interactive forms may be embedded into the rendered page. HTML provides a
means to create structured documents by denoting structural semantics for text
such as headings, paragraphs, lists, links, quotes and other items. HTML elements
are delineated by tags, written using angle brackets. Tags such as <img /> and
<input /> directly introduce content into the page. Other tags such as <p>
surround and provide information about document text and may include other tags
as sub-elements. Browsers do not display the HTML tags but use them to interpret
the content of the page.

18
 - CSS

Fig-3.7:CSS logo

This scripting language allows you to design the content on your webpage. It’s
responsible for text styling, colours, fonts, and so on. Cascading Style Sheets
(CSS) is a style sheet language used for describing the presentation of a document
written in a markup language such as HTML or XML (including XML dialects
such as SVG, MathML or XHTML). CSS is a cornerstone technology of the
World Wide Web, alongside HTML and JavaScript. CSS is designed to enable the
separation of presentation and content, including layout, colours, and fonts. This
separation can improve content accessibility; provide more flexibility and control
in the specification of presentation characteristics; enable multiple web pages to
share formatting by specifying the relevant CSS in a separate .css file, which
reduces complexity and repetition in the structural content; and enable the .css file
to be cached to improve the page load speed between the pages that share the file
and its formatting. Separation of formatting and content also makes it possible to
present the same markup page in different styles for different rendering methods,
such as on-screen, in print, by voice (via speech-based browser or screen reader),
and on Braille-based tactile devices. CSS also has rules for alternate formatting if
the content is accessed on a mobile device. The name cascading comes from the
specified priority scheme to determine which style rule applies if more than one
rule matches a particular element. This cascading priority scheme is predictable.

Packages

- AXIOS
Axios is a promise-based HTTP library that lets developers make requests to
either their own or a third-party server to fetch data. It offers different ways of
making requests such as GET, POST, PUT/PATCH, and DELETE. In this
tutorial, I will explain how Axios interacts with applications, describe the
structure of Axios requests and responses, how to make requests to an API, and
how to write tests for your requests using CircleCI.

19
- MATERIAL-UI(MUI)
Material UI is an open source React component library that implements Google's
Material Design. It includes a comprehensive collection of prebuilt components
that are ready for use in production right out of the box.

- Mongoose
Mongoose is an Object Data Modelling (ODM) library for MongoDB and
Node.js. It manages relationships between data, provides schema validation, and is
used to translate between objects in code and the representation of those objects in
MongoDB.

20
 Introduction to Memories

Memories a social media platform for sharing and preserving memories.

It:
 Save memory template
 Can be used to like stored memories.

Components:
 User Sign In
 Creating new memory
 Adding more Members
 Like a memory
 Delete a memory

1.1 Objectives:

 Secure user registration process.

 Data privacy and authentication.
 Image, topic, and description for memories.
 Support for multiple media formats.
 Categorization of memories by date, event, or sentiment.
 Organization and retrieval of memories.

21
Code
Front-End

https://github.com/Ayush-dixit-15/Memories.client

Back-End

https://github.com/Ayush-dixit-15/Memories.server

22
Screen Shots

Fig-7.1: Home page

Fig-7.2: Login page

23
Fig-7.3: Adding Memory

Fig-7.4: Review

24
 Conclusion
The industrial training experience at Craving for Gaming, working on the "Memory" project, has been a
remarkable journey that allowed me to gain practical insights into the world of software development and
to be a part of a team that collaboratively brought an innovative social media application to life. This
project, "Memory," is a testament to the power of technology in connecting people through the shared joy
of preserving and sharing cherished memories.

Throughout this internship, I had the opportunity to apply and expand my knowledge of the MERN stack,
which played a pivotal role in the development of "Memory." The seamless integration of MongoDB for
database management, Express.js for the server, React for the user interface, and Node.js for the backend,
allowed us to create a robust and responsive application. This experience not only reinforced my technical
skills but also gave me a profound appreciation for the versatility and potential of modern web
technologies.

The project's objectives were not just met but exceeded. "Memory" successfully enabled users to create,
save, and share their precious memories in the form of titles, images, and brief descriptions. It fostered a
sense of nostalgia, engagement, and connectivity among users, which was one of the primary objectives.
Features such as user registration and authentication, social sharing, user profiles, comments and reactions,
privacy settings, search and discovery, notifications, and data backup, were meticulously implemented to
offer a comprehensive and user-centric experience.

The development process was a testament to teamwork and adaptability. The adoption of an Agile
methodology allowed us to be flexible, responsive to changes, and fostered open communication among
team members. Each team member played a crucial role in the successful completion of the project,
demonstrating the value of collaboration and effective project management tools.

Despite facing certain challenges during development, such as [mention specific challenges], we were able
to address them with innovative solutions, ensuring the timely delivery of a high-quality product. These
challenges served as valuable learning experiences and highlighted the importance of adaptability and
problem-solving in the software development process.

As we move forward, the "Memory" project holds great promise. It not only serves as a functional
application but also offers a platform for future enhancements. The ideas for further enriching the user
experience, improving performance, and expanding the app's functionality can potentially propel
"Memory" to greater heights.

I would like to express my sincere gratitude to my supervisor and the entire Craving for Gaming team for
their mentorship, guidance, and unwavering support throughout my industrial training. This experience
has been invaluable in shaping my career and providing me with a deeper understanding of software
development and teamwork.

In conclusion, the "Memory" project is not merely an app but a testament to innovation, technology, and
the art of preserving cherished memories. It has been an honor to contribute to its development, and I look
forward to the future enhancements and its potential to create lasting memories for users worldwide.

25
References
 https://reactjs.org/
 https://www.npmjs.com/
 https://www.mongodb.com/
 https://tailwindcss.com/
 https://mui.com/core/

26
27