MERN STACK Seminar Report
MERN STACK Seminar Report
i
CANDIDATE’S DECLARATION
Certified that this project/training report entitled “FULL STACK WEB DEVELOPMENT - MERN
STACK” submitted by Deepak Yadav University Roll Number -20ELDCS012 , student of B.Tech.
CSE/IT, Laxmi Devi Institute of Engineering & Technology, Alwar. in the partial fulfillment of the
requirement for the award of Bachelors of Technology (CSE) Degree of Bikaner Technical University,
This report has not been submitted to any other university or institution for the award of any degree.
Deepak Yadav
20ELDCS012
Date:
ii
CERTIFICATE
iii
ABSTRACT
The main objective of this Industry Training Report FULL STACK WEB
DEVELOPMENT - MERN STACK. Several programming languages that are in
use to develop a web based application or software. Some of them are only
used for the UI and the frontend of the application, some are used for the
backend design of the software. For example- HTML3, HTML4, HTML5,
CSS, React, Bootstrap Framework etc. are some programming languages to
develop the frontend of an application. MongoDb, Nodejs etc are used at the
backend. Nowadays there are also some framework' s that use vastly.
Frameworks are basically structured programming by using Model, View,
and Controller. It is also called as MVC. If we develop web based
application that is very useful for us because we can access it from anywhere
of the world. It is very helpful for our daily life. That is why I choose subject
of my report is "WEBSITE DESIGN AND
DEVELOPMENT". Working in Bluebird Interactive added huge
experiences in my upcoming career. Solving real life problems was another
key issue. This report takes us through all the details of WEBSITE DESIGN
AND DEVELOPMENT knowledge and experience gathered during this
internship period.
iv
ACKNOWLEDGEMENT
Firstly, I impart and categorical gratitude almighty Allah for His divine
blessings and giving me the strength to finish this project work spot with
success. I really grateful and want our profound our Dr. Pratap singh
patwal, HOD, Department of CSE. Deep information and keen interest of
my supervisor within the field of website application design and
development influenced me to hold out this spot. His endless patience,
studious steering, continual encouragement, constant and energetic
oversight, constructive criticism, valuable recommendation, reading
several inferior drafts and correcting them the least bit stage have created
it attainable to finish this spot. I would wish to specific my heartiest
feeling to Dr. Pratap singh patwal Professor and Head, Department of
Computer Science and Engineering, for his kind facilitate to end my
internship and conjointly to alternative faculty member and therefore the
employees of Computer Science and engineering department of daffodil
International University. I would wish to impart my all course mates in
daffodil International University, who took half during this discuss
whereas finishing the course work. Finally, I must acknowledge with due
respect the constant support and encouragements of my parents throughout
this internship.
v
CANDIDATE’S DECLARATION
I, Deepak Yadav, Roll No. 20ELDCS012, B.Tech (Semester- 6th) of the Laxmi Devi Institute of
Engineering & Technology, Alwar. hereby declare that the Training Report entitled
“FULL STACK WEB DEVELOPMENT - MERN STACK.” is an original work and data
provided in the study is authentic to
the best of my knowledge. This report has not been submitted to any other Institute for the award of
any
other degree.
vi
TABLE OF CONTENTS
CONTENT PAGE NO
Approval i
Declaration ii
Acknowledge iii
Abstract iv
CHAPTER PAGE NO
• 4.3 Challenges 21
8
CHAPTER 5: CONCLUTION AND FUTURE SCOPE 22-23
• 5.1 Conclusion 22
• 5.2 Future Scopes 22
REFERENCE 24
9
CHAPTER 1:
INTRODUCTION
1.1 Objectives
Internship is thought on addition a few encounters from the different a few associations which
will encourage bounty to make a connection between the hypothetical and reasonable data. It
includes profitable ability like usable working environment or pc instrumentation, taking care of
a spread of things in the meantime, sorting out or dissecting learning, spending plans or rising
collaboration, composing, and talking gifts. Usable work environment or pc instrumentation,
composing, and talking gifts. It’s indispensable to get a handle on the best approach to impart
data to outsiders, managers, and companions. While doing an undergraduate program in
computer science and engineering at Daffodil International University, I considered a few
programming courses Last 4 years. Be that as it may, this is frequently not happy to get a handle
on the web developing because of it's an extremely huge marketplace. to encourage a sound data
concerning programming which has net application style and Development. I'm intrigued to
attempt and do entry level position in BluBird Interactive Ltd.
This entry level position report covers the whole temporary job time that I have finished with
progress concerning the coding, style and improvement.
.
Objectives
• Understand basic concept and structure of HTML3, HTML4, HTML5, CSS, Bootstrap
Framework, PHP, Java, creating Database & connecting with WordPress
10
1.2 Goals
• Gain knowledge about HTML3, HTML4, HTML5, CSS, Bootstrap Framework, PHP,
Java etc.
1.3 Motivation
For internship to induce the sensible expertise within the field of technology and Engineering.
It's extraordinarily vital that knowing about hypothetical information and actualize inside the
reasonable field to broaden our gifted ability in building work advertise.
The motivation of this internship actually came from the intention of learning more about the
job sectors and the work environment of IT farms. A desktop base system of creating websites
is easy to learn. Before joining the internship, i knew that I am in a primary stage and beginner
level in learning web development, my first task is to learn and create and be creative. The
11
learning curve of a web development is such interesting and charming. It is very simple to
build a project fully by HTML, CSS, MYSQL and PHP when you know what you are doing.
1.4 Layout of Report
This Layout contains key points of this report as like objective details of the kind of paper
selected, the margins, line spacing, pagination, and equation illustrations, and references,
incorporation. Table 1 presents general page layout specifications.
I may allocate a document format for each report that I make. Through the document design, I
describe the report's template attributes, like the report's page format and report’s data's
number format. I am able of setting parameters for the documents when I use the functions of
layout.
Once I define a document format, I explicitly specify a design for a report and I can modify a
report's default layout.
• Chapter 2 This chapter is dedicated to describe the company I am doing the internship
in. The motto and the goal of the company is stated in this chapter.
• Chapter 3 This chapter consists of the responsibilities and the roles I was given while
doing the internship. This contains the training attended, work environment, assigned
roles and responsibilities and the performed tasks.
• Chapter 4 This chapter contains the outcomes of a project and as well the internship.
The outcome of a project is the result, and the problems and their solutions. For
example understanding OOP and learning about the challenges and outcomes.
• In the Chapter 5 This chapter simply contains and describes the conclusion of the
report.
12
CHAPTER 2
ENTERPRISE OF THE INTERNSHIP
•
Software development.
•
Software Development Kit
•
Website development.
•
Mobile app development.
•
CRM
•
Inventory management
•
Analytic, Reporting and Big Data solutions
13
2.2 Head Office
+880 1766-681318
[email protected]
14
CHAPTER 3
ROLES AND RESPONSIBILITY OF THE
INTERNSHIP
3.1 Introduction :
This chapter secured the approach of internship program and gives the data about Where
internship has been connected to accept accountability this program.
• HTML5, HTML4
• JavaScript
• CSS3, CSS2
• MySQL
• Bootstrap
• NodeJs
• UI/UX design.
Designing UI/UX for Websites and Mobile applications.
• Web design.
Designing websites.
15
• Frontend development.
Developing the frontend of various websites.
• Android app development.
Designing and developing Android applications.
Backend Developer The responsibility of a back end developer is to develop the rear end of a
website that interacts with the server. This type of web developer specializes in the languages
like PHP, ruby, ASP.Net, Java, Cold Fusion, and Perl [6].
16
3.6 Web Pages details
• Home
• About Us
• Helmets
• Protective Gears
• Contact Us
• Login
• Register
Home Page:
In this page the home screen of the website is showed. Users can surf through this page to
access all the products the website contains. The overview the website is also present in this
page.
Figure 3.6.1 shows the home page
17
Helmets Page
This page contains all the helmets available in this site. This is the Firts product page. Either
registered or non-registered users can access this page. Figure 3.6.2 shows the helmet page.
18
Protective Gears Page:
This is the second and last product page. This site contains all the other protective gears like
knee and elbow guard, jackets, riding boot and gloves.
Figure 3.6.3 shows the Protective gears page.
19
Contact Us Page:
This page is dedicated to all the info needed by the customer and consumers to contact the
administrators of the web page. Figure 3.6.4 shows the contact us page.
20
About Us Page:
This page is dedicated to the goals and aim of the company. It also tell why the company was
founded and what other services they offer.
Figure 3.6.5 shows the about us page.
21
Login:
This page can be accessed by both user and admin to login to the site.
Figure 3.6.6 shows the login.
22
Sign-up Page :
This is the sign-up page. This gives the chance to new user to sign-up as a registered customer.
Figure 3.6.7 shows the sign-up page.
23
Payment Page:
This page appears when the customer wants the check out. In this page the order summary is
presented and the customer needs to fill up payment information to proceed . Figure 3.6.8
shows the payment page.
24
Cart Page:
Product List: The cart page will display a list of the items you have added to your shopping cart.
Each item may include its name, image, quantity, price, and sometimes additional information like
color or size.
25
Check out Page:
Display a list of all the items the customer has added to their cart. Include the product name,
quantity, price per unit, and a small product image if possible. This allows customers to verify their
selected items and quantities.
26
CHAPTER 4
INTERNSHIP OUTCOMES
4.1.1 Problems
I faced so many problems to create while working with CSS. It's very easy, but sometimes it
doesn't match my expectations and is placed in the right place. Web design is not a simple task.
To come up with a unique web design it takes a lot of creativity, brainstorming, cooperation of
the group and uniqueness. A web designer goes through a lot of obstacles in regular basis. Only
the web designs that were in the process of constant development and recursive thinking can
satisfy the target market and clients. This creates a challenging environment for designing
websites.
On the opposite, web designers face some other obstacles. Such tasks include maintaining a
website that is sensitive enough to be viewed and accessed on all phones. Websites sometimes
take time to load, so making website loading faster is one of the toughest challenges for web
design to provide a better user experience.
There is another issue that happens most often. Clients face issues with the website and complain
it the the developer. But when developers check the website it look absolutely fine to them.
These issues can be caused by out dated web servers or when clients make incorrect changes to
them. Finding the sources of these issues can be time consuming and developer had to tackle this
in a daily basis.
4.1.2 Solutions
Web development really is so fascinating and at the same time tough to me, I will learn and
understand several goals with interest through internship training as if after studying I could
understand web development and it is so interesting then all the other languages to me. During
my training period, I solved the CSS and other problems. Clean software eliminates
unforeseen errors that can impact the load of site. Automated website monitoring solutions
frequently enable developers to view the websites of their customers in real time and set alerts
to notify them when potential issues arise. Not only does this allow developers to recognise an
issue before the customer does it, it also gives them the opportunity to address it in many
situations before the problem affects the business of the customer.
27
4.2 Outcomes of Learning
4.2.1 HTML
• Basic HTML (Tags, Element, Attributes, Paragraphs, Headings, Line Breaks,
Horizontal Rule, Lists, Table, Color Codes, Font, Text Linking, Email, Images,
Background, Comments, Meta, Media, Charset)
• Basic concept (WWW& HTTP, HTTPS, Client Server Communication)
• HTML Forms (Input, Text Fields, Password, Checkbox, Combo Box, Radio, Text
Areas, Files, Buttons)
• HTML5 features
4.2.2 CSS
• Basic CSS (selector, internal, external, Inline, Class, Id, Background, font, Text,
Padding, Margin, Border, list CSS, hovering and elements)
• Advance CSS (border-radius, opacity, cursor, layers, position, display, float, gradient,
and multiple-column)
• Concept of Menus (single menu, dropdown menu)
• Template, design using CSS div.
4.2.3 Bootstrap
• Environment Setup
• Grid System
• Typography
• Tables, Forms, Buttons, Images
• Drop down, Button group
• Navigation Element
• Bootstrap plug-ins (Transition, Modal, Drop down, Tab, Tool tip, Alert, Button)
4.2.4 JavaScript
28
• Basic JavaScript (Syntax, Enable, Location, Operators, Variables, Events, Alert,
Confirm, Prompt, POP up, Date, print)
• JavaScript String (Strings, Length, Split, Search, Replace)
• JavaScript advanced (get Element by Id, Inner HTML, Get table, index, DOM,
manipulation, Regular Expression)
4.3 Challenges
During the design of the code, different types of problems have to be met. Also widespread:
• Syntax error.
• Fatal error.
• Find out the problem and try to solve that.
29
CHAPTER 5
CONCLUTION AND THE FUTURE SCOPE
5.1 Conclusion
As we all know, our country is a developing country and it dreams to be a developed country
soon. Hence the government of Bangladesh has taken many necessary project to fulfilling the
concept of digital Bangladesh. Day by day our job sector is getting more and more competitive.
As a result every other company is searching for experienced candidates.
Finally, I can claim it's internship that helps me gain experience. Thanks to BluBird interactive
Ltd, I gained so much more in-depth knowledge of technical skills and personal skills This
project helped me gather theoretical and practical knowledge about HTML4/5, CSS, PHP,
MYSQL and other programming language. Beforehand I was confident about designing and
developing frontend of websites. Now I am also confident and competent in backbends.
For those students who are willing to work in web development, there are huge opportunities
available. To give them the scope for online work and development of website, most private
and public organizations employ web designers. With the rapid emergence of the digital
industry, web development professionals ' demand is growing, and in the coming days this has
already availed so many job opportunity for newcomers.
My internship company gave me a good scope to learn and discover my potentials. I am very
grateful to them. Now I am able to develop web and mobile applications. I was fortunate for
getting the chance to meet the real life software development environment.
30
• Working as a software engineer is possible.
• Can persue career in web design.
• Woking as a web developer is a possibility.
• Can persue Mobile app developing.
• Can work as a QA Tester.
31
REFERENCE
1. https://www.blubirdinteractive.com/
a. Last Accessed on 2 April, 2019
2. http://mthelmets.com/
a. Last Accessed on 2 October, 2019
3. www.quora.com
a. https://www.quora.com/topic/What-Are-Benefits-of-a-Developers-How-good-
Are-Opportunities-in-the-current-market, Last
b. Accessed on 2 October, 2019
4. www.mage-people.com HYPERLINK
"http://www.mage-people.com/"
http://www.mage-people.com Last
Accessed on 2 October, 2019
5. www.onetonline.org
a. https://www.onetonline.org/link/details/15-1134.00?redir=15-1099.04Last
Accessed on 5 October, 2019
6. www.fashions-first.com HYPERLINK
"http://www.fashions-first.com/"
http://www.fashions-first.com Last
Accessed on 5 October, 2019
7. www.bls.gov
a. http://www.bls.gov/ooh/computer-and-information-technology/web-
developers.html
b. Last Accessed on 5 October, 2019
8. money.usnews.com
a. http://money.usnews.com/careers/best-jobs/web-developer
Last Accessed 7 October, 2019
9. www.maxproit.net HYPERLINK
"http://www.maxproit.net/index.php/home_controll"
http://www.maxproit.net/index.php/home_controll Last
Accessed on 7 October, 2019
10. www.sinclair.edu
a. https://www.sinclair.edu/program/params/programCode/WEDE-S-AAS
Last Accessed on 8 October, 2019
11. www.mindtools.com HYPERLINK
"https://www.mindtools.com/pages/article/worksheetsindex.htm"
32
33