The document summarizes an industrial training presentation on developing a Sports Nation website using ReactJS and NodeJS. The key points are: 1) The trainee developed a website for an NGO called Youth and Sports Development Federation of India to promote sports using ReactJS, NodeJS, and other technologies. 2) The purpose was to learn database management, authentication, and authorization. 3) Over 4 weeks, the trainee learned React components, routing, and front-end design. Server-side development included two-factor authentication using JWT tokens. 4) The final website allowed users to sign up, login, and access sports information and resources through an interactive interface.

1. PRESENTATION OF INDUSTRIAL TRAINING
“Design of Sports Nation website using ReactJS and nodejs”
Youth and Sports Development Federation of India
(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. 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)

6. 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.

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 user friendly
and responsive websites.

27. REFERENCES
● Bureau of Labor Statistics, U.S. Department of Labor. "Information
Security Analysts, Web Developers, and Computer Network
Architects". Occupational Outlook Handbook, 2012-13 Edition.
Retrieved 2013-01-17.
● World Wide Web Design with HTML; By: C. Xavier
● https://www.overleaf.com/project
● https://en.wikipedia.org/wiki/Web_development
● https://www.w3schools.com
● https://www.geeksforgeeks.org

28. THANK YOU…