GOVERNMENT POLYTECHNIC, NASHIK
(An Autonomous Institute of Govt. Of Maharashtra)
PROJECT REPORT ON
“PROFESSIONAL DOCUMENT BUILDER”
FOR THE COURSE
THIRD YEAR DIPLOMA IN COMPUTER TECHNOLOGY
SUBMITTED BY
MR. SHREYAS GIRISH DABHADE
MR. PRASAD SOMNATH GAHIWAL
MR. PREM RAVINDRA JADHAV
MISS. TANVI RAJENDRA GIRASE
(216114)
(216121)
(216124)
(216162)
GUIDED BY
Smt. M. P.Wakchaure
SUBMITTED TO
GOVERNMENT POLYTECHNIC, NASHIK
ACADEMIC YEAR 2023-2024
GOVERNMENT POLYTECHNIC NASHIK
(An Autonomous Institute of Govt. Of Maharashtra)
CERTIFICATE
This is to certify that, the Project Report on “PROFESSIONAL
DOCUMENT BUILDER” has been successfully completed by project team “The
Classy Components ” in the fulfillment of requirement of Diploma in “Computer
Technology” from “Government Polytechnic, Nashik (An Autonomous
Institute of Government of Maharashtra)” during the Academic Year 20232024. It is record of their work carried in my guidance. They have satisfactorily
completed this project.
Guided By
H.O.D
Smt. M. P.Wakchaure
Dr. K. B. Ladhane
Principal
Dr. G. V. Garje
ACKNOWLEDGEMENT
We feel great in submitting this Project Report on “Professional Document Builder”. We are
thankful to the Department of Computer Technology, Government Polytechnic, Nashik for
providing us with the best of the facilities for completing our project.
A successful project is a result of good team work, which contains not only the people who put in
their logic and handwork but also the people who guide them.
We are extremely grateful for the necessary information, with support provided by Miss M.
P.Wakchaure, for her timely suggestion and valuable guidance, for spending her precious time
with us and help us by giving the very important details regarding the project. We would also like
to thank for her constant encouragement and guidance to us.
Last but not least we would like to thank all our people who have helped us directly and indirectly
in our project.
Submitted By:
Mr. Shreyas Girish Dabhade
(216114)
Mr. Prasad Somnath Gahiwal
(216121)
Mr. Prem Ravindra Jadhav
(216124)
Miss.Tanvi Rajendra Girase
(216162)
3
Government Polytechnic Nashik
ABSTRACT
Professional Document Builder brings the entire manual, time-consuming process of creating
professional documents online. This project aims to simplify the process of creating professional
documents like resume, CV, business cards, etc. by providing a web interface in which a visitor will
fill some information in a form and they will get different dynamic layouts for their document. They
can download any layout of their choice and hence they are getting a fully ready-made document
with just one click. This project is built in ReactJS, HTML, CSS, and the information of user is
stored in local storage of web browser. That means the data will always be persisted and will not
expire. For creating a professional document, one must know the formats of the document. Each
document has a different format. So, not everyone can create it easily. This problem can be solved
by professional document builder. This will be beneficial for college students, businesses, working
professionals, etc. Our website's link can also be uploaded on our college official website. So, when
students need to create their professional documents, they can be redirected to the website of
professional document builder. The main goal of our project is to simplify the process of creating
documents and to help people to create documents of their choice.
Keywords :
•
•
•
•
•
Dynamic Layouts
Document Builder
Free of Cost
Various Templates
Resume, CV, Cards
4
Government Polytechnic Nashik
INDEX
Chapter
No.
1
CHAPTER NAME
PAGE NO.
INTRODUCTION
1.1 Need for the System
09-12
1.2 Detailed Problem Definition
1.3 System Features
2
LITERATURE SURVEY
2.1 HTML
13-17
2.1.1 Characteristics
2.1.2 Applications
2.2 CSS
2.2.1 Characteristics
2.2.2 Applications
2.3 JAVA SCRIPT
2.3.1 Characteristics
2.3.2 Applications
2.4 REACT JS (JS LIBRARY)
2.4.1 Characteristics
2.4.2 Applications
3
SOFTWARE REQUIREMENT SPECIFICATION
3.1 Hardware Specification
18-19
3.2 Software Requirements
5
Government Polytechnic Nashik
4
DESIGN
4.1 Analysis model
20-29
4.2 UML Diagram
4.3 Swim lane Diagram
4.4 Project Plan
5
IMPLEMENTATION
30-49
4.1 Screenshots
6
TESTING
50-56
6.1 Types of Testing
6.1.1 Unit Testing
6.1.2 Integration Testing
6.1.3 Functional Testing
6.1.4 System Testing
6.1.5 White Box Testing
6.1.6 Black Box Testing
6.1.7 Acceptance Testing
6.2 Test Cases
7
COSTING
57-59
7.1 Effort Estimation
7.2 Cost Estimation
8
FUTURE SCOPE
60-61
9
CONCLUSION
62-63
10
REFERENCES
64
6
Government Polytechnic Nashik
LIST OF DIAGRAMS:
FIG. NO.
NAME OF FIGURE
PAGE
NO.
1
2.1.1 Characteristics of HTML
2.2.1 Characteristics of CSS
2.3.1 Characteristics of JavaScript
2.4 Working of React Js
2.4.1 Characteristics of REACT JS
12
14
15
17
18
2
4.1 Agile Model
4.1.1 SDLC Life Cycle Diagram
4.2 System Architecture Diagram
4.3.1 Data Flow At Level 0
4.3.2 Data Flow At Level 1
4.4.1 Use Case Diagram
4.4.2 Component Diagram
4.5.1 Flowchart
4.6 Deployment Diagram
4.7 Project Plan Diagram
22
25
26
27
27
28
28
29
30
30
3
5.2.1 Landing page
5.2.2 Landing page
5.2.3 Landing page
5.2.4 Landing page
5.2.5 Navbar Page
5.2.6 Resume Form
5.2.7 Resume Forms
5.2.8 Resume Form
5.2.9 Resume Template
5.2.10 Buisness Card Form
5.2.11 Buisness Cards Template
5.2.12 Question Paper Form
5.2.13 Question Paper Form
5.2.14 Question Paper Template
46
46
Government Polytechnic Nashik
47
47
48
48
49
49
50
51
51
52
52
53
7
LIST OF TABLES :
Fig No.
Name
Page No
3.1
Hardware Specification
21
3.2
Software Requirement
21
6.2
Test Cases
58-61
7.1
Effort Estimation
63
7.2
Cost Estimation
64
Government Polytechnic Nashik
8
CHAPTER 1
INTRODUCTION
Government Polytechnic Nashik
9
CHAPTER 1
INTRODUCTION
Professional Document Builder
Professional Document Builder is a web application that is specially designed to establish an
environment, where in this project aims to simplify the process of creating professional documents
like resume, CV, business cards, etc. by providing a web interface in which a visitor will fill some
information in a form and they will get different dynamic layouts for their document. They can
download any layout of their choice and hence they are getting a fully ready-made document with
just one click.
1.1 Need for the system
▪ It saves time by providing templates and automation, reducing the need to create documents from
scratch.
▪ Ensures a uniform and professional look for documents, which is vital for branding and adherence
to standards.
▪ Minimizes errors with predefined templates and formatting rules.
▪ In essence, a Professional Document Builder is needed for its time-saving, consistency, and
efficiency in creating professional documents across various industries.
1.2 Detailed Problem Definition
➢ Not using a professional document builder can lead to various problems, including:
➢ Documents may lack a consistent and polished look, making them appear unprofessional.
➢ Manually formatting documents can be time-consuming, especially for complex documents.
➢ There's a higher risk of typographical errors, layout inconsistencies, and other mistakes.
➢ Lack of Templates if we don't use a Professional document builder. Professional document
builder often offer templates for various document types, saving time and effort.
Government Polytechnic Nashik
10
➢ Overall productivity may decrease due to manual document creation and editing.
1.3 System Features :
A professional document builder typically offers the following features :
➢ User-Friendly Interface: An intuitive and easy-to-use interface for creating documents.
➢ Templates: A library of templates for various document types (e.g., resumes, contracts, reports).
➢ Customization: The ability to customize templates with text, images, and formatting options.
➢ Real Time Editing: Collaborative editing with real-time changes visible to multiple users.
➢ Auto-Save: Automatic saving of changes to prevent data loss.
➢ PDF export format for finished documents.
➢ Automation: Advanced features for automating repetitive document generation tasks.
➢ These features collectively enable users to efficiently create, edit, collaborate on, and manage
professional documents within a web application.
➢ Customised Services: Professional Document Builder enables users to register for their
customised document building services like, question paper making, hall ticket making, report
generation, etc.
➢ Cost: Professional Document Builder provides the exotic and premium services without any cost.
It's free of cost for everyone including students, organizations, educational institutions, etc
➢ Regular Updates: The templates of professional document builder never get outdated. They
are continuously updating with trends and markets.
Government Polytechnic Nashik
11
CHAPTER 2
LITERATURE SURVEY
Government Polytechnic Nashik
12
CHAPTER 2
LITERATURE SURVEY
2.1 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 (make notes for the computer) text so that a machine can
understand it and manipulate text accordingly.
•
Most markup languages (e.g. HTML) are human-readable. The language uses tags to define
what manipulation has to be done on the text.
•
HTML is a markup language used by the browser to manipulate text, images, and other content,
in order to display it in the required form.
2.1.1 Characteristics
2.1.1 Characteristics of HTML
Government Polytechnic Nashik
13
2.1.2 Applications
1. Web Development:
HTML is the backbone of web development, providing the fundamental structure for creating web
pages and applications.
2. Content Publishing:
Websites and online platforms use HTML to publish content, incorporating text, images, and
multimedia elements
3. Web Forms:
HTML forms play a crucial role in online interactions, enabling users to submit data, subscribe
to newsletters, or make online purchases
4. Interactive Layouts
An Html layouts are the blueprint used to arrange web pages in a well-defined manner. It is easy
to navigate,simple to understand and uses HTML tags to customize web design elements.
5. Interactive Web Applications:
HTML, often in conjunction with JavaScript and CSS, is used to create dynamic and interactive
web applications, such as social media platforms, online games, and collaborative tools
2.2 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.
•
While HTML uses tags, CSS uses rulesets. CSS is easy to learn and understand, but it provides
powerful control over the presentation of an HTML document.
•
CSS saves time: You can write CSS once and reuse the same sheet in multiple HTML pages.
•
Easy Maintenance: To make a global change simply change the style, and all elements in all the
webpages will be updated automatically.
•
Search Engines: CSS is considered a clean coding technique, which means search engines won’t
have to struggle to “read” its content.
Government Polytechnic Nashik
14
2.2.1 Characteristics
2.2.1 Characteristics of CSS
2.2.2 Applications
1. User Interface (UI) Design:
- CSS is crucial for styling UI elements in web applications, providing a visually appealing and
intuitive interface for users.
2. Responsive Design:
- CSS enables the creation of responsive designs that adapt to different screen sizes and devices,
providing a consistent and user-friendly experience.
3. Print Styling:
- CSS can be used to create print-friendly stylesheets, ensuring that web pages are well-formatted
when users print content from a website.
4. Animation and Transitions:
- CSS allows for the creation of animations and transitions, enhancing user experience through
subtle or dynamic visual effects.
5. Flexibility in Layout:
- CSS Flexbox and Grid layouts provide developers with powerful tools to create flexible
and responsive page layouts.
Government Polytechnic Nashik
15
2.3 JAVA SCRIPT
•
JavaScript is a lightweight, cross-platform, single-threaded, and interpreted compiled
programming language. It is also known as the scripting language for webpages. It is wellknown for the development of web pages, and many non-browser environments also use it.
•
JavaScript is a weakly typed language (dynamically typed). JavaScript can be used for Clientside developments as well as Server-side developments. JavaScript is both an imperative and
declarative type of language.
•
JavaScript contains a standard library of objects, like Array, Date, and Math, and a core set of
language elements like operators, control structures, and statements.
•
Client-side: It supplies objects to control a browser and its Document Object Model (DOM).
Like if client-side extensions allow an application to place elements on an HTML form and
respond to user events such as mouse clicks, form input, and page navigation. Useful libraries
for the client side are AngularJS, ReactJS, VueJS, and so many others.
•
Server-side: It supplies objects relevant to running JavaScript on a server. For if the serverside extensions allow an application to communicate with a database, and provide continuity
of information from one invocation to another of the application, or perform file manipulations
on a server. The useful framework which is the most famous these days is node.js
2.3.1 Characteristics :
2.3.1 Characteristics of JavaScript
Government Polytechnic Nashik
16
2.3.2 Applications :
1. Web Development:
- JavaScript is a core technology for web development, enabling the creation of dynamic and
interactive web pages.
2. Client-Side Scripting:
- JavaScript is primarily used for client-side scripting, allowing developers to create dynamic
content that responds to user interactions without requiring a server round-trip
3. User Interface (UI) Interactivity:
- JavaScript is extensively used to enhance user interfaces by adding interactive elements, such
as sliders, carousels, and modals.
4. Form Validation:
- JavaScript is employed for client-side form validation, ensuring that user input meets specified
criteria before being submitted to the server.
5. Asynchronous Operations:
- JavaScript supports asynchronous programming, enabling the development of features like
AJAX requests for dynamic content loading without refreshing the entire page.
6. Single Page Applications (SPAs):
- SPAs, where a single HTML page is dynamically updated as the user interacts with the
application, heavily rely on JavaScript for seamless navigation and content loading.
7. Server-Side Development:
- With platforms like Node.js, JavaScript can also be used for server-side development, allowing
developers to use the same language on both the client and server sides.
8. Browser Automation:
- JavaScript is used in browser automation and testing frameworks to simulate user interactions
and test the functionality of web applications.
9. Mobile App Development:
- JavaScript, especially with frameworks like React Native or frameworks based on Apache
Cordova, is employed for cross-platform mobile app development.
Government Polytechnic Nashik
17
2.4 REACT JS (JS LIBRARY)
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(MVC) architecture. React is used to create modular user
interfaces and promotes the development of reusable UI components that display dynamic
data.
Reason to choose ReactJS
ReactJS uses a declarative paradigm that allows for applications to 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.
2.4 Working of React Js
How does ReactJS work?
React creates a virtual DOM in memory to update the browser’s DOM. The virtual DOM
will try to find the most efficient way to update the browser’s DOM.
Unlike browser DOM elements, React elements are simple objects and are cheap to create.
React DOM takes care of updating the DOM to match the React elements. The reason for
this is that JavaScript is very fast and it’s worth keeping a DOM tree in it to speed up its
processing.
Although React was designed to be used in the browser, because of its design allows it to be
used on the server with Node.js as well.
2.4.1 Applications
1. User Interface Development:
- React.js is primarily used for building interactive and dynamic user interfaces for web
applications.
2. Single Page Applications (SPAs):
- React is well-suited for SPAs, where a single HTML page is dynamically updated as
users interact with the application, providing a smooth and responsive user experience.
Government Polytechnic Nashik
18
3. Reusable UI Components:
- React enables the creation of reusable UI components, allowing developers to build modular
and maintainable code.
4. Virtual DOM for Performance:
- React uses a virtual DOM to optimize rendering, making updates more efficient and improving
the performance of complex user interfaces.
5. Dynamic Content Rendering:
- React simplifies the process of rendering dynamic content based on changing data, updating
the view efficiently as the underlying data changes.
6. Form Handling:
- React facilitates the creation and management of forms in web applications, providing a
controlled and easy-to-manage state for user input.
7. Real-time Data Updates:
- React is well-suited for applications that require real-time updates, such as chat applications or
dashboards displaying live data.
2.4.1 Characteristics
2.4.1 Characteristics of REACT JS
Government Polytechnic Nashik
19
CHAPTER 3
SOFTWARE REQUIREMENT SPECIFICATION
Government Polytechnic Nashik
20
CHAPTER 3
SOFTWARE REQUIREMENT SPECIFICATION
The Software Requirement Specification is produced at the culmination of the
analysis task. The function and performance allocated to software as part of system
engineering are redefined by establishing a complete information description as functional
requirement, a representation of system behavior, an indication of performance
requirement and design constraints, appropriate validation criteria.
3.1 Hardware Specification
Content
Description
Processors
Pentium IV, i3, i5, i7
HDD
20 GB Min
40 GB Recommended
RAM
1 GB Min
2 GB Recommended
Keyboard
Standard 102 keys
Mouse
3 buttons
3.2 Software Requirements
Platform
Windows
Language
HTML, CSS,
Javascript,
React Js (library)
Government Polytechnic Nashik
Framework
Bootstrap, React Js Library
Text Editor
Visual Code Studio
21
CHAPTER 4
DESIGN
Government Polytechnic Nashik
22
CHAPTER 4
DESIGN
4.1 Analysis model
The meaning of Agile is swift or versatile."Agile process model" refers to a software development
approach based on iterative development. Agile methods break tasks into smaller iterations, or
parts do not directly involve long term planning. The project scope and requirements are laid down
at the beginning of the development process. Plans regarding the number of iterations, the duration
and the scope of each iteration are clearly defined in advance.
Each iteration is considered as a short time "frame" in the Agile process model, which typically
lasts from one to four weeks. The division of the entire project into smaller parts helps to minimize
the project risk and to reduce the overall project delivery time requirements. Each iteration
involves a team working through a full software development life cycle including planning,
requirements analysis, design, coding, and testing before a working product is demonstrated to the
client.
Fig 4.1 AGILE MODE
Government Polytechnic Nashik
23
The sequential phases in Agile model are
Phase 1: Concept
At the onset of the Agile development life cycle, stakeholders and product owners join forces to
outline the project’s scope and priorities. They scrutinize costs, projected completion time, desired
features, and requirements to determine the project’s feasibility.
Phase 2: Inception
The inception phase is the second of six Agile development life cycle stages. During this phase,
the founder selects the appropriate team members, assigns roles, and provides the necessary tools
to begin development.
Before beginning the development phase, it is essential to establish a plan and define the core set
of methods and templates for future development activities. This planning stage, known as the
inception phase, consists of two parts.
•
UI/UX design, where designers create a mock-up of the user interface and experience,
thoroughly analyzing their competitors’ strengths and weaknesses.
•
Product architecture, where the dedicated team discusses the most suitable tools to meet
business requirements, including frameworks, containers, programming languages, etc.
At the end of this phase, the team and software structure is established, allowing you to move to
the next stage.
Phase 3: Iteration
This phase typically lasts the longest and involves close cooperation between developers and
UI/UX designers to ensure that all business needs and feedback are incorporated into the code.
During this phase, the team works on the product backlog, completed through development
sprints.
The iteration (or development) stage is fundamental to the agile approach, allowing the team to
build a product with minimal features, with additional functionality added later. Once the
development stage is complete, it’s time to conduct quality assurance activities, create technical
documentation, and end the iteration.
Government Polytechnic Nashik
24
Phase 4: Testing
After testing the digital product at the end of every sprint, the final testing phase is conducted to
ensure the software operates flawlessly. The Agile life cycle incorporates various types of testing,
including:
•
Unit Testing: At this stage, the QA team separately evaluates each front-end and back-end
component’s performance and functionality.
•
Integration Testing: This phase merges different product parts to verify their compatibility.
•
Acceptance Testing: Upon completing this phase, quality assurance specialists assess the
digital solution’s adherence to end-user requirements.
•
System Testing: The entire system is evaluated to ensure all components function properly.
The QA team approves the next deployment phase if the tests are successful
•
The designated team conducts all these procedures to assess the code’s quality and the
product’s ability to fulfill business objectives. After successfully passing all testing stages,
it is time to release the product.
Phase 5: Release
In this phase, the primary objective is to deliver a dependable and efficient product that meets
customers’ requirements. It is accomplished by conducting quality assurance testing to ensure the
product is error-free and functions flawlessly upon release. Once all the final testing and
verification are completed, the product is prepared for launch. To help users become acquainted
with the software, development teams frequently offer training on using it efficiently. When the
dedicated team ends all the activities, they pass to the final phase.
Phase 6: Review
Once an Agile software development project reaches this stage, the focus shifts from striving for
a triumphant launch to sustaining long-term triumph. The product has been released successfully,
and customers frequently provide feedback, request new features, or interact with recent updates.
The development and operations teams and stakeholders are now tasked with
providing continuous support for the application to ensure it operates effortlessly.
Government Polytechnic Nashik
25
4.1 SOFTWARE DEVELOPMENT LIFECYCLE DIAGRAM
4.1.1 SDLC Life Cycle Diagram
A software life cycle model (also termed process model) is a pictorial and diagrammatic
representation of the software life cycle. A life cycle model represents all the methods required to
make a software product transit through its life cycle stages. It also captures the structure in which
these methods are to be undertaken.
In other words, a life cycle model maps the various activities performed on a software product
from its inception to retirement. Different life cycle models may plan the necessary development
activities to phases in different ways. Thus, no element which life cycle model is followed, the
essential activities are contained in all life cycle models though the action may be carried out in
distinct orders in different life cycle models. During any life cycle stage, more than one activity
may also be carried out
Government Polytechnic Nashik
26
4.2 SYSTEM ARCHITECTURE DIAGRAM
4.2 System Architecture Diagram
Government Polytechnic Nashik
27
4.3 DATA FLOW DIAGRAM
Level 0
4.3.1 Data Flow At Level 0
Level 1 :
4.3.2 Data Flow At Level 1
Government Polytechnic Nashik
28
4.4 UML Diagrams:
4.4.1 USE CASE DIAGRAM
4.4.1 Use Case Diagram
4.4.2 Component Diagram
4.4.2 Component Diagram
Government Polytechnic Nashik
29
4.5 Flowchart :
4.5.1 Flowchart
Government Polytechnic Nashik
30
4.6 Deployment Diagram
4.6 Deployment Diagram
4.7 Project Plan
4.7 Project Plan Diagram
Government Polytechnic Nashik
31
CHAPTER 5
IMPLEMENTATION
Government Polytechnic Nashik
32
CHAPTER 5
IMPLEMENTATION
5.1 Coding :
5.1.1 Index File : The index.html file in our React project report serves as the main entry point
for our application. It contains a root element where our entire React application is dynamically
rendered. Additionally, it includes links to essential resources such as CSS and JavaScript files
generated.
Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
integrity="sha384I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.min.js"
integrity="sha384Rx+T1VzGupg4BHQYs2gCW9It+akI2MM/mndMCy36UVfodzcJcF0GGLxZIzObiEfa"
crossorigin="anonymous"></script>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css"
rel="stylesheet"
Government Polytechnic Nashik
33
integrity="sha3844bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9"
crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap"
rel="stylesheet">
<link
href="https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap"
rel="stylesheet">
<!-- by prem -->
<script
type="module"
src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script
src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<link
rel="stylesheet">
nomodule
href="https://fonts.googleapis.com/css2?family=Mooli&display=swap"
< <title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!-This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
Government Polytechnic Nashik
34
5.1.2 Resume Form Sample Module : In our React JSX module, we've constructed a form
component that encompasses input fields for gathering user information. Each input field is
defined with corresponding attributes such as type, name, and placeholder to guide user input.
Additionally, we've included buttons within the form to facilitate two critical actions: submitting
the provided information or loading pre-existing data. The form component is designed to
efficiently collect user data and cater to seamless interactions within the application.
Code :
import React, { useRef, useEffect } from 'react'
import { Link } from 'react-router-dom'
const ResumeForm6 = () => {
document.body.style.background = "white"
const ResumeDesc = useRef()
const loadToLocalStorage = () => {
localStorage.setItem("ResumeDescription", ResumeDesc.current.value);
}
useEffect(() => {
if (localStorage.getItem("ResumeDescription")) {
ResumeDesc.current.value = localStorage.getItem("ResumeDescription");
}
}, [])
return (
<>
<div style={{ fontFamily: "Questrial", marginTop: "50px", textAlign: "center" }}>
<h2>Resume Description</h2>
</div>
<div id='container' className="container text-center " style={{ width: "800px",
marginTop: "30px", background: "white" }}>
<div>
<div className="mb-3">
<label htmlFor="DescResume" className="form-label">Describe your resume
here!</label>
<textarea
ref={ResumeDesc}
className="form-control
fs-5"
placeholder='Describe your resume here' id="DescResume" rows="10" required></textarea>
</div> </div>div>
<div style={{ display: "flex", justifyContent: "center", marginTop: "80px", fontFamily:
"kanit" }}>
<Link to="/resumeform5" className="btn btn-outline-danger" style={{ marginRight:
"50px", width: "180px", fontSize: "18px" }}>Back</Link>
<Link onClick={loadToLocalStorage} to="/resume01" className="btn btn-outlinesuccess" style={{ width: "180px", fontSize: "18px" }}>Next</Link>
</div></>
)}
export default ResumeForm6
Government Polytechnic Nashik
35
5.1.2 Resume Template Module : Our resume template offers a comprehensive framework
for showcasing your professional profile. It begins with a personalized section for vital
information, including your name, contact details, and a professional photograph. The template
seamlessly integrates sections for highlighting your skills, detailing your valuable experiences,
and presenting noteworthy project details. What sets this template apart is its dynamic nature - it
effortlessly populates with your information stored in the local storage, providing a convenient
and efficient way to craft a standout resume tailored to your unique strengths and achievements.
Code :
import React, { useRef, useState, useEffect } from 'react'
// now lets import css file
import '../styleResume/Resume01.css'
import { useReactToPrint } from 'react-to-print'
import html2canvas from 'html2canvas';
import { Link } from 'react-router-dom';
const Resume01 = () => {
document.body.style.background = "white";
const [Image, setImage] = useState()
const [fname, setfname] = useState()
const [lname, setlname] = useState()
const [jobTitle, setjobTitle] = useState()
const [phone, setphone] = useState()
const [email, setemail] = useState()
//address info
const [street, setstreet] = useState()
const [city, setcity] = useState()
const [state, setstate] = useState()
const [country, setcountry] = useState()
const [postcode, setpostcode] = useState()
//educational details
const [educationHTML, seteducationHTML] = useState()
//summary
const [ResumeDescription, setResumeDescription] = useState()
//skills
const [ResumeSkills, setResumeSkills] = useState()
//Experience
const [experienceHTML, setexperienceHTML] = useState()
useEffect(() => {
//image photo
setImage(localStorage.getItem("profilePhoto"));
//fetch objs from storage
const personalInfo = JSON.parse(localStorage.getItem("personalDetails"))
Government Polytechnic Nashik
36
//personal info
if (personalInfo !== null) {
setfname(personalInfo.firstname)
setlname(personalInfo.lastname)
setjobTitle(personalInfo.jobtitle)
//contact info
setphone(personalInfo.phone)
setemail(personalInfo.email)
//address info
setstreet(personalInfo.address)
setcity(personalInfo.city)
setstate(personalInfo.state)
setcountry(personalInfo.country)
setpostcode(personalInfo.postcode)
}
//educational info
const education = JSON.parse(localStorage.getItem("Education"));
populateEducation(education)
//summary
setResumeDescription(localStorage.getItem("ResumeDescription"));
//Experience
const experience = JSON.parse(localStorage.getItem("ProfessionalExperience"))
populateExperience(experience);
//skills
const skills = JSON.parse(localStorage.getItem('skills'));
populateSkills(skills)
}, [])
const populateSkills = (skills) => {
if (skills !== null) {
setResumeSkills(
<>
<div className="boxt01" id="Skills">
<h3 className="title1t01">Skills</h3>
{skills.map((sk, index) => (
<ul className='skilllistt01' key={index}>
<li className="listitemt01">{sk.skill}</li>
</ul>
))}
</div>
</>
)}}
const populateExperience = (experience) => {
if (experience !== null) {
setexperienceHTML(
<>
<h3 className="title1t01">Experience</h3>
Government Polytechnic Nashik
37
{experience.map((exp, index) => (
<div key={index}>
<div className="jobtitlet01">
<label>{exp.PositionTitle}</label>
</div>
<div className='companynamet01'>
<span><span>{exp.CompanyName}</span></span>
</div>
<div className="durationt01">
<span className="startdatet01">{exp.StartDate}</span>
<span>-</span>
<span className="lastdate">{exp.EndDate}</span>
</div>
<div className="descriptiont01">{exp.WorkSummary}</div>
</div>
))}
</>
)
}
}
const populateEducation = (education) => {
if (education !== null) {
seteducationHTML(
<>
<h3 className="titlet01" id="educatet01">Education</h3>
<ul className="leftsidelistt01">
{education.map((edu, index) => (
<li key={index}>
<div>
<h4><span>{edu.deg}</span> in <span>{edu.field}</span></h4>
</div>
<div><span>{edu.edustrdate}</span>-<span>{edu.eduendate}</span></div>
<div></div>
<div>{edu.schloc}</div>
</li>
))}
</ul>
</>
)
}
}
//printing and downloading
const table = document.getElementById('resumet01');
const componentRef = useRef();
const handlePrint = useReactToPrint({
content: () => componentRef.current,
Government Polytechnic Nashik
38
});
const downloadImage = () => {
html2canvas(table).then(function (canvas) {
const link = document.createElement('a');
link.download = 'business.png';
link.href = canvas.toDataURL('image/png');
link.click();
});
}
return (
<>
<div className="containert01" style={{ background: "white" }}>
<div className='resumet01' ref={componentRef} id="resumet01">
<div className='leftt01'>
<div className='imgcontainert01'>
<img className='userPhotot01' src={Image} alt="" />
</div>
<div className='fullnameAndPostt01'>
<div className='namet01'>
<span className='fullNamet01'>{fname} {lname}</span>
</div>
<div className='positiont01'>
<span className='post01'>{jobTitle}</span>
</div>
</div>
<div className='boxt01' id="contactinfot01" >
<h3 className="titlet01">Contact</h3>
<ul classname="leftsidelistt01">
<li>
<span className="icont01" id="icon1t01"><i class="fa fa-phone" ariahidden="true"></i></span>
<span className="textt01">{phone}</span>
</li>
<li>
<span className="icont01" id="icon2t01"><i class="fa fa-envelope-o" ariahidden="true"></i></span>
<span className="textt01">{email}</span>
</li>
<li>
<span className="icont01" id="icon4t01"><i class="fa fa-map-marker" ariahidden="true"></i></span>
Government Polytechnic Nashik
39
<div className='addres'>
<span className="textt01"
id="text4t01"><span>{street}</span>,<span>{city}</span> , <span>{state}</span>,
<span>{country}</span> <span>{postcode}</span></span>
</div>
</li>
</ul>
</div>
<div className='boxt01' id="Educationt01">
{educationHTML}
</div>
</div>
<div className='rightt01'>
<div className="boxt01" id="summaryboxt01" >
<h3 className="title1t01">Summary</h3>
<div id="summaryt01" >{ResumeDescription}</div>
</div>
<div className="boxt01" id="experiencet01" >
{experienceHTML}
</div>
{/* //skills */}
{ResumeSkills}
</div>
</div>
</div >
<div className="btn-container d-flex justify-content-center" style={{
display: "flex", alignItems: "center", justifyContent: "center", gap: "20px", background:
"white", height: "20vh"
}}>
<Link to="/resumeform1" className="btn btn-success"
>&nbsp;&nbsp;&nbsp;&nbsp;Edit form . .&nbsp;&nbsp;&nbsp;&nbsp;</Link>
<button id="mybtn" onClick={handlePrint} type="button" className="btn btn-success
mr-2">
Download PDF
</button>
<button onClick={downloadImage} type="button" className="btn btn-success" >
Download Image
</button>
</div>
</>
)
}
export default Resume01
Government Polytechnic Nashik
40
5.1.2 CSS File For Resume Template : The CSS in this resume template makes it look
modern and neat. It uses nice colors and adjusts well on different devices. It also pays attention to
fonts and layout to make everything look clean and professional. Overall, it makes the resume
easy to read and visually appealing.
Code :
.containert01{
padding-top: 5vh;
padding-bottom: 5vh;
font-family: 'Arimo', sans-serif;
}
.resumet01{
height:1121px;
width:794px;
margin:auto;
display:grid;
grid-template-columns:1.3fr 2fr;
background-color:white;
/* border:3px solid black; */
box-shadow:8px 8px 9px grey;
}
.titlet01{
font-size: 25px;
/*title font size */
letter-spacing: 0.5px;
width:300px;
border-bottom:2px solid white;
padding-bottom:3px; /*margin padding at title bottom
to maintain distance with content */
margin-bottom:5px;
}
.leftt01{
color:white;
background-color: #323B4C;
}
.imgcontainert01{
height:220px;
width:220px;
margin:auto;
margin-top:30px;
overflow:hidden;
border-radius:50%;
border:5px solid white;
}
.userPhotot01{
height:100%;
Government Polytechnic Nashik
41
width:100%;
}
.fullnameAndPostt01{
width:270px;
margin:auto;
margin-top:20px;
text-align:center;
letter-spacing:0.5px;
margin-bottom: 20px;
}
.namet01{
word-wrap:break-word;
font-size:30px;
font-weight: 500;
}
.positiont01{
padding-top:5px;
font-size:23px;
}
#contactinfot01{
min-height:190px;
max-height: 220px;
margin-bottom:5px;
padding-bottom: 5px; /*to maintain distance with new section
education*/
}
#Educationt01{
min-height: 60px;
}
#educatet01{
padding-top:20px; /to maintain distance with upper content such as contacts/
}
#Educationt01 h4{
margin-top:10px;
margin-bottom:5px;
}
#Educationt01 ul{
font-size:16px;
letter-spacing: 0.5px;
}
Government Polytechnic Nashik
42
5.2.1 Buisness Card Template Module : Our business card template is made to
be easy to use. It has spaces for a picture, business name, tagline, and special features. The
design is clean and organized, making everything clear. Creating a business card with this
template is straightforward and doesn't require any special skills. It's a convenient tool for
professionals who want a professional-looking card without any hassle.
Code :
import React, { useRef } from 'react';
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';
//no need of qr code
// import QRCode from 'react-qr-code';
import '../style/business04.css'
// import img from '../Images/logo.jpeg'
const Business04 = () => {
localStorage.setItem('cardwhatsapp', '7620349964')
localStorage.setItem('cardfirstname', 'Prem')
localStorage.setItem('cardlastname', 'Jadhav')
localStorage.setItem('cardphone', '9112926020')
localStorage.setItem('cardemail', 'premjadhav@gmail.com')
localStorage.setItem('cardaddress', '0th floor,Boys Hostel,Gov.Poly.,Nashik')
localStorage.setItem('cardjobtitle', 'Software Developer')
localStorage.setItem('cardtagline', 'Unlocking the potential of data')
localStorage.setItem('cardcompname', 'ViswaTech')
localStorage.setItem('cardwebsite', 'www.vishwatech.in')
const pdfRef = useRef();
const downloadImage = () => {
document.getElementById('front03').style.marginBottom = "0px"
document.getElementById('front03').style.marginTop = "0px"
const table = document.getElementById('cardforntBack03');
html2canvas(table).then(function (canvas) {
const link = document.createElement('a');
link.download = 'business.png';
link.href = canvas.toDataURL('image/png');
link.click();
});
document.getElementById('front03').style.marginBottom = "20px"
document.getElementById('front03').style.marginTop = "40px"
}
const downloadPDF = () => {
document.getElementById('front03').style.marginBottom = "0px"
document.getElementById('front03').style.marginTop = "0px"
Government Polytechnic Nashik
43
const mybtn = document.getElementById("mybtn");
mybtn.style.display = 'none';
const input = pdfRef.current;
html2canvas(input).then((canvas) => {
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF('p', 'mm', 'a3', false);
const pdfWidth = pdf.internal.pageSize.getWidth();
const pdfHeight = pdf.internal.pageSize.getHeight();
const imgWidth = canvas.width;
const imgHeight = canvas.height;
const ratio = Math.min(pdfWidth / imgWidth, pdfHeight / imgHeight);
const imgX = (pdfWidth - imgWidth * ratio) / 2;
const imgY = 5;
pdf.addImage(imgData, 'PNG', imgX, imgY, imgWidth * ratio, imgHeight * ratio);
pdf.save('business.pdf')
mybtn.style.display = 'block';
});
document.getElementById('front03').style.marginBottom = "10px"
document.getElementById('front03').style.marginTop = "40px"
}
document.body.style = 'background: white;';
return (
<div className='container04'>
<div id="cardforntBack04" ref={pdfRef}>
<div className="front04" id='front03'>
</div>
<div className="middle04"></div>
<div className="back04">
</div>
</div>
</div>
)
}
export default Business04
Government Polytechnic Nashik
44
5.3.1 Question Paper Form : The question paper form is a user interface element
designed to collect crucial information for creating a question paper. It comprises fields for
entering the question itself, specifying the relevant subject, and setting a time limit. This form
streamlines the process of generating a well-organized and timed assessment, ensuring that all
pertinent details are accurately recorded. By providing a structured layout, it enhances efficiency
in question paper preparation.
import React, { useRef } from 'react';
import Navbar from './Navbar';
import { Link } from 'react-router-dom';
import Footer from './Footer';
export default function FormResume() {
document.body.style = 'background: white;';
const coa = useRef();
const cob = useRef();
const coc = useRef();
const q1a = useRef();
const q1b = useRef();
const q1c = useRef();
const handleChange = () => {
localStorage.setItem("coa", coa.current.value);
localStorage.setItem("cob", cob.current.value);
localStorage.setItem("coc", coc.current.value);
localStorage.setItem("q1a", q1a.current.value);
localStorage.setItem("q1b", q1b.current.value);
localStorage.setItem("q1c", q1c.current.value);
}
return (
<div className="App" style={{}}>
<Navbar theme={"dark"} bgcolor={"#151515"} />
<div style={{ height: "900px", backgroundColor: "white", border: "2px solid white" }}>
<div style={{ fontFamily: "Questrial", marginTop: "50px" }}>
<h2>Question 1 Details</h2>
</div>
<div class="container text-center " style={{ width: "800px", marginTop: "30px" }}>
<br />
<div class="col">
<label for="exampleFormControlInput1" class="form-label"></label>
<input ref={coa} type="text" class="form-control" style={{ width: "250px" }}
id="exampleFormControlInput1" placeholder="CO No." />
</div>
<div class="col">
<label for="exampleFormControlInput1" class="form-label"></label>
<input ref={q1a} type="text" class="form-control" id="exampleFormControlInput1"
placeholder="Question No.1 (a)" />
Government Polytechnic Nashik
45
</div>
<br />
<br />
<div class="col">
<label for="exampleFormControlInput1" class="form-label"></label>
<input ref={cob} type="text" class="form-control" style={{ width: "250px" }}
id="exampleFormControlInput1" placeholder="CO No." />
</div>
<div class="col">
<label for="exampleFormControlInput1" class="form-label"></label>
<input ref={q1b} type="text" class="form-control" id="exampleFormControlInput1"
placeholder="Question No.2 (b)" />
</div>
<br />
<br />
<div class="col">
<label for="exampleFormControlInput1" class="form-label"></label>
<input ref={coc} type="text" class="form-control" style={{ width: "250px" }}
id="exampleFormControlInput1" placeholder="CO No." />
</div>
<div class="col">
<label for="exampleFormControlInput1" class="form-label"></label>
<input ref={q1c} type="text" class="form-control" id="exampleFormControlInput1"
placeholder="Question No.3 (c)" />
</div>
<br />
</div>
<div style={{ display: "flex", justifyContent: "center", marginTop: "80px", fontFamily:
"kanit" }}>
<Link to="/formquestion" class="btn btn-outline-danger" style={{ marginRight: "50px",
width: "180px", fontSize: "18px" }}>Back</Link>
<Link to="/formquestion3" onClick={handleChange} class="btn btn-outline-success"
style={{ width: "180px", fontSize: "18px" }}>Next</Link>
</div>
</div>
<Footer />
</div>
);
}
Government Polytechnic Nashik
46
5.2 Screenshorts :
1) Landing Page
5.2.1 Landing page
2) Landing Page
5.2.2 Landing page
Government Polytechnic Nashik
47
3) Landing Page
5.2.3 Landing page
4) Landing Page
5.2.4 Landing page
Government Polytechnic Nashik
48
5.2.5 Navbar
5.2.5 Navbar Page
5.2.6 Resume Forms :
5.2.6 Resume Forms
Government Polytechnic Nashik
49
5.2.7 Resume Forms :
5.2.7 Resume Forms
5.2.8 Resume Forms
5.2.8 Resume Form
Government Polytechnic Nashik
50
5.2.9 Resume Template :
5.2.9 Resume Template
Government Polytechnic Nashik
51
5.2.10 Buisness Cards Form:
5.2.10 Buisness Card Form
5.2.11 Buisness Cards Template :
5.2.11 Buisness Cards Template
Government Polytechnic Nashik
52
5.2.12 Question Paper Form :
5.2.12 Question Paper Form
5.2.13 Question Paper Forms:
5.2.13 Question Paper Form
Government Polytechnic Nashik
53
5.4.1 Question Paper Template:
5.2.14 Question Paper Template
Government Polytechnic Nashik
54
CHAPTER 6
TESTING
Government Polytechnic Nashik
55
CHAPTER 6
TESTING
System Testing
System testing tests the system as a whole. Once all the components are integrated, the
application as a whole is tested rigorously to see that it meets the specified Quality
Standards. This type of testing is performed by a specialized testing team.
System testing is important because of the following reasons:
•
System testing is the first step in the Software Development Life Cycle, where the
application is tested as a whole.
•
The application is tested thoroughly to verify that it meets the functional and technical
specifications.
6.1 Types of Testing
Unit Testing
This type of testing is performed by developers before the setup is handed over to the testing team
to formally execute the test cases. Unit testing is performed by the respective developers on the
individual units of source code assigned areas. The goal of unit testing is to isolate each part of the
program and show that individual parts are correct in terms of requirements and functionality.
Integration Testing
Integration testing is defined as the testing of combined parts of an application to
determine if they function correctly. Integration testing can be done in two ways:
Bottom up integration testing and Top-down Integration testing.
Functional Testing
Functional tests provide systematic demonstrations that functions tested are available as
specified by the business and technical requirements, system documentation, and user
manuals. Functional testing is centered on the following items:
•
•
•
•
Valid Input: Identified classes of valid input must be accepted.
Invalid Input: Identified classes of invalid input must be rejected.
Functions: Identified functions must be exercised.
Output: Identified classes of application outputs must be exercised.
Government Polytechnic Nashik
56
System Testing
System testing tests the system as a whole. Once all the components are integrated, the
application as a whole is tested rigorously to see that it meets the specified Quality Standards.
This type of testing is performed by a specialized testing team.
White Box Testing
White-box testing is the detailed investigation of internal logic and structure of the code.
White-box testing is also called glass testing or open-box testing. In order to perform whitebox
testing on an application, a tester needs to know the internal workings of the code.
Black Box Testing
The technique of testing without having any knowledge of the interior workings of the
application is called black-box testing. The tester is oblivious to the system architecture and does
not have access to the source code. Typically, while performing a black-box test, a tester will
interact with the system's user interface by providing inputs and examining outputs without
knowing how and where the inputs are worked upon.
Acceptance Testing
This is conducted by the Quality Assurance Team who will gauge whether the application
meets the intended specifications and satisfies the client’s requirement. A QA team conducts
acceptance tests to ensure the software or app matches business requirements and end-user needs.
An acceptance test returns either a pass or fail result. A fail suggests that there is a flaw present,
and the software should not go into production.
Government Polytechnic Nashik
57
6.2 TEST CASES : Test Cases here is singular set of actions for a tester to perform that
validates a specific aspect of application functionality. We have designed some test cases
through which we performed testing of website designed.
Sr
Test
No. Case
Description
Steps
Expected
Actual
Result
Result
Status
1
Verify
Check if the
Home Page home page
Load
loads without
any errors.
1.Open the website. The home
page loads
2.Ensure that the
successfully
home page is
without any
displayed.
errors.
The home
page loads
successfully
without any
errors.
2
Create a
New
Resume
1.Click on the
"Create Resume"
option.
A new
Pass
resume is
created and
saved
successfully.
Test the
ability to
create a new
resume.
A new
resume is
created and
saved
2.Enter valid details
successfully.
in the resume form.
Pass
3) Save the resume.
3
Edit an
Existing
Resume
Test the
ability to edit
an existing
resume.
Steps:
1.Select an existing
resume from the
list.
2.Make changes to
the resume content.
The changes
are saved, and
the resume is
updated.
The changes Pass
are saved,
and the
resume is
updated.
3.Save the changes.
4
5
Delete a
Resume
Create a
New CV
Test the
ability to
delete a
resume.
1.Select an existing
resume from the
list.
The selected
resume is
deleted, and
the user is
notified.
The selected Pass
resume is
deleted, and
the user is
notified.
Test the
ability to
create a new
CV.
1.Click on the
A new CV is
"Create CV" option. created and
saved
2.Enter valid
successfully.
details in the CV
A new CV is Pass
created and
saved
successfully.
2.Click on the
"Delete" option.
form.
3.Save the CV.
Government Polytechnic Nashik
58
6
Edit an
Existing CV
Test the ability 1. Select an
to edit an
existing CV
existing CV.
from the list.
2.Make changes
to the CV
content.
3.Save the
changes.
The changes
are saved, and
the CV is
updated.
The changes
Pass
are saved, and
the CV is
updated.
7
Delete a CV
Test the
ability to
delete a CV.
The selected
CV is deleted,
and the user is
notified.
The selected
Pass
CV is deleted,
and the user is
notified.
8
Create a
New
Business
Card
Test the ability 1.Click on the
to create a new "Create
business card. Business Card"
option.
2.Enter valid
details in the
business card
form.
3.Save the
business card.
A new
business card
is created and
saved
successfully.
A new
business card
is created and
saved
successfully.
9
Edit an
Existing
Business
Card
Test the ability
to edit an
existing
business card.
The changes
are saved, and
the business
card is
updated.
The changes
Pass
are saved, and
the business
card is
updated.
Government Polytechnic Nashik
1.Select an
existing CV
from the list.
2.Click on the
"Delete" option.
1.Select an
existing
business card
from the list.
2.Make changes
to the business
card content.
3.Save the
changes.
Pass
59
10
Delete a
Test the
Business Card ability to
delete a
business card.
1.Select an
existing
business card
from the list.
The selected
business card
is deleted,
and the user
is notified.
The selected
business card
is deleted,
and the user
is notified.
Pass
2.Click on the
"Delete"
option.
11
Check for Data Test the
Validation
website's
validation by
entering
invalid data in
forms.
Attempt to
create a
document with
missing or
invalid data.
Validation
error
messages
should be
displayed,
and data
should not be
saved.
Validation
error
messages
should be
displayed,
and data
should not be
saved.
Pass
12
Test Document Verify that
Download
users can
download
their created
documents.
1.Create a
document (e.g.,
resume, CV,
business card).
The
document is
downloaded
successfully
and is
accessible to
the user.
The
document is
downloaded
successfully
and is
accessible to
the user.
Pass
The website
should
display and
function
consistently
on all tested
browsers.
The website
should
display and
function
consistently
on all tested
browsers.
Pass
2.Download
the created
document.
13
Test CrossBrowser
Compatibility
Verify that the
website
functions
correctly on
different web
browsers.
Government Polytechnic Nashik
Access the
website using
various web
browsers (e.g.,
Chrome,
Firefox, Edge,
Safari).
60
14
15
Test Mobile Verify that the
Responsiveness website is
responsive
and usable on
mobile
devices.
Test Error
Handling
Test how the
website
handles
unexpected
errors.
Government Polytechnic Nashik
Access the
website using a
mobile device
(e.g.,
smartphone,
tablet).
The website
should adapt
to the smaller
screen and
provide a
user-friendly
experience.
The website
Pass
should adapt
to the smaller
screen and
provide a
user-friendly
experience.
Introduce
errors
intentionally
(e.g., disrupt
the network
connection).
The website
should
display
meaningful
error
messages and
gracefully
handle errors.
The website
Pass
should
display
meaningful
error
messages and
gracefully
handle errors.
61
CHAPTER 7
COST ESTIMATION
Government Polytechnic Nashik
62
CHAPTER 7
COST ESTIMATION
7.1 EFFORT ESTIMATION TABLE
Task
Effort
weeks
Analysis of existing systems &
compare with proposed one
2 weeks
Literature Survey
1 week
Designing & planning
1 weeks
•
System flow
•
Designing modules &
Deliverables
Milestones
1 week
2 weeks
Modules design
document
Implementation
4 weeks
Primary system
Testing
2 weeks
Test reports
Formal
Documentation
1 weeks
Complete project
report
Formal
it’s deliverables
7.2 COST OF PROJECT
Sr no
Title
Cost
1.
Work hour
80
2.
Group members
4
3.
Charges per hour
Rs. 25
4.
Total work charges
80 x 25 = Rs. 2000 (per
person)
5.
Total charge
40,000 x 4 = Rs. 8000
6.
Internet hours
40
7.
Cost per hour
Rs. 50
Government Polytechnic Nashik
63
8.
Total internet charge
40 x 50 = 2,000
9.
Printing and other costs
500
10.
Computer chargers
500
11.
Total Cost
Rs. 11000
Government Polytechnic Nashik
64
CHAPTER 8
FUTURE SCOPE
Government Polytechnic Nashik
65
CHAPTER 8
FUTURE SCOPE
The future scope of professional document builder software for creating resumes, business
cards, and CVs is promising. As technology advances, these tools are likely to incorporate:
➢ Template Diversification: Expand the template library to encompass a wide variety of
professional documents including resumes, CVs, business cards, cover letters, and more,
ensuring users have a broad range of options to choose from.
➢ Intuitive Customization Tools: Implement user-friendly customization features that enable
easy personalization of each template, allowing users to showcase their unique skills and
experiences effectively.
➢ Visual Enhancements: Introduce interactive elements like dynamic infographics and
interactive charts to elevate the visual appeal of the documents, making them more engaging
and impactful.
➢ Guided User Experience: Provide comprehensive tooltips, tutorials, and best practices to
guide users through the document creation process, ensuring they can make the most of the
platform's features.
➢ Responsive Design: Prioritize responsive design practices to ensure the platform functions
seamlessly across various devices and screen sizes, providing a consistent and user-friendly
experience.
➢ Accessibility Compliance: Implement accessibility standards to ensure the website is usable
by individuals with disabilities, promoting inclusivity and usability for all users.
➢ Performance Optimization: Continuously work on optimizing the website's performance to
ensure fast loading times and smooth user interactions, enhancing overall user satisfaction.
➢ User Feedback Integration: Establish channels for collecting and incorporating user
feedback to drive ongoing improvements and ensure the platform aligns with user preferences
and needs.
➢ Community Engagement: Foster a community around the platform through forums, blogs,
or social media, creating a space for users to share tips, tricks, and success stories in
document creation.
As the job market evolves and becomes more competitive, professional document builder
software will likely evolve to offer increasingly sophisticated features to help individuals stand
out and succeed in their careers.
Government Polytechnic Nashik
66
CHAPTER 9
CONCLUSION
Government Polytechnic Nashik
67
CHAPTER 9
CONCLUSION
9.1 Conclusion
The professional document builder brings the entire manual, time-consuming
process of creating professional documents online.
Various documents such as Resumes, CV, Business Cards, etc. can be created and
modified with just a few simple steps.
With the aid of an automated document creator, individuals can efficiently
generate professional-grade resumes, curriculum vitae (CVs), business cards, and a
diverse range of other documents within a matter of seconds.
This advanced tool streamlines the document creation process, eliminating the
need for extensive manual formatting and layout adjustments.
Our professional document builder website is entirely free of charge
It will help students, organizations, educational institutions, etc. in simplifying the
process of creating professional documents.
Government Polytechnic Nashik
68
CHAPTER 10
REFERENCES
Government Polytechnic Nashik
69
CHAPTER 10
REFERENCES
References :
•
Alex Banks, Eve Porcello. (2023). Getting Started with React. In React Documentation
[Online]. Available from: https://reactjs.org/docs/getting-started.html (IEEE)
[Accessed 20th August 2023].
•
Jacob Lett. (2023). Introduction to Bootstrap. In Bootstrap Documentation [Online].
Available from: https://getbootstrap.com/docs/5.1/getting-started/introduction/ (IEEE)
[Accessed 20th August 2023].
•
Willams Smith (2023). Google Fonts. Open Sans Font. [Online]. Available from:
https://fonts.google.com/specimen/Open+Sans (IEEE) [Accessed 20th August 2023].
•
Priyanka Singh (2023). Google Material Icons. Account Circle Icon. [Online].
Available
from:
https://material.io/resources/icons/?icon=account_circle&style=baseline
(ISCTT)
[Accessed 20th August 2023].
•
Henry Mosh (2022). Font Awesome. Phone, email, bin Icon. [Online]. Available from:
https://fontawesome.com/icons/heart?style=solid (IEEE) [Accessed 20th August
2023].
•
Vishal Garg (2022). GeeksforGeeks, Introduction to ReactJS. [Online]. Available from:
https://www.geeksforgeeks.org/reactjs-introduction/ (IEEE) [Accessed 20th August
2023].
•
Ros Maccerthy (2019). Mozilla Developer Network. flex box. [Online]. Available from:
https://developer.mozilla.org/en-US/docs/Web/CSS/flexbox (IEEE) [Accessed 20th
August 2023].
Government Polytechnic Nashik
70