SIX WEEKS INDUSTRIAL TRAINING
PROJECT REPORT
ON
“LEAVE-TRACKER”
Submitted in the partial fulfilment of the requirement for
the Award of Degree of
Bachelor of Computer Applications
Session: 2023-2026
SUBMITTED TO: SUBMITTED BY:
Dr. Neeti Daryal Yashika Sharma
(Head of Department) 1230995058
MUKAND LAL NATIONAL COLLEGE , YAMUNANAGAR
KURUKSHETRA UNIVERSITY , KURUKSHETRA
1
DECLARATION BY STUDENT
I hereby declare that the Industrial Training Report entitled “LEAVE-
TRACKER” is an authentic record of my own work carried out at Solitaire
Infosys Pvt. Ltd. as requirement of 6-weeks Industrial Training during the
period from July 2025 to August 2025 for the award of degree of BCA,
Mukand Lal National College, Yamunanagar under the guidance of Mr.
Avnitash.
YASHIKA SHARMA
(1230995058)
Date: ____________________
Certified that the above statement made by the student is correct to the best
of our knowledge and belief.
Industrial Supervisor
(Signature and Seal)
2
ACKNOWLEDGEMENT
Through this acknowledgement, I express our sincere gratitude to all those
people who have been associated with this project and have helped me with
it and made it a worthwhile experience. First and foremost, I would like to
thank Solitaire Infosys for giving me courage to make this project. At the
outset, I would like to propose a word of thanks for the people who gave
me unending support and help in numerous ways.
Firstly, I express our thanks to Dr. Neeti Daryal (H.O.D BCA DEPT.) who
gave me this opportunity to learn the subject in a practical approach who
guided me and gave me valuable suggestions regarding the project report.
Secondly, I would like to thanks Mr. Avnitash (Team Leader) and
FACULTY MEMBERS of Solitaire Infosys who gave me their immense
support in completing the project. The atmosphere provided was full of
gaining more and more knowledge and to keep enthusiastic nature. The
teachers provided a lot of help in resolving our doubts and making this
project successful in shorter time.
Lastly, I would also like to thank my parents and friends who helped us a
lot in finishing the project in limited time.
I make this project not only for marks but also to increase our knowledge.
Thanks again to all who helped me in completion of this project.
YASHIKA SHARMA
5th Sem
BCA
3
ABOUT COMPANY
Solitaire Infosys Pvt. Ltd. is an acclaimed IT service provider contributing
its part in the development of many businesses around the globe. We
socialise with our clients to get a superior cognizance of their business and
requirements and help them in fabricating websites and applications for
their business. Founded in 2011 by a dynamic duo with the same aim and
zeal, we have come a long way in satisfying our clients.
We are serving our clients with the world-class services for more than
seven years now. The clients are delivered with the best IT solutions after
we have developed a great understanding of their business and
requirements. Our team works on the client projects like its own and that is
the reason why we hold the edge in the league.
With every project that we deliver, we deliver our respect, creativity,
quality, transparency, and teamwork to our clients. We have the experience,
expertise, and capabilities to enable organisations to accelerate their service
processes in every possible way. We are known for our excellent customer
satisfaction, cost-effectiveness, and innovative skills that are unparalleled.
Services :
• Mobile Applications
• Web Development
• Digital Marketing
• UX & UI Design
• Enterprise Applications
4
TABLE OF CONTENT
S.No. TOPIC PAGE NO.
1. Introduction 7-9
1.1 Objective
1.2 Scope of project
1.3 Existing System
1.4 Proposed System
2. Feasibility Study 10 - 11
2.1 Operation Feasibility
2.2 Technical Feasibility
2.3 Economical Feasibility
3. Tools & Technology Used 12 - 20
3.1 Hardware Requirements
3.2 Software Requirements
3.3 Technology used:
• HTML
• CSS
• JAVASCRIPT
• BOOTSTRAP
• REACT
4. Data Flow Diagram 21
5. Screenshots of Project 22- 28
5
6. Conclusion and Future Scope 29
6.1 Conclusions
6.2 Further Future Scope
7. References 30
6
CHAPTER - 1
INTRODUCTION
In today’s fast-paced organizational environment, efficient management
of employee leave records has become a necessity rather than a luxury.
Traditionally, leave management processes have been handled manually
using paper forms, registers, or spreadsheets. While these methods may
suffice in small organizations, they are prone to errors, delays, and
miscommunication, especially in medium-to-large scale enterprises.
Manual processes often lead to lost applications, inaccurate leave
balances, and a lack of transparency between employees and the
administration.
The Leave Tracker Website has been developed to address these
challenges by introducing a centralized, automated, and user-friendly
platform that streamlines the process of applying for, approving, and
tracking employee leaves. This system ensures that both employees and
administrators have real-time access to leave records, reducing
paperwork, improving transparency, and eliminating the inefficiencies of
the manual system.
The project is built using React.js as the frontend framework, Bootstrap
for responsive and modern styling, and Vite for fast development and
optimized builds. It is hosted on GitHub Pages, making it easily
accessible to users without requiring complicated hosting setups.
The system operates on a simple principle:
• Employees log in to their accounts, submit leave applications, and view their leave
history.
• Administrators review leave requests, approve or reject them, and maintain overall
leave records.
• With a clean interface and mobile-friendly design, the Leave Tracker website
ensures usability for all categories of users. It not only improves workflow
efficiency but also offers scalability for integration with advanced features like
email notifications, role-based permissions, and analytics in the future.
7
This project represents a step towards digital transformation in
administrative processes, offering benefits such as reduced workload,
better organization, enhanced communication, and improved employee
satisfaction. By leveraging modern web technologies, the Leave Tracker
website provides a reliable, efficient, and scalable solution that can be
adapted by organizations of all sizes.
1.1 Objectives:
• Replace manual leave application processes with an online system that handles
leave requests, approvals, and record-keeping digitally.
• Ensure that both employees and administrators can view leave balances,
application statuses, and history in real time.
• Reduce time spent on processing leave requests by streamlining workflows for
both applicants and approvers.
• Provide a responsive web platform accessible from both desktops and mobile
devices, allowing users to apply for or approve leave anytime, anywhere.
• Keep a secure, organized, and easily retrievable database of leave applications and
approvals to avoid discrepancies.
1.2 Scope:
The Leave Tracker website provides a centralized, digital platform for
employees to submit leave requests and for administrators to review,
approve, and manage these requests efficiently. It is designed to work on
both desktop and mobile devices, ensuring accessibility anytime and
anywhere. The system focuses on core features such as user
authentication, leave application submission, real-time status tracking,
and secure data storage. While the current version caters to small and
medium-sized organizations, it has the potential to be scaled with
additional features like automated email notifications, reporting tools,
and integration with payroll systems.
1.3 Existing system:
In many organizations, leave management is still handled manually through
paper forms or informal communication, which often leads to delays,
errors, and lack of proper record-keeping. This traditional approach makes
tracking leave balances and approvals time-consuming and inefficient.
8
1.4 Proposed system:
The proposed Leave Tracker website automates the entire leave
management process by providing an online platform for applying,
approving, and tracking leaves. It ensures accurate record-keeping, instant
updates, and easy access to leave information for both employees and
administrators.
9
CHAPTER - 2
FEASIBILITY STUDY
Generally, feasibility studies precede technical development and project
implementation. Traditionally uncover the strengths and weaknesses of the
existing system or proposed venture. In its simplest term, the two criteria to
judge feasibility are cost required and value to be attained. As such, a well-
designed feasibility study should provide historical background of the
project assessment of feasibility study is based on the following factors:
• Technical Feasibility
• Economic Feasibility
• Operational Feasibility
2.1 Technical Feasibility:
The Leave Tracker website uses modern web technologies such as React.js, Bootstrap, and
Vite, which are widely supported and reliable. Hosting is done on GitHub Pages, ensuring
a low-maintenance deployment. The technical requirements are minimal—any standard
laptop or PC with internet access can be used for development and usage. Hence, the
project is technically feasible.
2.2 Economic Feasibility:
The project development incurs minimal cost since all tools and platforms used (React,
Bootstrap, GitHub Pages, Visual Studio Code) are open-source and free. No additional
hardware investment is required, making it highly cost-effective. The automated system
will save time and reduce paperwork costs in the long run, ensuring high returns with
almost zero financial burden.
3.3 Operational Feasibility:
The Leave Tracker website is easy to use and requires minimal training for administrators
and employees. Its intuitive interface ensures that users can apply for leaves, track
approvals, and view balances without difficulty. Since it aligns with existing leave policies
and workflows, the transition from manual to online leave tracking is smooth.
10
• Conclusion:
The feasibility study concludes that the Leave Tracker website is technically practical,
economically affordable, and operationally efficient. The system can be implemented
successfully with minimal resources, offering significant improvements over manual leave
management methods.
11
CHAPTER - 3
TOOLS & TECHNOLOGIES USED:
3.1 Hardware Requirements
• Processor :- Intel Core i3 or higher
• RAM :- 4 GB
• Hard Disk :- Minimum 250 GB
• Display :- 1366 * 768 resolution or higher
• Internet Connection :- Required for GitHub Pages
deployment and package installation
3.2 Software Requirements
• Operating system :- Window 10
• Language /front end :-HTML, CSS, JAVASCRIPT,
BOOTSTRAP, REACT
• Code Editor :- Visual Studio Code(VS Code)
• Version Control :- Git and GitHub
• Build Tool :- Vite
• Hosting Platform :- GitHub pages
• Package Manager :- npm(Node Package Manager)
• Browser :- Google Chrome
3.3 Technologies Used:
The development of the Leave Tracker Website required a combination of
modern web technologies, frameworks, and tools to ensure efficient
functionality, user-friendly design, and smooth performance. The selection
of these technologies was based on their reliability, scalability, ease of
integration, and suitability for a responsive web application.
12
By using a mix of front-end, back-end, and deployment tools, the project
achieved a clean design, fast load times, and compatibility across devices.
The core technologies include React.js for building the user interface,
Bootstrap for styling and responsiveness, Vite for fast development and
optimized builds, GitHub Pages for hosting, and Node.js with npm for
package and environment management.
These technologies work together to create a seamless workflow from
development to deployment, ensuring the Leave Tracker Website is both
visually appealing and highly functional.
i. FRONTEND:
The frontend of the Leave Tracking System is responsible for
the visual interface and user interaction. It determines how users
navigate, apply for leaves, and view their leave status. A
combination of modern web technologies has been used to
create an intuitive, responsive, and visually appealing user
experience.
1. HTML:
HTML, which stands for Hyper Text Mark up Language . It
provides a means to create structured documents by denoting
structural semantics for text such as headings, paragraphs, lists
etc as well as for links, quotes, and other items.
• HTML stands for Hyper Text Markup Language
• It is the standard markup language for creating Web pages
• It describes the structure of a Web page
13
• HTML elements tell the browser how to display the
content
• HTML elements label pieces of content such as "this is a
heading", "this is a paragraph", "this is a link", etc.
2.CSS:
• CSS stands for Cascading Style Sheets
• CSS describes how HTML elements are to be displayed
on screen, paper, or in other media.
• CSS saves a lot of work. It can control the layout of
multiple web pages all at once.
• External stylesheets are stored in CSS files.
There are three ways of inserting a style sheet:
• Inline CSS
• Internal CSS
• External CSS
1) Inline CSS:
Inline CSS contains the CSS property in the body section
attached with element is known as inline CSS.
• Inline by using the style attribute inside HTML elements
14
2) Internal CSS:
This can be used when a single HTML document must be styled
uniquely. The CSS rule set should be within the HTML file in
the head section i.e. the CSS is embedded within the HTML file.
• Internal by using a <style> element in the <head> section.
3) External CSS:
External CSS contains separate CSS file which contains only
style property with the help of tag attributes (For example class,
id, heading, etc.).
• External by using a <link> element to link to an external
CSS file.
3. JAVASCRIPT:
• JavaScript is the most popular programming language in
the world and that makes it a programmer’s great choice.
Once you learnt JavaScript, it helps you developing great
front-end as well as back-end software using different
JavaScript based frameworks like jQuery, Node.JS etc.
• JavaScript is everywhere, it comes installed on every
modern web browser and so to learn JavaScript you really
15
do not need any special environment setup. For example
Chrome, Mozilla Firefox, Safari and every browser you
know as of today, supports JavaScript.
What can we build using JavaScript?
JavaScript is a widely-used programming language. Given
below are some domains/products that can be built using
JavaScript:
• Websites: JavaScript helps us to add behaviour of our
website. It helps users to interact with the website. For e.g.
clicking on buttons, saving details, uploading details on
the website, etc.
• Web Servers: We can make robust server applications
using JavaScript. To be precise we use JavaScript
frameworks like Node.js and Express.js to build these
servers.
• Game Development: In Game Development industry,
JavaScript is used widely. With the addition of HTML5
Canvas, it’s now possible to make 2D and 3D games in
JavaScript very efficiently.
Why to learn JavaScript?
JavaScript is the most popular and hence the most loved
language around the globe. Apart from this, there are abundant
reasons to learn it. Below are a listing of few important points:
• No need of compilers:
16
Since JavaScript is an interpreted language, therefore it does not
need any compiler for compilations.
• Used both Client and Server-side:
Earlier JavaScript was used to build client-side applications only,
but with the evolution of its frameworks namely Node.js and
Express.js, it is now widely used for building server-side
applications too.
• Helps to build a complete solution:
As we saw, JavaScript is widely used in both client and server-
side applications, therefore it helps us to build an end-to-end
solution to a given problem.
• Used everywhere:
JavaScript is so loved because it can be used anywhere. It can
be used to develop websites, games or mobile apps, etc.
• Huge community support:
JavaScript has a huge community of users and mentors who
love this language and take it’s legacy forward.
4. BOOTSTRAP:
• Bootstrap is a responsive front-end framework that speeds
up UI development.
• Provides pre-designed UI components like buttons,
navbars, modals, and forms.
• Built on a grid system to support responsive layouts.
• Enhances UI consistency across different devices.
17
5. VITE :
Vite is a fast build tool and development server.
Advantages:
• Instant hot-module replacement during development.
• Faster project startup compared to Webpack.
• Modern JavaScript and JSX support.
6. REACT: Front-End Library:
React is a component-based JavaScript library used for building
dynamic user interfaces.
• JSX: A syntax extension combining HTML and
JavaScript.
• Components: Reusable and independent pieces of UI.
• Virtual DOM: Increases performance by minimizing
direct DOM manipulation.
18
• Enables fast development of interactive dashboards and
single-page applications (SPAs)
Why to use React?
• Virtual DOM –
A virtual DOM object is a representation of a DOM object.
Virtual DOM is actually a copy of the original DOM. Any
modification in the web application causes the entire UI to re-
render the virtual DOM.
Then the difference between the original DOM and this virtual
DOM is compared and the changes are made accordingly to the
original DOM.
• JSX –
Stands for JavaScript XML. It is an HTML/XML JavaScript
Extension which is used in React. Makes it easier and simpler to
write React components.
• Components –
React JS supports Components. Components are the building
blocks of UI wherein each component has a logic and
contributes to the overall UI. These components also promote
code reusability and make the overall web application easier to
19
understand.
• High Performance –
Features like Virtual DOM, JSX and Components makes it much
faster than the rest of the frameworks out there.
• Developing Android/IOS Apps –
With React Native you can easily code Android-based or IOS-
Based apps with just the knowledge of JavaScript and ReactJS.
• You can start your react application by first installing “create-react-
app” using npm or yarn.
ii. BACKEND TECHNOLOGIES
• This project is frontend-only and does not include a dedicated
backend server or database. All logic, state management, and user
interface rendering are handled on the client side using React.js.
There is no server-side processing; therefore, data persistence
between sessions is not implemented. Deployment and build
processes utilize Node.js and npm scripts, but solely for
development and packaging purposes, not for backend operations.
20
CHAPTER - 4
DATA FLOW DIAGRAM
21
CHAPTER - 5
SCREENSHOTS OF PROJECT
HOME:
22
LOGIN :
23
LOGIN PROMPT BOX :
24
APPLY LEAVE :
25
LEAVE SUBMITTED PROMPT BOX :
26
LEAVE DASHBOARD :
27
ADMIN PANEL :
28
CHAPTER -6
CONCLUSION AND FUTURE SCOPE
6.1 Conclusion :
The Leave Tracking System successfully meets its objective of providing a simple,
effective way for employees to apply for leaves and for administrators to manage
requests. It improves efficiency, reduces paperwork, and ensures that leave data is
always available and up to date.
6.2 Future Scope:
• Backend Integration: Connect with a real database (e.g., MySQL)
• Email Notifications: Notify employees of approval/rejection.
• Role-Based Access Control: More detailed permissions for HR, Managers, etc.
• Analytics Dashboard: Show leave trends over months.
• Mobile App Version: Build React Native app for offline leave requests.
29
CHAPTER -7
REFERENCES
1. Bootstrap Documentation – https://getbootstrap.com
2. Vite Official Docs – https://vitejs.dev
3. React.js Documentation – https://react.dev
4.W3Schools JavaScript Tutorial – https://www.w3schools.com/js
30
