SlideShare a Scribd company logo
INDUSTRIAL TRAINING REPORT
ON “WEB DEVELOPMENT”
(JULY 10,2022 - AUGUST 10,2022)
Submitted By:
Pankhuri Tripathi
190106028
Final Btech. ET
About Youth & Sports Development
Federation of India
 It is an NGO whose objective is to promote sports all over the
country.
 It’s aim is to promote all types of sports activities among the
Youth in his/her interested areas by organizing tournaments in
different parts of India.
 It provides such opportunities to each and every interested youth
of our country who is neglected by different sports organizations.
 It also provides a platform to help the interested youth to
develop their skills in the sport of their choice.
Project Work
Purpose of Project
 Purpose of this project is that to learn how to manage
database, i.e., proper validation of every details, proper
authentication and authorization of users which registers
themselves on the web application.
 To develop a website centered around sports, useful for
promoting and providing relevant Information to users.
Weekly overview of Internship Activities
 1st Week: Introduction to React js,features of React
js introduction to components,routing in react js
 2nd Week: Worked on front-end design to Develop
Home Page UI, Sign Page UI.
 3rd Week: Server-side development to implement
two-step verification on signup.
 4th Week: Implemented routing between pages
and linked them in navbar.
TECH STACKS USED
 ReactJS ( A JavaScript library used for developing the frontend
of a website)
 Styled-Components (for styling the webpages).
 API (for fetching the news related to different fields and
information related to various sports based on countries they
are played in).
 VS Code (IDE used for developing the website)
React Js and Its Features
❖ React is a declarative, efficient, and flexible JavaScript library
for building user interfaces
❖ Features:
1-It uses one way data binding
2-Virtual DOM Property
3-High Performance
❖ React lets you compose complex UIs from small and
isolated pieces of code called “components”.
❖ React js has different components like class components
which are class based and functional components.
Components AND React-Router-DOM
Components are small pieces of code that are pieced together to
create complex UI’s.
When creating a React class component the component has to
include the extends React.Component statement, this statement
creates an inheritance to React.Component, and gives your
component access to React.
React Router DOM is an npm package that enables you to
implement dynamic routing in a web app. It allows you to display
pages and allow users to navigate them. It is a fully-featured
client and server-side routing library for React.
Front-end design:-
1) HOME PAGE UI
❖ First we created background of home page.
❖ We then used some animations using css.
❖ Then We added card of some functionalities like discuss, blog,
podcast, voting, etc, that our website provides with details
using card components and some basic css.
❖ We then created Navigation bar of home page in a separate
component and did some styling on it.
❖ We provided contact details and social media handles like
facebook,instagram to the header and the footer section.
❖ Then we added HomePage component to our App.js.
HomePage
Footer
2)SignUp Page UI
❖ SignUp Page is created for users to sign up and can keep track of their
records.
❖ For Signing Up User has to enter the name and email address then has to
enter the strong password.
❖ After filling the details ,user has to click “Join Now” for successfully
sign up.
❖ In this,we used form elements like “label”, “input”. ”button”.
❖ Events like “onClick” was associated with “join now” button,so that on
clicking it users details can be updated.
❖ Styling of this page was done using separate css file.
Output-Register Page
Login Page
Server side design:-
Implement Two-factor authentication using node.js
 We need some kind of a mechanism that
allows us to verify a user’s identity.
 The way to do it is to create a verification
code that will be sent for each new user that
registers to our website.
 JWT(JSON Web Token) is a token format.
It is digitally-signed, self-contained, and
compact.
 It provides a convenient mechanism for
transferring data.
Authentication Process
 User registers with username, password and email
 The server creates a user object in the DB
 A JWT token and a verification code is generated and saved in the DB
 A Verification URL is send to the email the user registered with containing the JWT token and the
verification code. User clicks the verification link in his mail box
 Request in sent to the server, JWT is checked in the middleware
 If JWT is valid the request gets passed to the verification api endpoint, code is checked, if the
verification process is successful the user’s identity is now verified
 User logs in and can make requests to our website
Library used
 Express JS — For serving requests
 jsonwebtoken — For writing and verifying JWT tokens
 bcryptjs — For password encryption
 cryptoRandomString — Generate random verification codes
 dotenv — Using .env files as config for our server
 nodemailer and nodemailer-express-handlebars — sending
emails
Code
:
const express = require('express')
const router =express.Router()
const mongoose= require('mongoose')
const User=mongoose.model("User")
const bcrypt= require('bcryptjs')
const jwt= require('jsonwebtoken')
const {JWT_SECRET}= require('../config/keys')
const nodemailer = require('nodemailer')
const sendgridTransport =require("nodemailer-sendgridtransport")
const {SENDGRID_API, EMAIL} =require('../config/keys’)
//to set up an SMTP connection,created a transporter object
const transporter =
nodemailer.createTransport(sendgridTransport({
auth:{
api_key:SENDGRID_API,
}}))
1) Modify the Signup
Procedures
exports.signup = (req, res) => {
const token=jwt.sign({email: req.body.email}, config.secret)
const user = new User({
username: req.body.username,
email: req.body.email,
password: bcrypt.hashSync(req.body.password, 8),
confirmationCode: token,
verified: false
});
user.save((err) => {
if (err) {
res.status(500).send({ message: err });
return;
}
res.send({
message:
"User was registered successfully! Please check your
email",
});
nodemailer.sendConfirmationEmail(
user.username,
user.email,
user.confirmationCode
);
})
2) Send Confirmation Mail
module.exports.sendConfirmationEmail = (name, email, confirmationCode) =>
{
console.log("Check");
transport.sendMail({
from: user,
to: email,
subject: "Please confirm your account",
html: `<h1>Email Confirmation</h1>
<h2>Hello ${name}</h2>
<p>Thank you for subscribing. Please confirm your email by
clicking on the following link</p>
<a href=http://localhost:8081/confirm/${confirmationCode}>
Click here</a>
</div>`,
}).catch(err => console.log(err));
};
3)Create the Confirmation route
exports.verifyUser = (req, res, next) => {
User.findOne({
confirmationCode: req.params.confirmationCode,
})
.then((user) => {
if (!user) {
return res.status(404).send({ message: "User Not found." });
}
user.status = "Active";
user.save((err) => {
if (err) {
res.status(500).send({ message: err });
return;
}
});
})
.catch((e) => console.log("error", e));
};
Routing Implementation Using
“React-Router-Dom”
❖ Since the website composed of different pages/components,so
there was the need to dynamically fetched these based on URLS
rather than to refresh them again and again.
❖ So to make this routing possible,”react-router-dom” has been
used.
❖ Here we used react-router-components like
➢ Router -Parent component that includes other
components.Everything within this will be part of routing.
➢ Switch-Renders first route that matches the location.
➢ Route-checks the current URL and displays the component
associated with that exact path..
➢ Link-Used to created links to different routes.
❖ ‘Link’ Component was imported from ‘react-router-dom’ in
NavBar component.
❖ Then ‘ Link’ used in NavBar to create link between these
different routes.
Routing Code
Conclusion
❖ After creating the different components required for website and the
routing between them,our website was successfully created.
❖ Over the period of 30 days ,we deeply understood the importance of
react components and how react-router-dom works or how dynamic
routing is done.
 I also learnt how to use React to develop mobile friendly
and responsive websites.
THANK YOU…

More Related Content

Similar to pptindustrial (1).pptx

Jeethu_Resume M
Jeethu_Resume MJeethu_Resume M
Jeethu_Resume M
jeethu ab
 
SharePoint 2010, Claims-Based Identity, Facebook, and the Cloud
SharePoint 2010, Claims-Based Identity, Facebook, and the CloudSharePoint 2010, Claims-Based Identity, Facebook, and the Cloud
SharePoint 2010, Claims-Based Identity, Facebook, and the Cloud
Danny Jessee
 
Resume_Vivek_Bishnoi
Resume_Vivek_BishnoiResume_Vivek_Bishnoi
Resume_Vivek_Bishnoi
vivek bishnoi
 
Building a chat app with windows azure mobile
Building a chat app with windows azure mobileBuilding a chat app with windows azure mobile
Building a chat app with windows azure mobile
Flavius-Radu Demian
 

Similar to pptindustrial (1).pptx (20)

Passport js authentication in nodejs how to implement facebook login feature ...
Passport js authentication in nodejs how to implement facebook login feature ...Passport js authentication in nodejs how to implement facebook login feature ...
Passport js authentication in nodejs how to implement facebook login feature ...
 
Build a Web Authentication System with a Custom UI
Build a Web Authentication System with a Custom UIBuild a Web Authentication System with a Custom UI
Build a Web Authentication System with a Custom UI
 
Build a Web Authentication System with a Custom UI
Build a Web Authentication System with a Custom UIBuild a Web Authentication System with a Custom UI
Build a Web Authentication System with a Custom UI
 
Telerik AppBuilder Presentation for TelerikNEXT Conference
Telerik AppBuilder Presentation for TelerikNEXT ConferenceTelerik AppBuilder Presentation for TelerikNEXT Conference
Telerik AppBuilder Presentation for TelerikNEXT Conference
 
Pretend that you are part of a software team that have just .pdf
Pretend that you are part of a software team that have just .pdfPretend that you are part of a software team that have just .pdf
Pretend that you are part of a software team that have just .pdf
 
Understanding router state in angular 7 passing data through angular router s...
Understanding router state in angular 7 passing data through angular router s...Understanding router state in angular 7 passing data through angular router s...
Understanding router state in angular 7 passing data through angular router s...
 
MongoDB.local Sydney: Evolving your Data Access with MongoDB Stitch
MongoDB.local Sydney: Evolving your Data Access with MongoDB StitchMongoDB.local Sydney: Evolving your Data Access with MongoDB Stitch
MongoDB.local Sydney: Evolving your Data Access with MongoDB Stitch
 
OpenWebBeans/Web Beans
OpenWebBeans/Web BeansOpenWebBeans/Web Beans
OpenWebBeans/Web Beans
 
Jeethu_Resume M
Jeethu_Resume MJeethu_Resume M
Jeethu_Resume M
 
SharePoint 2010 authentications
SharePoint 2010 authenticationsSharePoint 2010 authentications
SharePoint 2010 authentications
 
Microservice Protection With WSO2 Identity Server
Microservice Protection With WSO2 Identity ServerMicroservice Protection With WSO2 Identity Server
Microservice Protection With WSO2 Identity Server
 
How to build a chat application with react js, nodejs, and socket.io
How to build a chat application with react js, nodejs, and socket.ioHow to build a chat application with react js, nodejs, and socket.io
How to build a chat application with react js, nodejs, and socket.io
 
SharePoint 2010, Claims-Based Identity, Facebook, and the Cloud
SharePoint 2010, Claims-Based Identity, Facebook, and the CloudSharePoint 2010, Claims-Based Identity, Facebook, and the Cloud
SharePoint 2010, Claims-Based Identity, Facebook, and the Cloud
 
Resume
ResumeResume
Resume
 
Resume_Vivek_Bishnoi
Resume_Vivek_BishnoiResume_Vivek_Bishnoi
Resume_Vivek_Bishnoi
 
Online banking
Online bankingOnline banking
Online banking
 
Javascript session 1
Javascript session 1Javascript session 1
Javascript session 1
 
ASP.NET Lecture 5
ASP.NET Lecture 5ASP.NET Lecture 5
ASP.NET Lecture 5
 
End-to-end Mobile App Development (with iOS and Azure Mobile Services)
End-to-end Mobile App Development (with iOS and Azure Mobile Services)End-to-end Mobile App Development (with iOS and Azure Mobile Services)
End-to-end Mobile App Development (with iOS and Azure Mobile Services)
 
Building a chat app with windows azure mobile
Building a chat app with windows azure mobileBuilding a chat app with windows azure mobile
Building a chat app with windows azure mobile
 

Recently uploaded

一比一原版UTS毕业证悉尼科技大学毕业证成绩单如何办理
一比一原版UTS毕业证悉尼科技大学毕业证成绩单如何办理一比一原版UTS毕业证悉尼科技大学毕业证成绩单如何办理
一比一原版UTS毕业证悉尼科技大学毕业证成绩单如何办理
aagad
 
Article writing on excessive use of internet.pptx
Article writing on excessive use of internet.pptxArticle writing on excessive use of internet.pptx
Article writing on excessive use of internet.pptx
abhinandnam9997
 

Recently uploaded (12)

Stay Ahead with 2024's Top Web Design Trends
Stay Ahead with 2024's Top Web Design TrendsStay Ahead with 2024's Top Web Design Trends
Stay Ahead with 2024's Top Web Design Trends
 
The+Prospects+of+E-Commerce+in+China.pptx
The+Prospects+of+E-Commerce+in+China.pptxThe+Prospects+of+E-Commerce+in+China.pptx
The+Prospects+of+E-Commerce+in+China.pptx
 
一比一原版UTS毕业证悉尼科技大学毕业证成绩单如何办理
一比一原版UTS毕业证悉尼科技大学毕业证成绩单如何办理一比一原版UTS毕业证悉尼科技大学毕业证成绩单如何办理
一比一原版UTS毕业证悉尼科技大学毕业证成绩单如何办理
 
History+of+E-commerce+Development+in+China-www.cfye-commerce.shop
History+of+E-commerce+Development+in+China-www.cfye-commerce.shopHistory+of+E-commerce+Development+in+China-www.cfye-commerce.shop
History+of+E-commerce+Development+in+China-www.cfye-commerce.shop
 
How to Use Contact Form 7 Like a Pro.pptx
How to Use Contact Form 7 Like a Pro.pptxHow to Use Contact Form 7 Like a Pro.pptx
How to Use Contact Form 7 Like a Pro.pptx
 
Multi-cluster Kubernetes Networking- Patterns, Projects and Guidelines
Multi-cluster Kubernetes Networking- Patterns, Projects and GuidelinesMulti-cluster Kubernetes Networking- Patterns, Projects and Guidelines
Multi-cluster Kubernetes Networking- Patterns, Projects and Guidelines
 
The Use of AI in Indonesia Election 2024: A Case Study
The Use of AI in Indonesia Election 2024: A Case StudyThe Use of AI in Indonesia Election 2024: A Case Study
The Use of AI in Indonesia Election 2024: A Case Study
 
Article writing on excessive use of internet.pptx
Article writing on excessive use of internet.pptxArticle writing on excessive use of internet.pptx
Article writing on excessive use of internet.pptx
 
1.Wireless Communication System_Wireless communication is a broad term that i...
1.Wireless Communication System_Wireless communication is a broad term that i...1.Wireless Communication System_Wireless communication is a broad term that i...
1.Wireless Communication System_Wireless communication is a broad term that i...
 
The AI Powered Organization-Intro to AI-LAN.pdf
The AI Powered Organization-Intro to AI-LAN.pdfThe AI Powered Organization-Intro to AI-LAN.pdf
The AI Powered Organization-Intro to AI-LAN.pdf
 
The Best AI Powered Software - Intellivid AI Studio
The Best AI Powered Software - Intellivid AI StudioThe Best AI Powered Software - Intellivid AI Studio
The Best AI Powered Software - Intellivid AI Studio
 
ER(Entity Relationship) Diagram for online shopping - TAE
ER(Entity Relationship) Diagram for online shopping - TAEER(Entity Relationship) Diagram for online shopping - TAE
ER(Entity Relationship) Diagram for online shopping - TAE
 

pptindustrial (1).pptx

  • 1. INDUSTRIAL TRAINING REPORT ON “WEB DEVELOPMENT” (JULY 10,2022 - AUGUST 10,2022) Submitted By: Pankhuri Tripathi 190106028 Final Btech. ET
  • 2. About Youth & Sports Development Federation of India  It is an NGO whose objective is to promote sports all over the country.  It’s aim is to promote all types of sports activities among the Youth in his/her interested areas by organizing tournaments in different parts of India.  It provides such opportunities to each and every interested youth of our country who is neglected by different sports organizations.  It also provides a platform to help the interested youth to develop their skills in the sport of their choice.
  • 4. Purpose of Project  Purpose of this project is that to learn how to manage database, i.e., proper validation of every details, proper authentication and authorization of users which registers themselves on the web application.  To develop a website centered around sports, useful for promoting and providing relevant Information to users.
  • 5. Weekly overview of Internship Activities  1st Week: Introduction to React js,features of React js introduction to components,routing in react js  2nd Week: Worked on front-end design to Develop Home Page UI, Sign Page UI.  3rd Week: Server-side development to implement two-step verification on signup.  4th Week: Implemented routing between pages and linked them in navbar.
  • 6. TECH STACKS USED  ReactJS ( A JavaScript library used for developing the frontend of a website)  Styled-Components (for styling the webpages).  API (for fetching the news related to different fields and information related to various sports based on countries they are played in).  VS Code (IDE used for developing the website)
  • 7. React Js and Its Features ❖ React is a declarative, efficient, and flexible JavaScript library for building user interfaces ❖ Features: 1-It uses one way data binding 2-Virtual DOM Property 3-High Performance ❖ React lets you compose complex UIs from small and isolated pieces of code called “components”. ❖ React js has different components like class components which are class based and functional components.
  • 8. Components AND React-Router-DOM Components are small pieces of code that are pieced together to create complex UI’s. When creating a React class component the component has to include the extends React.Component statement, this statement creates an inheritance to React.Component, and gives your component access to React. React Router DOM is an npm package that enables you to implement dynamic routing in a web app. It allows you to display pages and allow users to navigate them. It is a fully-featured client and server-side routing library for React.
  • 9. Front-end design:- 1) HOME PAGE UI ❖ First we created background of home page. ❖ We then used some animations using css. ❖ Then We added card of some functionalities like discuss, blog, podcast, voting, etc, that our website provides with details using card components and some basic css. ❖ We then created Navigation bar of home page in a separate component and did some styling on it. ❖ We provided contact details and social media handles like facebook,instagram to the header and the footer section. ❖ Then we added HomePage component to our App.js.
  • 12. 2)SignUp Page UI ❖ SignUp Page is created for users to sign up and can keep track of their records. ❖ For Signing Up User has to enter the name and email address then has to enter the strong password. ❖ After filling the details ,user has to click “Join Now” for successfully sign up. ❖ In this,we used form elements like “label”, “input”. ”button”. ❖ Events like “onClick” was associated with “join now” button,so that on clicking it users details can be updated. ❖ Styling of this page was done using separate css file.
  • 15. Server side design:- Implement Two-factor authentication using node.js  We need some kind of a mechanism that allows us to verify a user’s identity.  The way to do it is to create a verification code that will be sent for each new user that registers to our website.  JWT(JSON Web Token) is a token format. It is digitally-signed, self-contained, and compact.  It provides a convenient mechanism for transferring data.
  • 16. Authentication Process  User registers with username, password and email  The server creates a user object in the DB  A JWT token and a verification code is generated and saved in the DB  A Verification URL is send to the email the user registered with containing the JWT token and the verification code. User clicks the verification link in his mail box  Request in sent to the server, JWT is checked in the middleware  If JWT is valid the request gets passed to the verification api endpoint, code is checked, if the verification process is successful the user’s identity is now verified  User logs in and can make requests to our website
  • 17. Library used  Express JS — For serving requests  jsonwebtoken — For writing and verifying JWT tokens  bcryptjs — For password encryption  cryptoRandomString — Generate random verification codes  dotenv — Using .env files as config for our server  nodemailer and nodemailer-express-handlebars — sending emails
  • 18. Code : const express = require('express') const router =express.Router() const mongoose= require('mongoose') const User=mongoose.model("User") const bcrypt= require('bcryptjs') const jwt= require('jsonwebtoken') const {JWT_SECRET}= require('../config/keys') const nodemailer = require('nodemailer') const sendgridTransport =require("nodemailer-sendgridtransport") const {SENDGRID_API, EMAIL} =require('../config/keys’) //to set up an SMTP connection,created a transporter object const transporter = nodemailer.createTransport(sendgridTransport({ auth:{ api_key:SENDGRID_API, }}))
  • 19. 1) Modify the Signup Procedures exports.signup = (req, res) => { const token=jwt.sign({email: req.body.email}, config.secret) const user = new User({ username: req.body.username, email: req.body.email, password: bcrypt.hashSync(req.body.password, 8), confirmationCode: token, verified: false });
  • 20. user.save((err) => { if (err) { res.status(500).send({ message: err }); return; } res.send({ message: "User was registered successfully! Please check your email", }); nodemailer.sendConfirmationEmail( user.username, user.email, user.confirmationCode ); })
  • 21. 2) Send Confirmation Mail module.exports.sendConfirmationEmail = (name, email, confirmationCode) => { console.log("Check"); transport.sendMail({ from: user, to: email, subject: "Please confirm your account", html: `<h1>Email Confirmation</h1> <h2>Hello ${name}</h2> <p>Thank you for subscribing. Please confirm your email by clicking on the following link</p> <a href=http://localhost:8081/confirm/${confirmationCode}> Click here</a> </div>`, }).catch(err => console.log(err)); };
  • 22. 3)Create the Confirmation route exports.verifyUser = (req, res, next) => { User.findOne({ confirmationCode: req.params.confirmationCode, }) .then((user) => { if (!user) { return res.status(404).send({ message: "User Not found." }); } user.status = "Active"; user.save((err) => { if (err) { res.status(500).send({ message: err }); return; } }); }) .catch((e) => console.log("error", e)); };
  • 23. Routing Implementation Using “React-Router-Dom” ❖ Since the website composed of different pages/components,so there was the need to dynamically fetched these based on URLS rather than to refresh them again and again. ❖ So to make this routing possible,”react-router-dom” has been used. ❖ Here we used react-router-components like ➢ Router -Parent component that includes other components.Everything within this will be part of routing. ➢ Switch-Renders first route that matches the location. ➢ Route-checks the current URL and displays the component associated with that exact path..
  • 24. ➢ Link-Used to created links to different routes. ❖ ‘Link’ Component was imported from ‘react-router-dom’ in NavBar component. ❖ Then ‘ Link’ used in NavBar to create link between these different routes.
  • 26. Conclusion ❖ After creating the different components required for website and the routing between them,our website was successfully created. ❖ Over the period of 30 days ,we deeply understood the importance of react components and how react-router-dom works or how dynamic routing is done.  I also learnt how to use React to develop mobile friendly and responsive websites.