INDUSTRIAL TRAINING REPORT
ON “WEB DEVELOPMENT”
(JULY 10,2022 - AUGUST 10,2022)
Final Btech. ET
About Youth & Sports Development
Federation of India
It is an NGO whose objective is to promote sports all over the
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.
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
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
for building user interfaces
1-It uses one way data binding
2-Virtual DOM Property
❖ 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.
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.
2)SignUp Page UI
❖ SignUp Page is created for users to sign up and can keep track of their
❖ For Signing Up User has to enter the name and email address then has to
enter the strong password.
❖ After ﬁlling the details ,user has to click “Join Now” for successfully
❖ 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 ﬁle.
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
It provides a convenient mechanism for
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
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
Routing Implementation Using
❖ 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
❖ Here we used react-router-components like
➢ Router -Parent component that includes other
components.Everything within this will be part of routing.
➢ Switch-Renders ﬁrst 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
❖ Then ‘ Link’ used in NavBar to create link between these
❖ 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.
Apparemment, vous utilisez un bloqueur de publicités qui est en cours d'exécution. En ajoutant SlideShare à la liste blanche de votre bloqueur de publicités, vous soutenez notre communauté de créateurs de contenu.
Vous détestez les publicités?
Nous avons mis à jour notre politique de confidentialité.
Nous avons mis à jour notre politique de confidentialité pour nous conformer à l'évolution des réglementations mondiales en matière de confidentialité et pour vous informer de la manière dont nous utilisons vos données de façon limitée.
Vous pouvez consulter les détails ci-dessous. En cliquant sur Accepter, vous acceptez la politique de confidentialité mise à jour.