Frontend Web Development with React

AN INDUSTRIAL TRAINING REPORT

Submitted in partial fulfillment of the

requirements for the award of the degree

of

Bachelor of Technology
(Information Technology)

SUBMITTED TO: SUBMITTED BY:

SH. AMIT GARG Name of Student : Harshita
Saini
Branch & Semester : IT & 7th
BTU Roll No. : 21EEMIT007

DEPARTMENT OF INFORMATION TECHNOLOGY

 MAHILA ENGINEERING COLLEGE AJMER
BIKANER TECHNICAL
UNIVERSITY MAHILA
ENGINEERING COLLEGE
AJMER

CANDIDATE’S DECLARATION
I hereby certify that the work which is being presented in this report entitled
<Frontend Web Development with React> in the partial fulfillment of the requirements for
the award of the degree of BACHELOR OF TECHNOLOGY and submitted in the
DEPARTMENT OF COMPUTER ENGINEERING, MAHILA ENGINEERING
COLLEGE AJMER is an authentic record of my own work carried out during the time
period from 10/06/2023 to 25/07/2024.
The matter presented in this report has not been submitted by me for the award of
any other degree of this or any other institute.

Harshita Saini
(21EEMIT007)
 ACKNOWLEDGEMENTS

I take this opportunity to express my gratitude to all those people who have been
directly and indirectly supported me for successful completion of Industrial Training. I
pay thanks to those who have given guidance and a light to me during this training. Their
versatile knowledge has eased me in the critical times during the span of this major
training. I acknowledge here out debt to those who contributed significantly to one or
more steps. I take full responsibility for any remaining sins of omission and commission..

Yours Sincerely,

Harshita Saini
Roll No. : 21EEMIT007
 Abstract
This report presents the development and implementation of college parking website by using
html , CSS , javascript and react.

The college parking website is designed to manage the parking area of the college. It take
some basic information from the user like role in institute, the type of vehicle that the person is
using, then user have to select price want to submit to institute then at last a pass is generate
accordingly which is valid for some time .

And the validity of the pass is depend on the selected price by the user.In this way this website is
a basic template for the management of parking area of the college.
 WOMEN ENGINEERING COLLEGE,AJMER

An Autonomous Institute of Govt. of Rajasthan

Nasirabad Road, Makhupura, Ajmer-305002

CERTIFICATE
This is to certify that Bhumi Dubey of VII semester B.Tech(Information
Technology) Session 2024-25 has Presented an Industrial Training report titled
Frontend Web Development with React training taken by Learn and build company
in fulfillment for the award of degree of “Bachelor of Technology” in Information
Technology, under Bikaner Technical University, Bikaner
 TABLE OF CONTENTS
CONTENTS PAGE NO.
Chapter 1: Introduction 7
1.1 Objective of the Report
1.2 Scope of Training
Chapter 2: Overview of Technologies used 8
2.1 What is Html,Css
2.2 What is JavaScript
2.3 What is Reactjs
Chapter 3: Project Overview 10
3.1 Project Developed
3.1.1 College parking Website
3.2 Purpose and Goals of the Projects
Chapter 4: Development Workflow 11
4.1 Project Initialization
4.2 HTML Structure
4.3 Styling with CSS
4.4 Dynamic Behavior with JavaScript
4.5 Event Handling
4.6 Testing and Debugging
4.7 Deployment
Chapter 5: Challenges and Learning 13
7.1 Challenges faced During Development
7.2 Key Learnings and Skill Development
Chapter 6: Conclusion 14
8.1 Summary of the training Experience
8.2 Future Prospects and Improvement
Chapter 7: References 15
9.1 Documentation
9.2 Tools and Resources Used
Chapter 8: Appendices 16
10.1 Code Sample 10.2
Screenshots of Applications
 Chapter 1 Introduction
1.1. Objective of the Report.

This report provides a comprehensive overview of my industrial training focused on

Developing Website using Html,Css,Javascript and React . The objective is to document my
learning journey, technical growth, and practical skills gained, emphasizing the creation of
college parking website. The training program aims to equip users and administrators with the
necessary skills and knowledge to effectively utilize the College Parking System. It encompasses
a blend of theoretical concepts and practical hands-on sessions, ensuring participants are fully
prepared to manage parking reservations and administrative tasks.

1.2 Scope of Training

The training program is designed to enable both end-users (students and staff) and
administrators to effectively navigate and utilize the College Parking System. The goal is to
ensure that all participants can leverage the system to enhance their experience related to parking
management on campus.
 Chapter 2

Overview of Technologies used

2.1 What is Html and CSS
HTML is the standard markup language used to create and structure content on the web.

Key Features:

Structure: HTML provides the skeletal structure of a webpage. It uses elements (tags) to define
headings, paragraphs, links, images, and other content.

Semantics: HTML5 introduced semantic elements (e.g., <header>, <footer>, <article>,

<section>) that help describe the meaning of the content to both browsers and search engines.

Hyperlinks: Using <a> tags, HTML allows for easy linking to other pages or external resources,
promoting web navigation.

CSS is a stylesheet language used to control the presentation and layout of HTML elements
on a webpage.

Key Features:

Styling: CSS allows developers to define colors, fonts, spacing, alignments, and other visual
aspects of HTML elements.

Responsive Design: Using media queries, CSS enables designs to adapt across different devices,
crucial for user experience.

Layout Control: CSS provides techniques for layout design, including Flexbox and Grid,
allowing for complex responsive layouts.

2.2 What is Javascript

JavaScript is a versatile programming language that enables interactivity and dynamic
content on webpages.
 Key Features:

Client-Side Scripting: JavaScript operates in the browser, allowing for real-time updates
to the content without reloading the page.

DOM Manipulation: JavaScript can manipulate the Document Object Model (DOM),
allowing developers to create interactive features like forms, animations, and event handling.

Asynchronous Operations: With features such as Promises and async/await, JavaScript

can handle asynchronous tasks like API calls, enhancing user experience.

2.3 What is Reactjs

React.js is a popular JavaScript library for building user interfaces, especially single-page
applications (SPAs).

Key Features:

Component-Based Architecture: React promotes the development of reusable UI components

that can manage their own state, fostering modularity and reusability.

Virtual DOM: React uses a virtual representation of the DOM to optimize updates, improving
performance by minimizing direct DOM manipulations.

Unidirectional Data Flow: Data in React flows in one direction (from parent to child
components), making it easier to understand and debug.
 Chapter 3
Project Overview
3.1 Projects Developed

3.1.1 College Parking Website

The primary objective of this project is to develop a digital platform that efficiently
manages the parking facilities within a college campus. This system aims to provide a user-
friendly interface for students, faculty, and visitors to reserve parking spots, view real-time
availability, and streamline payment processes.

The college parking website is designed to manage the parking area of the college.It take some
basic information from the user like role in institute, the type of vehicle that the person is
using,then user have to select price want to submit to institute then at last a pass is generate
accordingly which is valid for some time .

And the validity of the pass is depend on the selected price by the user.In this way this website is
a basic template for the management of parking area of the college.

3.2 Purpose and Goals of the Projects

The College Parking Management System aims to address the common challenges
associated with managing parking facilities on a college campus. Due to the limited parking
space and the high volume of users, inefficient parking management can lead to frustration, time
wastage, and congestion.

The purpose and goals of this project includes:

Optimizing Parking Space Utilization: Ensure that all available parking spots are
maximally utilized, reducing the issues of overcrowd and wasted space.

Enhancing User Experience: Provide students, faculty, and visitors with a seamless and
convenient parking experience, allowing them to reserve spots in advance and check availability
in real time.
 Streamlining Processes: Minimize administrative overhead and paperwork by
implementing an automated system for parking management and payment, reducing manual
errors and improving efficiency.
 Chapter 4

Development Workflow
4.1 Project Initialization
The workflow begins by setting up a project structure that organizes all front-end files.
This includes HTML documents for structure, CSS for styling, and JavaScript for functionality.
This organization aids in maintaining a clear separation of concerns among the various aspects of
the application.

4.2 HTML Structure

HTML is used to create the structure of the web application. Key components include:

Header: Contains the title and navigation links.

Main Content: Sections for displaying available parking slots and for booking slots.

Footer: Displays copyright information.

Using semantic HTML elements ensures that the document is structured in a meaningful
way, which enhances accessibility and search engine optimization.

4.3 Styling with CSS

CSS is utilized to style the HTML elements, providing a visually appealing interface. This
step involves:

Defining color schemes, fonts, padding, margins, and layout properties to ensure a cohesive look.

Implementing responsive design principles to ensure the application is accessible on various

devices (e.g., desktops, tablets, mobile phones).

4.4 Dynamic Behavior with JavaScript

JavaScript is employed to add interactivity and dynamic behavior to the application. Major
roles include:
Data Handling: Simulating fetching available parking slots from a server and displaying this data
dynamically on the webpage.

Form Management: Handling user input through forms, such as booking a parking slot, and
providing feedback upon submission.

4.5 Event Handling

The application incorporates event listeners that respond to user actions, such as clicks or
form submissions. This helps create a more engaging experience by providing immediate
feedback (e.g., alerts for booking confirmation).

4.6 Testing and Debugging

The front-end application undergoes testing to ensure that all elements function correctly.
This involves checking for any errors in HTML structure, CSS rendering, and JavaScript
functionality. Debugging tools in web browsers can be utilized to identify and resolve issues.

4.7 Deployment
Once development is completed and thoroughly tested, the application is prepared for
deployment. This involves organizing all files and uploading them to a web hosting service,
making the application accessible to users.
 Chapter 5

Challenges and Learning

7.1 Challenges faced During Development

This section discusses key challenges I encountered, such as managing complex state
updates during development, optimizing UI responsiveness, and debugging layout issues. By
tackling these challenges, I gained valuable problem-solving skills and learned to troubleshoot
common Reactjs issues. Overcoming these obstacles deepened my understanding of Reactjs,
preparing me to handle similar challenges in future projects with more confidence and efficiency.

7.2 Key Learning and Skill Development

Gain experience in planning, organizing, and executing a project lifecycle. Familiarity with
project management methodologies (like Agile or Waterfall) enhances your ability to manage
tasks and timelines effectively. Learn principles of UI/UX design to create a user-friendly
application. Skills in wireframing, prototyping, and conducting user testing will be developed.
Gain hands-on experience in front-end (HTML, CSS, JavaScript) and back-end development.
This includes learning about server management and application deployment.

Face various challenges throughout the project that will enhance your analytical and problem-
solving skills. Learning to troubleshoot issues in real-time is an invaluable asset. Work closely
with team members to complete tasks efficiently. Enhancing your ability to communicate
effectively and resolve conflicts will be critical in collaborative settings.
 Chapter 6
Conclusion
8.1 Summary of the Training Experience

This training was an invaluable experience that allowed me to gain hands-on skills in frontend
web development using Reactjs. Working on the college paking website provided me with a
practical understanding of React Js’s core concepts, such as JSX, React state,Context API and
Lifecycle methods. Throughout the process, I encountered and overcame challenges like
debugging complex components, managing asynchronous data, and optimizing performance, all
of which significantly enhanced my problem-solving skills. Overall, the training has equipped
me with the foundational knowledge and confidence to take on more advanced app development
projects in the future.

8.2 Future Prospects and Improvement

This experience has sparked my interest in web development, and I see potential to
expand my skills in this field. My goal is to further deepen my knowledge of React JS by
exploring additional libraries, integrating APIs, and developing more complex features like real-
time updates and push notifications. With the demand for these website continuing to grow, I feel
well-prepared to pursue opportunities in app development, both in personal projects and
professional roles.

Improvements and Future Enhancements: While I am pleased with the progress I made,
there are areas where I see room for improvement. In the future, I plan to focus on optimizing
web performance by exploring advanced React JS techniques and tools. For instance,
implementing efficient data handling strategies and enhancing my understanding of animations
could improve user experience in future projects These improvements will not only enhance the
quality of my future projects but also help me deliver a more polished and professional user
experience.
 Chapter 7

References
9.1 Documentation

I relied heavily on the official React documentation, which provides comprehensive guidance on
various aspects of the framework. The documentation was invaluable for learning about core
concepts, such as components, state, props, navigation, and lifecycle methods. It also included
best practices and detailed explanations on implementing features that helped me troubleshoot
issues effectively.

9.2 Tools and Resources Used

9.2.1 Node.js and npm:

Node.js was essential for running JavaScript code outside the browser, and npm (Node
Package Manager) was used to install and manage project dependencies. This setup allowed me
to install and update libraries required for React Native development.

9.2.2Visual Studio Code (VS Code):

VS Code served as my primary code editor. Its extensions, like ESLint for code quality and
Prettier for formatting, helped improve code readability and maintain consistency throughout the
projects.

9.2.3 Online Tutorials and Courses:

To supplement my knowledge, I used online platforms like YouTube and Udemy, which
offer detailed React Native courses.
By using these resources, I was able to build a strong understanding of React Native, which
supported me in developing two functional applications and gaining valuable skills in cross-
platform mobile app development.
 Chapter 8

Appendices

The Appendices section provides additional details that support the main content of the
report. It includes key code samples and screenshots from both the To-Do List App and
Calculator App, helping to illustrate my development process and showcase the app
functionalities visually. These elements offer a deeper insight into the technical implementation
and visual structure of each app.

10.1 Code Samples

In this part of the appendices, I’ve included selected code snippets that highlight
important aspects of each application. For the college parking website, I showcase the code for
adding, editing, and deleting tasks, as well as the structure for managing the app's state and
handling data persistence .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>parking application</title>
<link rel="stylesheet" href="style.css">
<script src="./scripts/app.js" type="module"></script>
</head>
<body>
<header>College parking system</header>
<main>
<form action="" class="user">
<h1>User Registeration</h1>
<input type="text" placeholder="Name*" id="userName" required>
<input type="text" placeholder="Contact*" id="userContact" required
pattern="[0-9]{10}">
<select name="" id="role">
<option selected disabled>--select---</option>
<option value="student">Student</option>
<option value="faculty">Faculty</option>
 </select>
<input type="submit" placeholder="Register" id="saveUser">

</form>
<form action="" class="vehicle">
<h1>Vehicle Registeration</h1>
<input type="text" placeholder="vehicle Id*" id="vehicleId"
required>
<select name="" id="type">
<option selected disabled>---Vehicle Type---</option>
<option value="cycle">Cycle</option>
<option value="bike">Bike</option>
<option value="car">Car</option>
</select>
<input type="submit" placeholder="Register Vehicle"
id="savevehicle">
</form>
<form action="" class="pass-choice">

</form>
<section class="ticket">

</section>
</main>
<footer>&copy;copyright</footer>

</body>
</html>
Javascriptcode :
import Student from "./user/Student.js";
import Faculty from "./user/Faculty.js";
import Bike from "./vehicle/Bike.js";
import Cycle from "./vehicle/Cycle.js";
import Car from "./vehicle/Car.js";
import Daily from "./pass/Daily.js";
import Yearly from "./pass/Yearly.js";
import Monthly from "./pass/Monthly.js";

document.addEventListener("DOMContentLoaded",()=>{

const name=document.getElementById("userName")
 const contact=document.getElementById("userContact")
const role=document.getElementById("role")
const saveUserBtn=document.getElementById("saveUser")
saveUserBtn.addEventListener("click",(e)=>{
e.preventDefault()
const user = role.value==='student'?new
Student(name.value,contact.value):new Faculty(name.value,contact.value)
console.log(user)
document.querySelector('.user').style.display='none'

const vehicleId=document.getElementById("vehicleId")
const vehicleType=document.getElementById("type")
const vehicleSaveBtn=document.getElementById("savevehicle")

vehicleSaveBtn.addEventListener("click",(e)=>{
e.preventDefault()
let vehicle=null
switch(vehicleType.value){
case 'bike':vehicle=new Bike(vehicleId.value,user)
break;
case 'cycle':vehicle=new Cycle(vehicleId.value,user)
break;
case 'car':vehicle=new Car(vehicleId.value,user)
break;
}
console.log(vehicle)
document.querySelector('.vehicle').style.display='none'

const dailychoice=new Daily(vehicle)

const dailyChoiceBtn=document.createElement('INPUT')
dailyChoiceBtn.setAttribute('type','button')
dailyChoiceBtn.setAttribute('value','Daily'+dailychoice.price)
dailyChoiceBtn.addEventListener('click',()=>{
dailychoice.print()
})
const passChoice=document.querySelector('.pass-choice')
 const monthlychoice=new Monthly(vehicle)
const monthlyChoiceBtn=document.createElement('INPUT')
monthlyChoiceBtn.setAttribute('type','button')
monthlyChoiceBtn.setAttribute('value','Monthly'+monthlychoice.price)
monthlyChoiceBtn.addEventListener('click',()=>{
monthlychoice.print()
})

const yearlychoice=new Yearly(vehicle)

const yearlyChoiceBtn=document.createElement('INPUT')
yearlyChoiceBtn.setAttribute('type','button')
yearlyChoiceBtn.setAttribute('value','Yearly'+yearlychoice.price)
yearlyChoiceBtn.addEventListener('click',()=>{
yearlychoice.print()
})

passChoice.appendChild(dailyChoiceBtn)
passChoice.appendChild(monthlyChoiceBtn)
passChoice.appendChild(yearlyChoiceBtn)
})
})
})

10.2 Screenshots of Applications

This section contains screenshots of the Website, I include images showing the task list
view, the task addition and edit forms, and any styling elements that enhance user interaction,
screenshots demonstrate the main interface, displaying the layout of number buttons, operation
buttons, and the display screen.

By including code samples and screenshots, the Appendices section complements the
report by providing concrete examples of my work, demonstrating both my coding capabilities
and the results of my design choices. This section serves as a reference for anyone reviewing the
technical details and visual output of the applications I developed.