INDUSTRIAL TRAINING REPORT

ON

FRONTEND WEB DEVELOPMENT WITH

REACT
Submitted in partial fulfillment of the requirement for degree of

B.TECH
in
COMPUTER SCIENCE & ENGINEERING
at
ARKA JAIN UNIVERSITY, Jharkhand

Submitted By
NAME:-Akash Chaudhary
EN.NO:-AJU/211185

Under the Guidance of

MR. BHANU CHOUHAN

SCHOOL OF ENGINEERING & I.T,

ARKA JAIN UNIVERSITY, JAMSHEDPUR
2024

i
ii
 ACKNOWLEDGEMENT

I would like to express my utmost gratitude to the AJU for providing an opportunity to pursue
the engineering training as partial fulfillment of the requirement for the degree of B.tech in
Computer science Engineering. The internship opportunity I had with Learn and Build was a
great chance for learning and professional development. Therefore, I consider myself as a very
lucky individual as I was provided with an opportunity to be a part of it. I am also grateful for
having a chance to meet so many wonderful people and professionals who led me through this
internship period.

Bearing in mind previous I am using this opportunity to express my deepest gratitude and special
thanks to the Mr. Bhanu Chouhan, Learn and Build (Jaipur) who in spite of being
extraordinarily busy with his duties, took time out to hear, guide and keep me on the correct path
and allowing me to carry out my project at their esteemed organization and extending during the
training.

I express my deepest thanks to Mr. Bhanu Chouhan, Learn and Build, Jaipur for taking part
in useful decision & giving necessary advice and guidance and arranged all facilities to make
life easier. I choose this moment to acknowledge his contribution gratefully.

I express my deepest thanks to all staffs and employees of for taking Learn and build part in
useful decision & giving necessary advice and guidance and arranged all facilities to make life
easier. I choose this moment to acknowledge their contribution gratefully. I perceive as this
opportunity as a big milestone in my career development. I will strive to use gained skills and
knowledge in the best possible way, and I will continue to work on their improvement, in order
to attain desired career objectives. Hope to continue cooperation with all of you in the future.

v
 ABSTRACT

SAMPLE: The aim of this training is to get exposed to the Structural & Foundation Engineering.
Learning about Beams and Column, Footings, Bar Bending Schedule, Concrete Mix Design and
Construction Management.

I joined the company as trainee for one month training. In this report, I have highlighted the
challenges that I encountered and the actions taken or solutions to problems during training in
GDCL, Dwarka (Gujarat).

It was a rewarding opportunity for me to learn the work culture of PWD as; how the organization
work for the entire project, was structured, its hierarchy, how various departments work in
coordination with one another inside the system to achieve a common target and predetermined
goals, how the superior officers interact with the clients and contractors, how the information is
being delivered from the top to the bottom level employees etc.

vi
 TABLE OF CONTENTS

INDUSTRIAL CERTIFICATE--------------------------------------------------------------------ii
DECLARATION BY THE STUDENT ----------------------------------------------------------iii
CERTIFICATE----------------------------------------------------------------------------------------iv
ACKNOWLEDGEMENT---------------------------------------------------------------------------v
ABSTRACT--------------------------------------------------------------------------------------------vi
TABLE OF CONTENTS ----------------------------------------------------------------------------vii

1. Introduction------------------------------------------------------------------------------------------------------ 2
1.1. Objective of DeviceDepot---------------------------------------------------------------------------------2
1.2. About of the Project----------------------------------------------------------------------------------------3
1.3. Scope if the Project------------------------------------------------------------------------------------------4
1.4. Feature of DeviceDepot------------------------------------------------------------------------------------5
2. Technology Used-------------------------------------------------------------------------------------------------- 6
2.1. Front-End Description--------------------------------------------------------------------------------------6
3. Requirement------------------------------------------------------------------------------------------------------- 7
3.1. Input Data Validation---------------------------------------------------------------------------------------7
3.2. Software Requirement Specification--------------------------------------------------------------------8
3.3. Identification of need---------------------------------------------------------------------------------------9
4. System Design------------------------------------------------------------------------------------------------------ 10
5. Workflow------------------------------------------------------------------------------------------------------------ 11
5.1. System Workflow--------------------------------------------------------------------------------------------11
5.2. System Workflow Scenario---------------------------------------------------------------------------------12
6. Appendix------------------------------------------------------------------------------------------------------------- 14
6.1. Font-End------------------------------------------------------------------------------------------------------- 14
7. Future Scope
8. Conclusion
9. References and Bibliography

vii
 1. INTRODUCTION

1.1. OBJECTIVES OF DEVICE DEPOT

The web application is a comprehensive solution designed to provide a seamless and user-friendly
experience for browsing and purchasing electronic items online and managing store operations. It
includes features for both customers (such as exploring product listings and making purchases) and
administrators (such as managing inventory and user accounts). Testing these devices and their
components is an important aspect of ensuring that all electronics are efficient, safe, and reliable for
personal and business usage. Electronic tasks differ based on their specialty and sector…………..

Functionalities provided by Device Depot are as follows:

• Home Page: Displays landing page and menus.

• Menu Page: Shows detailed products in card form that are easy to view, and a detailed description
is also given.
• Cart: Allows users to review their selected items, modify quantities, and proceed to checkout.
• User Authentication: Sign up, log in, and profile management functionalities.
• Profile Page: View orders, and profile information
• Password Management: Change and reset password functionalities using Nodemailer.
• Menu Management: CRUD operations for adding, updating, or removing products.
• User Management: View user list, define and change user roles (e.g., make or remove admin), and
manage user access.
• Banner Management: Add, update, or remove banners in the carousel on the website.
• Orders Management: View the Orders list of the respective User-Id’s.

1
1.2. ABOUT DEVICE DEPOT

The Device Depot project in electronics generally refers to an initiative or system

designed to manage and track electronic devices. This can involve several key
components and goals, depending on the context of the project. Here's an overview of
what such a project might entail:
Key Components of a Device Depot Project:
1. Inventory Management: Keeping track of all electronic devices within an organization
or system. This includes tracking the quantity, type, condition, and location of each
device.
2. Asset Tracking: Using barcodes, RFID tags, or other tracking technologies to monitor
devices as they are moved or used. This helps ensure that devices are not lost or
misplaced.
3. Maintenance Scheduling: Organizing regular maintenance and servicing for electronic
devices. This can involve setting up schedules for software updates, hardware check-
ups, and repairs.
4. User Management: Managing who has access to which devices. This can involve
assigning devices to specific users or departments and keeping records of who is
responsible for each device.
5. Data Security: Ensuring that sensitive information on the devices is protected. This
may involve implementing encryption, regular data backups, and secure access
controls.
6. Lifecycle Management: Overseeing the entire lifecycle of each device, from
acquisition and deployment to decommissioning and disposal. This includes handling
upgrades, repairs, and eventual replacement.
7. Reporting and Analytics: Generating reports and analyzing data related to device
usage, maintenance, and inventory levels. This helps in making informed decisions and
optimizing device management.

2
1.3. SCOPE OF THE PROJECT

The scope of a device depot project in electronics can be broad and may include several
key aspects. Here's an overview of what such a project might encompass:
1. Inventory Management:
• Device Cataloging: Identifying and cataloging all electronic devices, including
specifications, models, and serial numbers.
• Stock Management: Tracking inventory levels, monitoring for shortages or surpluses,
and managing reordering processes.
• Asset Tracking: Implementing systems for tracking the movement and location of
devices within the depot.
2. Repair and Maintenance:
• Diagnostic Services: Offering diagnostic tests to identify faults or issues in electronic
devices.
• Repair Services: Providing repair services for various devices, including hardware and
software issues.
• Maintenance Services: Performing regular maintenance to prolong the life of the
devices, such as cleaning, updates, and preventive checks.
3. Refurbishment and Recycling:
• Refurbishment: Refurbishing used or returned devices to restore them to a functional
state for resale or redistribution.
• Recycling: Implementing processes for safely disposing of or recycling electronic
waste in an environmentally friendly manner.
4. Sales and Distribution:
• Sales Channels: Managing sales channels for new, used, and refurbished devices,
including online and physical stores.
• Distribution Logistics: Coordinating the logistics for shipping devices to customers or
other locations, including packaging, shipping, and tracking.
5. Customer Support and Services:
• Technical Support: Providing technical support for customers, including
troubleshooting and answering queries.
3
 • Warranty and Return Management: Managing warranty claims and returns, including
processing refunds or replacements.

1.4. FEATURE OF DEVICE DEPOT

• Product and component based.

• Creating and changing issues at ease.
• Query issue list to any depth.
• Reporting and charting in more comprehensive way.
• User account to control the access and maintain security.
• Simple status and resolutions.
• Multi-level priorities and severities.
• Targets and milestones for guiding the programmers.
• Attachments and additional comments for more information.
• Robust database back-end.
• Various level of reports available with a lot of filter criteria’s.
• It contains better storage capacity.
• Accuracy in work.
• Easy and fast retrieval of information.
• Well-designed reports.
• Decreases the load of the person involve in existing manual system.
• Access of any information individually.
• Work becomes very speedy.
• Easy to update information.

4
2. TECHNOLOGY USED

2.1. Front-End Description

HTML:
HTML stands for HyperText Markup Language. It is used to design web pages using a
markup language. HTML is a combination of Hypertext and Markup language.
Hypertext defines the link between web pages. A markup language is used to define
the text document within the tag which defines the structure of web pages. This
language is used to annotate text so that a machine can understand it and manipulate
text accordingly. Most markup languagesare humanreadable. The language uses tags to
define what manipulation has to be done on the text.

CSS:
Cascading Style Sheets, fondly referred to as CSS, is a simply designed language
intended to simplify the process of making web pages presentable. CSS allows you to
apply styles to web pages. More importantly, CSS enables you to do this independently
of the HTML that makes up each web page. It describes how a webpage should look: it
prescribes colours, fonts, spacing, and much more. In short, you can make your
website look however you want. CSS lets developers and designers define how it
behaves, including how elements are positioned in the browser.

JAVASCRIPT:
JavaScript isa lightweight, cross-platform, single- threaded, and interpretedcompiled
programming language. It is also known as the scripting language for webpages. It is
well-known for the development of web pages, and many non- browser environments
also use it. JavaScript is a weakly typed language. JavaScript can be used for Client-
side developments as well as Server-side developments. JavaScript is both an
imperative and declarative type of language.

5
 REACT JS:

ReactJS is an open-source JavaScript library used to create user interfaces in a

declarative and efficient way. It is a component-based front-end library responsible
only for the view layer of a Model View Controller architecture. React is used to create
modular user interfaces and promotes the development of reusable UI components that
display dynamic data. ReactJS uses a declarative paradigm that allows for applications
to be both effective and flexible. It creates simple views for each state in your
application and efficiently updates and renders just the right component as your data
changes. The declarative view makes your code more predictable and easier to debug.
Each

3. REQUIRMENT

3.1. INPUT DATA AND VALIDATION OF DEVICE DEPOT

Inventory Data:
• Device Information: Make, model, serial number, specifications, and condition.
• Stock Levels: Current inventory quantities, reorder thresholds, and stock locations.
• Vendor Information: Details of suppliers, including contact information, product
catalogs, and pricing.
2. Customer Data:
• Customer Profiles: Contact details, purchase history, and preferences.
• Service Records: Past repairs, warranties, and feedback.
• Sales Data: Transaction details, including date, items purchased, and payment
methods.
3. Repair and Maintenance Data:
• Diagnostic Results: Data from diagnostic tools, including error codes and
performance metrics.
• Repair Logs: Details of repairs performed, parts used, and technician notes.
• Maintenance Schedules: Regular maintenance tasks, dates, and responsible personnel.
Validation Methods
1. Data Verification:
• Cross-Verification: Cross-checking data with multiple sources, such as vendor
records, customer receipts, and system logs.
• Automated Validations: Using software tools to automate checks for data
consistency, such as verifying serial numbers against known lists.
• Manual Audits: Periodic manual audits of inventory, customer records, and financial
data to ensure accuracy.

6
 2. Quality Control:
• Inspection Protocols: Standard procedures for inspecting devices upon receipt, before
refurbishment, and prior to shipping.
• Testing Procedures: Comprehensive testing of devices for functionality, including
hardware and software components.
• Certification Checks: Ensuring all refurbished devices meet quality and safety
standards, including necessary certifications.
3. Data Cleansing:
• Duplicate Removal: Identifying and removing duplicate records, such as customer
profiles or inventory items.
• Data Correction: Correcting errors, such as misspelled names, incorrect model
numbers, or mismatched financial entries.
• Normalization: Standardizing data formats, such as date formats, measurement units,
and terminology.

3.2. SOFTWARE REQUIREMENT SPECIFICATION

The Software Requirements Specification is produced at the culmination of the analysis

task. The function and performance allocated to software as part of system engineering are
refined by establishing a complete information description, a detailed functional and
behavioural description, an indication of performance requirements and design
constraints, appropriate validation criteria, and other data pertinent to requirements
.

The proposed system has the following requirements:

• System needs stores information about new entry of train.
• System needs to help the internal staff to keep information of ticket and
find them as per various queries.
• System need to maintain quantity record.
• System need to keep update and delete the record.
• System also needs a search area.
It also needs a security system to prevent data

7
3.3. IDENTIFICATION OF NEED

The old manual system was suffering from a series of drawback. Since whole of the
system was to be maintained with hands the process of keeping, maintaining and
retrieving the information was very tedious and lengthy. The records were never used to
be in a systematic order. There used to be a lot of difficulties in associating any particular
transaction with a particular context. If any information was to be found it was required to
go through the different registers, documents there would never exist anything like report
generation. There would always be unnecessary consumption of time while entering
records and retrieving records. One more problem was that it was very difficult to find
errors while entering the records. Once the records were entered it was very difficult to
update these records.

The reason behind it is that there is lot of information to be maintained and have to be
kept in mind while running the business. For this reason we have provided features.
Present system is partially automated, actually existing system is quite laborious as one
has to enter same information at three different places.
Following points should be considered:
• Documents and reports that must be provided by the new system: there can also be few
reports, which can help management in decision-making and cost controlling, but since
these reports do not get required attention, such kind reports and information were also
identified and given required attention.
• Details of information needed for each document and report.
The required frequency and distribution for each document.
Portable sources of information for each document and report.
8
• With the implementation of computerized system, the task of keeping records in an
organised manner will be solved. The greatest of all is the retrieval of information,
which will be at the click of the mouse. So the proposed system helps in saving the
time in different operations and making information flow easy giving valuable reports.

4. SYSTEM DESIGN OF DEVICE DEPOT

In this phase, a logical system is built which fulfils the given requirements. Designphase
of software development deals with transforming the client’s requirements into a logically
working system. Normally, design is performed in the following:-
1. Primary Design Phase:
In this phase, the system is designed at block level. The blocks are created on the basis of
analysis done in the problem identification phase. Different blocks are created for different
functions emphasise is put on minimising the information flow between blocks. Thus, all
activities which require more interaction are kept in one block.

Application

React

Browser

9
Client Machine
 5. WORKFLOW

5.1. Systen Workflow

10
5.2. System Workflow Scenario

This is the Home page of Device Depot

11
 This is a user Page in Device Depot

This is a Manage Products in Device Depot

12
 6. APPENDIX

6.1. Front-End (ReactJS)

Config file (/web/src/config.json)

This is where the configs of web application are stored. The "baseUrl" is where the back-end services
deployed. In this case I have given the URL of WSO2 EI API base URL. If you have the WSO2 server in a
separate location, you have to simply change the URL in the config file and deploy the application.

• Index component (/web/src/index.js)

13
• App component (/web/src/App.js)

14
15
• Style (/web/src/App.css)

16
17
18
• Login (/web/src/component.login.js

19
20
• Create Post (/web/src/component/createpost.js)

21
• Edit Post (/web/src/component/editpost.js)

22
23
• Footer (web/src/component/footer.js)

24
25
• Home (web/src/component/home.js)

26
• MyPost (web/src/component/mypost.js)

27
• Navbar (/web/src/component/navbar.js)

28
• Post (/web/src/component/post.js)

29
• Register (web/src/component/register.js)

30
7. FUTURE SCOPE

In a nutshell, it can be summarised that the future scope of the project circles around
maintaining information regarding:
• We can add printer in future.
• We can give more advance software for Railway Reservation System including more
facilities.
• We will host the platform on online servers to make it accessible worldwide.
• Integrate multiple load balancers to distribute the loads of the system.
• Create the master and slave database structure to reduce the overload to the database
queries.
• Implement the backup mechanism for taking backup of codebase and database on
regular basic on different servers.

The above-mentioned points are enhancements which can be done to increase the
applicability and usage of this project. Here we can maintain the records of train and
ticket. Also, as it can be seen that now-a-days the players are versatile, i.e. so there is a
scope for introducing a method to maintain the Railway Reservation System.
Enhancements can be done to maintain all the train, ticket, booking, customer,
payment. We have left all the options open so that if there is any other future
requirement in the system by the user for the enhancement of the system then it is
possible to implement them.

31
8. CONCLUSION

Creating a Railway Reservation System using the MERN (MongoDB, Express.js,

React, Node.js) stack is a significant achievement in the field of web development.
This project aimed to streamline the process of booking train tickets and managing
reservations efficiently. Below is a conclusion point the key aspects of the project:
1. Functionality: The Railway Reservation System developed using the MERN
stack successfully achieved its primary goal of allowing users to search for trains,
book tickets, and manage reservations. Users can register, log in, and perform
actions like checking train availability, booking tickets, and viewing their booking
history.
2. User Experience: The system focused on providing a user-friendly experience
with an intuitive user interface built using React. The frontend design ensured easy
navigation, clear information presentation, and responsive behaviour across
devices.
3. Data Management: MongoDB was used as the database, which allowed for
efficient storage and retrieval of data related to trains, stations, bookings, and
users. Mongoose, a popular ODM (Object Data Modelling) library for MongoDB,
was employed for data modelling.
4. Backend and API: The Express.js framework on the Node.js runtime provided a
robust backend for handling requests and managing user sessions. It enabled the
creation of RESTful APIs for various functionalities like booking tickets,
cancelling reservations, and retrieving train information.
5. Scalability: The project can be scaled to accommodate additional features and
functionalities in the future, such as seat selection, payment integration, and more
advanced booking options.
6. Challenges: During the development process, there may have been challenges
and hurdles, such as debugging, optimizing performance, and ensuring the
application's stability. These challenges provided valuable learning experiences for
the development team.
7. Future Enhancements: While the current version of the Railway Reservation
System is functional, there is room for improvement and expansion. Future
32
 enhancements could include features like real-time train tracking, integration with
payment gateways, and a mobile application for on-the-go booking.

9. REFERENCES AND BIBLIOGRAPHY

• Google for problem solving

• https://reactjs.org/
• https://expressjs.com/
• https://axios-http.com/
• https://mongoosejs.com/
• https://nodejs.org/en/docs/
• https://www.javatpoint.com/
• https://www.tutorialspoint.com/

33