tag team presentation

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.

3. Project Work

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.

10. HomePage

11. Footer

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.

13. Output-Register Page

14. Login Page

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.

25. Routing Code

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.

27. THANK YOU…