SUMMER TRAINING REPORT

ON
WEB DEVELOPMENT

Submitted in Partial fulfillment of the requirements

for the degree of

Bachelor of Technology
(Information Technology)

Submitted To: Submitted By:

VARUN KUMAR MISHRA
Enrollment no:02813303121

HMR INSTITUTE OF TECHNOLOGY ANDMANAGEMENT

HAMIDPUR, DELHI 110036
Affiliated to
GURU GOBIND SINGH INDRAPRASTHA UNIVERSITY
Sector – 16 C Dwarka, Delhi – 110078, India

2021-2025
 ABOUT THE UDEMY
INCORPORATED
Udemy is an online learning platform that provides a wide range of courses on various
subjects. Here is an overview of Udemy in a professional style:

Platform Overview

Udemy offers a vast array of courses covering numerous topics, including technology,
business, personal development, arts, health, and more. Courses are available in
various formats, such as video lectures, quizzes, and assignments.

Instructors

Courses on Udemy are created by instructors around the globe. Instructors may be
professionals, experts in their fields, or educators passionate about sharing knowledge.

Accessibility

Courses on Udemy are accessible worldwide, allowing learners from different areas to
enroll and learn at their own pace. The platform supports multiple languages.

Pricing Model

Udemy operates on a pay-per-course business model. Users can purchase individual

courses, and pricing may vary depending on course content, duration, and instructor.

Lifetime Access

Once purchased, a course gives users lifetime access to content, allowing them to
revisit materials and access instructor updates.
 COMPANY DETAILS

CIN U72200PN2000PTC015522

Company Name UDEMY INCORPORATED

Company Status Active

RoC RoC-Delhi

Registration Number 2085

Company Category Company limited by Shares

Company Subcategory Non-govt company

Class of Company Private

Date of Incorporation 05 February 2019

Age of Company 4 years, 9 months, 14 days

Activity Business activities N.E.C.

BENEFITS OF DOING AN INTERNSHIP

1. Gain valuable work experience

The hands-on work experience interns receive is invaluable and cannot be obtained in a

classroom setting, making this one of the most important benefits of internships.

Interns could apply acquired knowledge to real work experiences, witnessing firsthand

the day-to-day job duties they can expect to encounter in their chosen field. In addition

to learning the specialized skills of a particular field, transferable skills such as

communication, teamwork, and computer proficiency are also obtained in an

internship, fully preparing interns to enter the workforce upon graduation.

2. Explore a career path

Exploring is an important part of the college experience, and internships are a great

way for students to acquaint themselves with the field they are interested in. Some

students begin college with a major or career path in mind and end up changing their

minds later on. Taking on an internship while in college allows students to work in

their desired field, helping them decide if the field is right for them. By graduation,

students who interned are more likely to feel confident they chose the right degree.

3. Give yourself an edge in the job market.

One of the most important internship benefits is that college graduates who already

have some work experience in the form of an internship stand out to potential

employers.

Internship experience makes a college grad more marketable as they usually require

less training and can handle more responsibilities. You may also receive a higher

starting salary than those who do not have internship experience and are entering the

workforce or starting a new career.

4. Develop and refine skills

 You can learn a lot about your strengths and weaknesses during an internship.

Internship allows for feedback from supervisors and others who are established in the

field, and offer a unique learning opportunity that you may not have again as a working

adult.

5. Receive financial compensation

Many internships are paid which means you can gain valuable work experience and

make money at the same time. A paid internship will provide money to fund your

college tuition and expenses.

6. Network with professionals in the field

In the working world, it’s all about who you know. As an intern, you will be

surrounded by professionals in the industry. Internships are more than just about

earning credit, getting a grade, or making money; internships provide an opportunity to

learn from the people around you, ask questions, and impress. Gain confidence

Internships allow you to test out specific techniques learned in the classroom before

entering the working world. It’s an opportunity to apply what you have learned in a

safe environment where mistakes are expected – rather than learn the hard way in your

first job out of college.

7. Transition into a job

Many companies use internships to enhance their recruitment efforts. In some cases, a company may
decide to hire an intern at the end of the assignment. Even if a job offer doesn’t happen right away, an intern
who makes a favorable impression could receive an offer down the line.
 DECLARATION

I VARUN KUMAR MISHRA , student of B.Tech 5 th semester(Information Technology) hereby declare

that the summer internship report and PPT on the basis of internship done UDEMY is submitted to

Department of Information Technology, HMR Institute of Technology & Management, Delhi, affiliated to

Guru Gobind Singh Indraprastha University, Dwarka(New Delhi) in partial fulfillment of requirement for

the award of the degree of Bachelor of Technology in Information Technology , has not been previously

formed the basis for the award of any degree, diploma or other similar title or recognition.

This is to certify that the above statement made by the candidate is correct to the best of my knowledge.

New Delhi (Signature of Proctor)

Date: Ms. Anita Yadav

(Assistant Professor)

(I.T Department)

6
 ACKNOWLEDGEMENT
I am pleased to present this Internship report which I have done from UDEMY. It is indeed a

great pleasure for me to express my sense of gratitude towards our guide Dr. Angela Yu whose

teachings in this online session set a path for object-oriented language. We are extremely

thankful for the guidance and untiring attention which she bestowed on me right from the

beginning. Her valuable quizzes and timely assignments which were much needed to understand a

computer language and above all his constant encouragement have made it possible for us to

achieve this work. I would also like to give our sincere thanks to Mr. Narender, Sir Head of

Department of INFORMATION TECHNOLOGY (IT) for necessary help and providing us with

the required facilities for completion of this internship report. I would like to thank the entire

Teaching staff who are directly or indirectly involved in the various data collection and soft-

ware assistance to bring forward this seminar report. I express my deep sense of gratitude

towards my parents for their cooperation and wishes, which was very much needed in

completing this summer training course in this time.

VARUN KUMAR MISHRA

02813303121

7
 ABSTRACT

In the four weeks summer training I studied about WEB DEVELOPMENT Front and

Back end. I chose this training because it helps to develop dynamic web pages, and it is

useful for my career in the Information technology Industry. Under the guidance of Dr.

Angela Lu, I learned various new techniques of building websites from basics to

advanced, which is the very foundation of big problems solved at various levels in the

industry. Apart from that I learned to change the functionalities of complex web pages

& make them more efficient by managing lines of code & using the latest technologies.

at the end I developed a project called DApps. A node.js application which helped me

solidify my understanding of all the latest tools and techniques learnt.

WEB DEVELOPMENT was the main objective of this internship. To develop a web-

based application or software there are several programming languages that are in use.

Some of them are only used for the front-end and backend design of the software. For

example- HTML3, HTML4, HTML5, CSS, Bootstrap Framework etc. There are also

some other programming languages that are used to develop the dynamic functions of

software or applications. For example-PHP, Java etc. Nowadays there are also some

frameworks that are used vastly. Frameworks are basically structured programming by

using Model, View, and Controller. It is also called MVC. If we develop web-based

applications that is very useful for us because we can access it from anywhere in the

world. It is very helpful for our daily life. That is why I chose the subject of my report

to be "WEB DEVELOPMENT". Working at a sight foundation added huge

experiences in my upcoming career. Solving real life problems was another key issue.

This report takes us through all the details of WEB DEVELOPMENT knowledge and

experience gathered during this internship period.

8
 ABOUT WEB DEVELOPMENT BOOTCAMP

When we're learning to program, we often must sacrifice learning the exciting and current
technologies in favor of the "beginner friendly" classes. With this course, we get the best of both
worlds. This is a course designed for the complete beginner, yet it covers some of the most
exciting and relevant topics in the industry.
The course is constantly updated with new content, projects, and modules. This course is also
unique in the way that it is structured and presented. Many other courses are just a long series of
"watch as I code" things, but this course is different. Dr. Angela Lu incorporated everything she
learned in his years of teaching to make this course not only more effective but more engaging. The
course includes:
• Lectures

• Code-Along

• Projects

• Exercises

• Research Assignments

• Slides

• Readings

WHAT I GOT TO LEARN -

• Make REAL web applications using cutting-edge technologies.
• Continue to learn and grow as a developer, long after the course ends.
• Create a blog application from scratch using Express, Node.js, and Semantic UI
• Create a complicated DApps application from scratch.
• Write your own browser-based game.
• Create static HTML and CSS portfolio sites and landing pages.
• Think like a developer. Become an expert at Googling code questions!
• Create complex HTML forms with validations.
• Write web apps with full authentication.

9
 • Use Bootstrap to create good-looking responsive layouts.
• Implement responsive navbars on websites.
• Use JavaScript variables, conditionals, loops, functions, arrays, and objects.
• Write JavaScript functions and understand scope and higher order functions.
• Create full-stack web applications from scratch.
• Manipulate the DOM with vanilla JS.
• Manipulate the DOM using jQuery.
• Translate between jQuery and vanillas JS.
• Write JavaScript based browser games.
• Use NodeJS to write server-side JavaScript.
• Write complex web apps with multiple models and data associations.
• Write a REAL application using everything in the course.
• Use Express and MongoDB to create full-stack JS applications.
• Use common JS data structures like Arrays and Objects
• Master the command line interface.
• Use NPM to install all sorts of useful packages.
• Understand the ins and outs of HTTP requests.
• Create your own Node modules.
• Make a beautiful, responsive photographer's portfolio page.
• Create a beautiful, responsive landing page for a startup.
• Implement user authentication.
• Create a beautiful, animated to-do list application.

This course is for anyone who wants to learn about web development, regardless of previous
experience. It's perfect for complete beginners with zero experience. It’s also great for anyone who does
have some experience in a few of the technologies (like HTML and CSS) but not all, if you want to take
ONE COURSE to learn everything you need to know about web development, take this course.

10
 TABLE OF CONTENTS
Title Page no.
Declaration 2
Acknowledgement 3
Abstract 4
About the Organization 5
Chapter 1: Introduction 8
1.1: Course Objectives
Chapter 2: Tools and Technologies Used 10
2.1: Hardware Requirements
2.2: Software Requirements
2.3: Web Development
2.4: VS Code
Chapter 3: Technical Contents 12
Chapter 4: Project Report 16
Chapter 5: Codebase 22
Chapter 6: Snapshots 31
Chapter 7: Results & Discussions 34
Chapter 7: Conclusion & Future Scope 35
Chapter 8: Weekly Report 37

11
 1: INTRODUCTION

Writing a thousand lines of code and turning that into a website is one of the creative and
complicated things for web developers. If you get excited seeing a lot of beautiful websites
and thinking to try your hands on it, then we need to open your eyes telling some important
things that you should know as a web developer. Creating a website that gets a lot of users’
attention is not just about learning various programming languages, you also need to learn
some other concepts like DevTools, data formats, testing, APIs, authentication, and a lot of
stuff like that once you will dig yourself into this field.

The most important skill or knowledge every developer should learn first is these
three basic building blocks i.e., HTML, CSS, and JavaScript. We will be using HTML and
CSS in the front-end for interfaces. Just right click on our web browser and then selecting
view page source option does it. We can find the structure of your website where a lot of
HTML tags are used for different purposes.
CSS is also used in the front end that decides the style, design, layout and how
HTML elements need to be displayed on the screen.

JavaScript is high in demand nowadays and it is basically responsible for making our HTML
pages dynamic and interactive. JavaScript also comes with a variety of languages to make our
website more interactive. If we’re gone specialize in JavaScript like MEAN Stack or MERN
stack, then we’re going deep dive into this language because this one will be our frontend as
well as backend language.

You can do a lot of stuff using browser DevTools like debugging, editing HTML elements,
editing CSS properties, checking device, tracking JavaScript error, etc. Every developer
should be aware of using different tabs (elements, console, network, etc.) in DevTools to
make their work easier and faster. Depending on your browser you can use any DevTools or
whatever browser you are using. People generally prefer using Chrome DevTools to develop,
test and debug the web application but again it’s the choice of the developer which browser
he/she is using to develop the website.

12
 1.1: Course Objectives

This 4-week programme aims to HeadStart our foray into the exciting world of web development
both front and back end. This course helped me master my basics as well as implement those basics
at advanced level through various projects throughout the course, I could hone my visualization
better and push the boundaries of development mindset. The course covered initial front-end
development like HTML, CSS, BOOTSTRAP, jQuery as well as back end in depth including
databases and advanced topics like RESTful Routing, data association & authentication. This course
is for all the developers who are looking forward to enhancing their development journey and
learning skills & technologies which will help them to be a full stack developer faster.

13
TOOLS AND TECHNOLOGIES USED

2.1 : HARDWARE REQUIREMENTS: -

• Pentium-IV(Processor) Or any processor.

• 256 MB Ram OR Above
• 512 KB Cache Memory
• Hard disk 10 GB or above
• Microsoft Compatible 101 or more Keyboard

2.2 : SOFTWARE REQUIREMENTS: -

• Operating System : Windows 95/98/XP with MS-office or above.

• Programming language : JavaScript
• IDE : VS Code

2.3 : JavaScript

JavaScript often abbreviated as JS, is a programming language that conforms to the

ECMAScriptspecification.JavaScript is high-level, often just-in-time compiled, and multi-
paradigm. It has curly-bracket syntax, dynamic typing, prototype based, object-
orientation, and first-class functions.
Alongside HTML and CSS, JavaScript is one of the core technologies of the World Wide
Web. JavaScript enables interactive web pages and is an essential part of web applications.
The vast majority of websites use it for client side page behavior, and all major web browsers
have a dedicated JavaScript engine to execute it.

14
As a multi-paradigm language, JavaScript supports event-driven, functional, and imperative
programming styles. It has application programming interfaces (APIs) for working with text,
dates, regular expressions, standard data structures, and the document object model (DOM).
However, the language itself does not include any input/output(I/O), such as networking,
storage, or graphics facilities, as the host environment (usually a web browser) provides those
APIs.

2.4 : VS CODE

Visual Studio Code is a source-code editor developed by

15
Microsoft for Windows, Linux and macOS. It includes support for debugging, embedded
Git control and GitHub, syntax highlighting, intelligent code completion, snippets, and code
refactoring. It is highly customizable, allowing users to change the theme, keyboard
shortcuts, preferences, and install extensions that add additional functionality. The source
code is free and open source and released under the permissive MIT License. The compiled
binaries are freeware and free for private or commercial use.
Visual Studio Code is based on Electron, a framework which is used to
deploy Node.js applications for the desktop running on the Blink layout engine. Although it
uses the Electron framework, the software does not use Atom and instead employs the same
editor component (codenamed "Monaco") used in Azure DevOps (formerly called Visual
Studio Online and Visual Studio Team Services).

In the Stack Overflow 2019 Developer Survey, Visual Studio Code was ranked the most
popular developer environment tool, with 50.7% of 87,317 respondents claiming to use it.

16
 TECHNICAL CONTENTS

Getting hold on development basics.

The course covered various basic Topics like how one should and can follow the path of
being a full stack developer from basics to advanced level. A lot of problems were solved
based on basic knowledge & its implementation rather than just memorizing stuff.
HTML & CSS
This includes covering commonly used HTML tags. We can refer to MDN Docs as well quite
early in the course as reference material. Overall, this is a small section which gets completed
soon. We skimmed through the CSS section. There is lot of ground to cover in CSS. We got
to learn about Specificity and Cascade, Selectors, Fonts etc. There were 2 projects to give
practical experience in writing CSS.
Bootstrap
This is a huge section where we learn about various Bootstrap (latest version) components
such as navs, grids, forms. There is an image gallery project using Bootstrap which was cool.
JavaScript
JS lessons were very good. Syntax, Control Flow, Functions, Arrays, Object Basics were
taught in detail. (Almost 8 hrs. content in 40 hrs. course). This is mainly because the whole
backend section rests on JS foundations taught in these sections. There are various tiny
coding exercises and quizzes to hammer home the JS concepts.
NODE
Introduction to REPL, quick exercises, npm, installing packages etc. npm faker exercise was
fun.
Express
This begins with a simple express app, package Json file, route params, basic exercise. Colt
uses 'ejs' or embedded JavaScript to render view templates.

17
Database (MongoDB and Mongoose)
We got a brief introduction to MongoDB, Mongo Shell and Mongoose connection etc.
Further about how to integrate mongdb with DApps to create various campgrounds, users,
comments etc.

18
 COURSE CONTENTS
Basics & Logic building
• Path to be a full stack developer.
• Installation & basics
• VS Code local environment set up.

 Front-End Web Development

 HTML 5

 CSS 3

 JavaScript ES6

 DOM Manipulation

 jQuery

 Bash Command Line

 Git, GitHub, and Version Control

 Backend Web Development

 Node.js

 Express.js

 REST

 APIs

 Databases

 SQL

 Firebase

 React.js

 Web Design

 Blockchain technology

 Token contract development

 NFT minting, buying, and selling logic.

19
Front-End Web Development:
A multifaceted field focused on crafting the visual and interactive elements of websites. It involves
combining various technologies and coding languages to create the user-facing aspects of web applications.
HTML 5 serves as the backbone, providing the structure and layout for web content. It delineates the
different parts of a webpage, such as headings, paragraphs, images, and links.

CSS 3:
Complements HTML by styling and formatting web elements. It enables developers to define the
presentation aspects, including colors, fonts, layout, and responsiveness, enhancing the aesthetic appeal and
user experience.

JavaScript ES6:
Empowers developers to make websites interactive and dynamic. It enables functionalities like form
validation, interactive maps, sliders, and other dynamic content, enhancing user engagement. It's a powerful
scripting language that allows manipulation of webpage elements and interaction with users.

DOM Manipulation:
A crucial aspect of JavaScript, enabling developers to access and modify the structure and content of web
documents in real-time. This manipulation facilitates dynamic updates and changes to web pages without
requiring a full reload, ensuring seamless user experiences.

jQuery:
JavaScript library simplifies complex tasks like DOM manipulation and event handling. It streamlines the
process of writing JavaScript code, providing efficient methods for common web development tasks.
jQuery's concise syntax and wide range of plugins make it a popular choice for developers.
20
Bash Command Line:
A text-based interface used in Unix-based systems to interact with the operating system. Mastering command
line basics is crucial for developers as it facilitates efficient navigation, file management, program execution,
and automation of tasks through scripting, enhancing productivity.

Git, GitHub, and Version Control:

Essential for collaborative development. Git, a distributed version control system, tracks changes in code,
allowing multiple developers to work on the same project simultaneously. GitHub, a web-based platform,
hosts Git repositories, enabling teams to collaborate, manage code versions, and track changes effectively,
ensuring a smooth development process and codebase maintenance.

Backend Web Development:

Backend web development refers to the server-side of web development, where the application logic,
databases, and server configurations reside. It involves handling server-side operations, ensuring data
integrity, and managing user authentication.

Node.js:
Node.js is a runtime environment that allows developers to run JavaScript on the server side. It's known for
its non-blocking, event-driven architecture, making it efficient for building scalable network applications.
Express.js:
Express.js is a web application framework for Node.js. It simplifies the process of building robust and
scalable web applications by providing a set of features for building web and mobile applications.

21
REST (Representational State Transfer):
REST is an architectural style for designing networked applications. It uses a stateless communication
model, typically over HTTP, and relies on standard operations (GET, POST, PUT, DELETE) to perform
actions on resources.

APIs (Application Programming Interfaces):

APIs are sets of rules and tools that allow different software applications to communicate with each other. In
web development, APIs are commonly used to enable communication between the frontend and backend of
an application.

Databases:
Databases are systems for storing, organizing, and retrieving data. In web development, databases are crucial
for persistently storing information. They can be relational (SQL databases like MySQL) or non-relational
(NoSQL databases like MongoDB).

SQL (Structured Query Language):

SQL is a domain-specific language used for managing and manipulating relational databases. Developers
use SQL to perform tasks such as querying data, updating records, and defining the structure of a database.

Firebase:
Firebase is a mobile and web application development platform by Google. It provides a suite of services,
including a real-time database, authentication, hosting, and cloud functions, making it easier for developers
to build and scale applications.

22
React.js:
React.js is a JavaScript library for building user interfaces. Developed by Facebook, it allows developers to
create reusable UI components, making it efficient for building complex and interactive user interfaces.

Web Design:
Web design involves the visual aspects of creating a website or web application. It includes elements such
as layout, color, typography, and graphics to enhance the user experience.

Blockchain Technology:
Blockchain is a decentralized and distributed ledger technology. It ensures secure and transparent
transactions by recording them in a tamper-resistant and chronological chain of blocks.

Token Contract Development:

Token contract development involves creating smart contracts on blockchain platforms like Ethereum to
define the rules and behavior of tokens. These contracts govern how tokens are created, transferred, and
managed.

NFT Minting, Buying, and Selling Logic:

NFTs (Non-Fungible Tokens) are unique digital assets stored on a blockchain. Developing logic for NFT
minting involves creating the rules for generating new tokens, while buying and selling logic determines how
these tokens can be traded within a blockchain ecosystem.

23
YELPCAMP Implementation using web development. VARUN KUMAR MISHRA Enrollment No: 02813303121

YELPCAMP Implementation Using Web Development

Varun Kumar Mishra
Information & Technology,
HMR Institute of Technology &
Management, New Delhi, India

ABSTRACT

Yelpcamp is an application for a fictional start up that allows us to add campgrounds for
other users to comment and rate, as view campgrounds added by other users. The project uses
various techniques which includes both front end and back-end concepts like Node.js,
Express.js, Passport.js, jQuery and MongoDB. Following is what the home page looks like
of our final webpage -

24
YELPCAMP Implementation using web development. VARUN KUMAR MISHRA Enrollment No: 02813303121

INTRODUCTION

Yelp Camp is a fun application that allows you to view campgrounds with a short description.
Once you login or signup you can begin to create your own campground that includes a title,
image address and short description.

YelpCamp is a more complex application built from scratch using the following technologies:

On the front-end I have used HTML5, CSS3, JavaScript, Bootstrap for responsive layout, and
jQuery. On the back end I used NodeJS, NPM, ExpressJS, REST, Authentication,
Authorization and PassportJS. For the datastore I used non-sql MongoDB. The application
was developed on Cloud9 IDE and source versioned with GIT. The application is hosted on
Heroku servers and MongoLab.

25
YELPCAMP Implementation using web development. VARUN KUMAR MISHRA Enrollment No: 02813303121

SCOPES OF WEB DEVELOPMENT

The scope of web development is finding new meanings of implementation in various fields.
As web developers, we tend to create websites that are more responsive and less complex.
That is, we are responsible for behind-the-scenes coding and programming of websites.
On the other hand, we must maintain the website’s speed, capacity in terms of traffic and
overall performance.

The swelling wave of e-Commerce dominance fueling the need for organizations to
establish their online presence has led to the emergence of Web Designing as an important
organizational function. More and more organizations are recruiting internal Web Designing
teams or are employing external agencies to dish out professional and functional websites for
them. The basic role of a web designer entails one employing several skills sets in the
production and maintenance of Web Sites. To deliver appropriate quality, they would need to
harness knowledge in the following areas:
• Graphic design
• Interface design
• Authoring using standardized code and proprietary software.
• User experience design
• Search engine optimization

No matter how advanced we become in the field of computer science and technology, Web
development will travel with us. Programming languages/platforms etc. may change. But
the way they are treated by a computer remains. It might take a different way of
representation/ideology. But it stays on.

26
YELPCAMP Implementation using web development. VARUN KUMAR MISHRA Enrollment No: 02813303121

ABOUT THIS PROJECT

In this project that is an implementation of all the concepts learnt in the developer bootcamp,
I will be making a node.js application called yelpCamp where a user can visit & discover the
campgrounds, check in all the details, make comments about their experience and even they
can add their own campground after a simple sign up.

YelpCamp is based on the popular Yelp.com, the difference being it focuses on the
campgrounds that any host/owner can post for the users across the globe to check and review.
The application is hosted on Heroku. The result we will be trying to obtain here will look
like this -

welcome page.

27
YELPCAMP Implementation using web development. VARUN KUMAR MISHRA Enrollment No: 02813303121

FUNCTIONALITIES

The above result will consist of a lot of coding including both front and back-end tools and
technologies and their combined effect, however at the end of the project we will finally be
able to achieve following functionalities -

• Everyone can view the camps and reviews without signing up or logging in.
• The user will have to login to edit the campground details or any comments.
• The user can only edit/delete the campgrounds and comments that they have added.

TECHNOLOGIES USED (WITH DESCRIPTION)

• HTML5 - markup language for creating web pages and web applications.
• CSS3 - used for describing the presentation of a document written in a markup
language.
• Bootstrap - free and open-source front-end web framework for designing websites
and web applications quickly.
• jQuery - cross-platform JavaScript library designed to simplify the client-side
scripting of HTML.
• DOM Manipulation - is a platform and language-neutral interface that allows
programs and scripts to dynamically access and update the content, structure, and
style of a document.
• Node.js - pen-source, cross-platform JavaScript run-time environment for executing
JavaScript code server-side.
• Express.js - for building web applications and APIs and connecting middleware.
• REST - REST (REpresentational State Transfer) is an architectural style for
developing web services.
• MongoDB - open-source cross-platform document-oriented NoSQL database
program to store details like users’ info, campgrounds info and comments.
• PassportJS - authentication middleware for Node.js. Extremely flexible and modular,
Passport can be unobtrusively dropped in to any Express-based web application.
• Data Associations - associating user data with the respective campgrounds and
comments using reference methods.

28
YELPCAMP Implementation using web development. VARUN KUMAR MISHRA Enrollment No: 02813303121

• Heroku - cloud platform as a service used as a web application deployment model.

All the work mentioned above has been done on VS Code editor by creating local
environment setup manually.

29
YELPCAMP Implementation using web development. VARUN KUMAR MISHRA Enrollment No: 02813303121

Understanding and Implementation

Step 1: Creating JS file & including express.

This is going to our very first step that will include setting up our basic structure of the
yelpCamp application, & for that we will be adding app.js file that allows us to require
express so that we can use it, let me list the app.js file :

After express is acquired for further use in our project, we use a few methods so that we can
avoid our code being less cleaned.

30
YELPCAMP Implementation using web development. VARUN KUMAR MISHRA Enrollment No: 02813303121

App.set() method lets us use ejs files without mentioning the .ejs extension
everytime, the parser is used to access body content & then finally we can add campground
images for the basic structure right now, although we are gonna replace them later through
our database but for now, this completes our first step . But our app.js file is not completed
just yet; we are going to come back everytime and edit this file because this is important for
most of the functionalities.

STEP 2: DEFINING PATHS OF REQUESTS

This is the most important and & difficult part of our project, which includes GET & POST
requests and affects the functionality of our project, we need to send appropriate response
based on the type of request made, analyses the request, and finally revert back with an
appropriate response the user is looking for. We want to achieve this:

path of requests output

31
YELPCAMP Implementation using web development. VARUN KUMAR MISHRA Enrollment No: 02813303121

Although this includes a lot of coding & modifications in our app.js file as well as we need to
make new directory called views where ejs files are made, which will help our js file & html
to interact better, but here is a brief description of our js file

STEP 3: DEFINING EJS & INTERACTING WITH JS

Although simple html files are good in most of the cases but sometimes if we want to make
our website look more responsive while keeping our code as clean as possible, we need EJS
(embedded javascript files), these files help us in interacting between javascript & html & css
files.
Till now we have defined paths for our GET requests that we are going to get from
our user and now we need to define what functionality these ejs files will achieve when their
respective path will be called by user. We are going to look for the request in our ejs file, &
then actually render the data present in the ejs through res.render() method .

32
YELPCAMP Implementation using web development. VARUN KUMAR MISHRA Enrollment No: 02813303121

These headers and footers are used to achieve cleaning up of our code so that we don’t have
to write same html again and again what we do here is write it once and then link all the files
we want it in. These are also called EJS partials.

STEP 4: DEFINING CAMPGROUNDS + STYLING.

After defining the basic paths, we now need to define those paths and most important one is
the campground.ejs that is when the user visits /campground then we need to manage the
request and send response, that response will be looking like this:

After setting our basic campground.ejs, we need to use navbars, jumbotrons & grid system
for making it responsive in mobile or any other device & not only our computer screen, here
is the code:

33
YELPCAMP Implementation using web development. VARUN KUMAR MISHRA Enrollment No: 02813303121

STEP 5: ADDING A NEW CAMPGROUND

By allowing the user to sign up or login we give them access to add a campground on their
own which however should reach all the fields presented in the earlier app. By the end of this
step, we want to reach this result:

34
YELPCAMP Implementation using web development. VARUN KUMAR MISHRA Enrollment No: 02813303121

The above form is saved & handled in a different ejs file made for creating a new
campground called new.ejs, this follows code given below:

new.ejs base

STEP 6: DATABASE MANAGEMENT

This project could have been made by both using relational or a non-relational database, but
here we used mongoDB & mongoose, open-source cross-platform document-oriented
NoSQL database program to store details like users’ info, campgrounds info and comments.
Mongoose is an Object Data Modeling (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.

STEP 7: PROVIDING FINAL TOUCH

35
YELPCAMP Implementation using web development. VARUN KUMAR MISHRA Enrollment No: 02813303121

For the data persistence part, a lot of concepts were implemented to mostly less the workload,
following important techniques were used to provide the website the final touch:

RESTful Routing – Here we first learn about RESTful Routes by building a fully functional
Blog app with CRUD. We also used a different framework called Semantic UI instead of
Bootstrap.

Data Association, Creating Comments - Here I learnt about data association concepts such
as embedded data, object references and using the same concepts to create comment
feedback for campgrounds.

Authentication - Most important section where we learn how to add users to yelpcamp with
proper authentication. Rather than creating our own authentication system, Colt uses
passport.js for the same. Here we learn about various aspects of passport such as
configuration, local strategy, plugging passport to our model.
Our app now looks cool. New users can sign up, login, create campgrounds etc. Finally,
CRUD functionality is completed for campgrounds and comments. Here is what our final
website homepage looks like:

36
YELPCAMP Implementation using web development. VARUN KUMAR MISHRA Enrollment No: 02813303121

STEP 8: DEPLOYMENT

Deployment in brief consists of following two steps:

• In the app.js use - > mongoose.connect('mongodb://localhost/yelp_camp'); (if
mongodb is running on localhost).
• I have used -> mongoose.connect(process.env.DATABASEURL); and have set
DATABASEURL as environment variable in my heroku to maintain security.

I. CONCLUSIONS

The celpcamp website has been successfully implemented using all the concepts learnt during
the developer bootcamp, Overall, you end up with sufficient knowledge to build any web app
with CRUD functionality with Data Association and Authentication. This course gives us a
good foundation to modern JS development.

37
YELPCAMP Implementation using web development. VARUN KUMAR MISHRA Enrollment No: 02813303121

II. ACKNOWLEDGMENTS

My sincere thanks to all the professors in college who taught me these concepts which are
then used to complete this project, Also I want to thank Dr. Angela Lu for such a good
course, I wish I had found this course earlier in my coding journey. I wandered too much
through beginner tutorials, completing this course has boosted my confidence and I have
found my peace in JS development. I want to continue learning JS frameworks.

38
YELPCAMP Implementation using web development. VARUN KUMAR MISHRA Enrollment No: 02813303121

SNAPSHOTS

Home page

selected campground

39
YELPCAMP Implementation using web development. VARUN KUMAR MISHRA Enrollment No: 02813303121

sign up screen

login screen

adding a new campground

40
YELPCAMP Implementation using web development. VARUN KUMAR MISHRA Enrollment No: 02813303121

adding a new comment

Final discover page

41
YELPCAMP Implementation using web development. VARUN KUMAR MISHRA Enrollment No: 02813303121

RESULTS AND DISCUSSIONS

Overall, the training helped me to understand web development & its practical usage in a
better way and the project I undertook helped me to solidify these concepts. I learned a lot
from the bootcamp developer Dr. Angela Lu, who herself is an ace developer. She has been
in this thing for the past several years & helped various beginners achieve their dream of
being a full stack developer. I am glad that the Department of Information & Technology,
HMR provided me this opportunity to undergo this Summer Training. I wish to continue
working on concepts learnt & further solidifying them in future too.

42
YELPCAMP Implementation using web development. VARUN KUMAR MISHRA Enrollment No: 02813303121

CONCLUSIONS & FUTURE SCOPE

Future scope of Web Development

Due to the high technologies evolve rapidly, the requirements to the developers change as
well. New trends require new solutions along with approaches. If you crave to get insights
into what changes in the industry are yet to come soon, then observe what the programmers
should know and consider in 2023 to remain competitive and be the pros in the field.

1. The need to know more languages and technologies.

There was a time not so long ago when it was enough to learn a single programming
language like C++, JavaScript, PHP, or Python for a good salary. However, web development
is quite a shifting industry and programmers need to have a broad scope of knowledge today
to do the work in the best possible manner. Thus, it’s strongly recommended to learn more
languages and techniques for the fast and easy switch in case it’s needed. Keep in mind that
Python, JavaScript along with Web Assembly will be on the top in 2023.

2. Adaptability
According to the statistics, 51.98 % of web page views worldwide are mobile internet traffic
in February 2023. It makes the experts believe that mobile-friendly sites are a must-have for
the year and beyond. Of course, in case you’re going to create a trendy website. Today,
people don’t want to use sites that are limited in functionality, hard-to-navigate, and are just
unappealing to the mobile audience. That’s why web development in the direction will be on-
demand. So, pay attention to the adaptability of the site to enhance the customer experience
and stay competitive.

3. Less client work on more personal projects.

Today more and more developers are starting to think about making their own apps and
starting their own projects than working for a client. First and foremost, there is a hope to
design the next Facebook, Tweeter, or something like those services.

43
YELPCAMP Implementation using web development. VARUN KUMAR MISHRA Enrollment No: 02813303121

Also working on your own project makes you always learn and learn more, discover new
ways and approaches. Thus, you’re updated on the latest trends and newest technologies.

4. The Bottomline
The future is here. As you could notice not all the trends 2023 mentioned above are new.
Some of them just keep on dominating in the field that requires lots of tech-savvy pros.
The list of hits is much longer and includes Cybersecurity, Motion UI, Frameworks, Hyper-
automation, etc. The range can be enhanced depending on the course of the business.
The market is evolving constantly making web developers aware of the trends, changes and
new solutions that have appeared. It’s a challenge, but along with that, it’s a driver for
progress.

44
YELPCAMP Implementation using web development. VARUN KUMAR MISHRA Enrollment No: 02813303121

WEEKLY REPORT

Week: 1

Description of activity, task, duty Performed with Team Performed Alone Time Spent
or Responsibility
HTML5 & CSS3 No Yes 13 hrs.

List one thing that went particularly well this week (area of improvement, new task, etc.)

Basics got clearer; focus was high.

List one thing that was most challenging this week (issue, problem, difficulty, etc.)
Getting over basic mistakes while coding

List one way you can improve your performance - would have given more time to small
projects rather than theory.

45
YELPCAMP Implementation using web development. VARUN KUMAR MISHRA Enrollment No: 02813303121

WEEKLY REPORT

Week: 2

Description of activity, task, duty Performed with Team Performed Alone Time Spent
or Responsibility
Bootstrap & JS Basics No Yes 17 hrs.
Advanced JS & jQuery

List one thing that went particularly well this week (area of improvement, new task, etc.)

learned bootstrap & JS from basics to advanced.

List one thing that was most challenging this week (issue, problem, difficulty, etc.)

Getting started with JS was the toughest part of the course.

List one way you can improve your performance – Practicing more on platforms.

46
YELPCAMP Implementation using web development. VARUN KUMAR MISHRA Enrollment No: 02813303121

WEEKLY REPORT

Week: 3

Description of activity, task, duty Performed with Team Performed Alone Time Spent
or Responsibility
JS Advanced projects & Back- NO Yes 15 hrs.
end basics
Node JS, express & mongoDB

List one thing that went particularly well this week (area of improvement, new task, etc)

Did a lot of problems on JS to get better.

List one thing that was most challenging this week (issue, problem, difficulty, etc.)

Did not give proper time to it.

List one way you can improve your performance – increasing the time spent on problem-
solving.

47
YELPCAMP Implementation using web development. VARUN KUMAR MISHRA Enrollment No: 02813303121

WEEKLY REPORT

Week: 4

Description of activity, task, duty Performed with Team Performed Alone Time Spent
or Responsibility
Advanced back end & No Yes 15 hrs
yelpcamp main project

List one thing that went particularly well this week (area of improvement, new task, etc)

Tree basics were cleared while developing small games & projects.

List one thing that was most challenging this week (issue, problem, difficulty, etc.)

advanced concepts took a lot of time.

List one way you can improve your performance – By understanding JS better we can do
almost anything easily.

48
MY SUMMER TRAINING CERTIFICATE

49
50
REFERENCES

[1] Various, "Wikipedia," [Online]. Available: https://en.wikipedia.org/wiki/views_ejs.

[2] R. A, "Lighthouse3d.com," 2015. [Online]. Available:
http://www.lighthouse3d.com/tutorials/maths/data-persistence-rest/. [Accessed 2019].
[3] Various, "Wikipedia," [Online]. Available:
https://en.wikipedia.org/wiki/authentication_using_passport.js.
[4] Various, "Wikipedia," [Online]. Available: https://en.wikipedia.org/wiki/java
%27s_script.
[5] Eloquent JavaScript: A Modern Introduction to Programming

51