Baba Banda Singh Bahadur Engineering College

Fatehgarh sahib

Feb 2024

REACT BASED RESUME BUILDER WEB APPLICATION

PROJECT SYNOPSIS OF PROJECT

BACHELOR OF TECHNOLOGY

Computer Science Engineering

SUBMITTED BY: GUIDED BY:

Arshpreet Singh (2100306) Prof.Rupinder Kaur Saini

Arun Kumar (2100307)

Atul Ranjan (2100309)

Babanpreet singh (2100310)

 INTRODUCTION
In today's competitive job market, a standout resume is essential for landing coveted positions.
Leveraging cutting-edge technologies, our team has developed a dynamic web application to
streamline the resume-building process. Welcome to the Resume Builder, where we merge the power
of React for the frontend, while harnessing the robust capabilities of Node Express for the backend.

Empowering Job Seekers with Seamless Solutions

Our mission is to empower job seekers with a user-friendly platform that simplifies the creation of
professional resumes. With React driving the frontend development, users experience fluid
interactions and intuitive design elements, ensuring a smooth and engaging experience from start to
finish.

Reliable Backend Infrastructure with Node Express

Behind the scenes, our backend infrastructure powered by Node Express ensures reliability, security,
and scalability. Leveraging the flexibility of Node.js, we handle data management and API
integrations seamlessly, guaranteeing a responsive and efficient platform for our users.

Key Features:

- Dynamic Resume Templates: Choose from a diverse selection of professionally crafted templates,
customizable to reflect individual style and industry preferences.
- Interactive Editing Tools: Effortlessly edit and format content with interactive tools, providing
real-time feedback and visual previews for a polished final product.
- Seamless Export Options: Seamlessly export resumes in various formats, including PDF and
Word documents, ensuring compatibility with different application processes.
- Secure Cloud Storage: Safeguard your data with secure cloud storage, enabling users to access and
update resumes from anywhere, anytime.

Technologies used
1. React JS:
React.js, commonly referred to as React, is a JavaScript library for building user interfaces,
particularly for single-page applications where UI updates are frequent. It was developed by
Facebook and released to the public in 2013. React allows developers to create reusable UI
components, which can then be composed to build complex user interfaces.

Key features and concepts of React include:

1. Component-Based Architecture: React follows a component-based architecture where

the UI is divided into reusable and independent components. Each component manages its
own state and can be composed together to build more complex UIs.

2. Virtual DOM: React uses a virtual DOM (Document Object Model) to efficiently update
the UI. Instead of directly manipulating the browser's DOM, React creates a lightweight
in-memory representation of the DOM, which it uses to compute the most efficient way to
update the actual DOM.

3. JSX: React introduces JSX (JavaScript XML), a syntax extension that allows developers to
write HTML-like code within JavaScript. JSX makes it easier to create and compose React
components in a more declarative manner.

4. Unidirectional Data Flow: React follows a unidirectional data flow, where data flows in
one direction from parent to child components. This makes it easier to understand how data
changes affect the UI and helps to prevent common issues like data inconsistency.

5. Lifecycle Methods: React components have lifecycle methods that allow developers to
hook into various stages of a component's life, such as when it is initialized, rendered,
updated, or unmounted. This provides opportunities for performing tasks like fetching data,
updating the UI, or cleaning up resources.

6. React Hooks: Introduced in React 16.8, hooks are functions that allow developers to use
state and other React features without writing class components. Hooks provide a more
functional approach to working with state and side effects, making it easier to reuse logic
across components.
2. Node-Express:
Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. It allows
developers to run JavaScript code outside of a web browser, making it possible to build
server-side applications using JavaScript. Node.js has a non-blocking, event-driven
architecture, which makes it well-suited for building highly scalable and performant
applications.

Express.js, often referred to simply as Express, is a minimalist web application

framework for Node.js. It provides a robust set of features for building web applications and
APIs, including routing, middleware support, template engines, and more. Express simplifies
the process of building web servers in Node.js by providing a higher-level abstraction over
the native HTTP module.

Key features and concepts of Express.js include:

1. Routing: Express provides a simple and flexible routing system that allows
developers to define routes for handling HTTP requests. Routes can be defined for different
HTTP methods (GET, POST, PUT, DELETE, etc.) and URL patterns.

2. Middleware: Middleware functions in Express are functions that have access to the
request and response objects, as well as the next middleware function in the application's
request-response cycle. Middleware functions can perform tasks such as parsing request
bodies, authenticating users, logging requests, and more.

3. Template Engines: Express supports various template engines, such as Pug

(formerly known as Jade), EJS (Embedded JavaScript), Handlebars, and more. Template
engines allow developers to dynamically generate HTML markup by combining data with
template files.

4. Static File Serving: Express provides built-in middleware for serving static files,
such as HTML, CSS, JavaScript, images, and other assets. This makes it easy to serve
client-side resources directly from the server.
 LITERATURE SURVEY
Disadvantages of traditional way of making resume:
1. Lack of Creativity: Traditional resumes often follow a standard format, limiting
opportunities for candidates to showcase their creativity or unique skills in a visually
appealing manner.
2. Difficulty in Standing Out: With so many resumes following similar formats, it can be
challenging for candidates to differentiate themselves from others applying for the same
position.
3. Limited Customization: Traditional resumes may not allow for much customization to
highlight specific experiences, skills, or achievements that are most relevant to a particular
job opportunity.
4. Not Easily Tailored for Different Roles: It can be time-consuming to tailor a traditional
resume for different job applications, as the format may not easily adapt to different industries
or roles.
5. May Look Dated: Using a traditional resume format may give the impression that the
candidate is not up-to-date with modern trends or technologies, particularly in industries
where innovation and creativity are valued.
6. Risk of Being Overlooked by ATS: Applicant Tracking Systems (ATS) used by many
employers to screen resumes may not effectively parse information from traditional resumes
formatted in non-standard ways, potentially resulting in qualified candidates being
overlooked.
On the other hand, Using a resume builder web application offers several benefits:

1. Ease of Use: Resume builders typically have user-friendly interfaces, making it easy for
individuals to create professional-looking resumes without needing design expertise.
2. Customization Options: These tools often offer a variety of templates and formatting
options, allowing users to customize their resumes to suit their preferences and highlight their
strengths effectively.
3. Time Efficiency: With pre-designed templates and sections, resume builders can
significantly reduce the time required to create a resume compared to starting from scratch.
4. Structured Format: Resume builders guide users through the process of organizing their
information logically, ensuring that essential sections such as work experience, skills, and
education are included.
5. Professional Appearance: The templates provided by resume builders are often designed by
professionals, resulting in resumes that have a polished and professional appearance.
 6. Compatibility with ATS: Many resume builders optimize resumes for Applicant Tracking
Systems (ATS), increasing the likelihood of passing through automated screening processes
used by employers.
7. Accessibility: Resume builders are typically web-based, allowing users to access and edit
their resumes from any device with an internet connection.
8. Updates and Revisions: Users can easily update and revise their resumes as needed, keeping
them current for different job applications or career developments.
9. Guidance and Tips: Some resume builders offer guidance and tips throughout the resume
creation process, helping users highlight their strengths and achievements effectively.
10. Cost-Effective: Many resume builder web applications offer free versions or basic plans
with affordable pricing, making them a cost-effective option for individuals seeking to create
professional resumes.

Already made similar projects:

1. Resume Builder Overview

Resume Build is an online resume builder that offers the following features:

● Easy-to-use builder: Create a professional resume quickly with their easy-to-use builder.
● CV Builder: Make a standout CV in no time using their CV builder.
● Cover Letter Builder: Download a personalized cover letter in minutes with their cover letter
builder.
● ATS-friendly templates: Choose from hundreds of industry-specific resume templates
optimised for Applicant Tracking Systems (ATS).
● Pre-written content: Spend less time typing with ready-made content written by certified
professional resume writers.
● ATS resume checker: Analyse your resume with their ATS resume checker to get a
personalised resume strength score.
● Cover letter builder: Create a cohesive job application with a professional cover letter to
complement your resume.

Testimonials

Users have praised Resume Build for its ease of use, helpful tips, and the overall
quality of the generated resumes:
● Users found that their resumes stood out, leading to multiple job interview offers.
● The platform is considered more than just a resume builder, offering cover letter creation,
resume analysis, and a job search engine.
● Resume Build provides targeted content and expert recommendations for skills to include
based on job titles.
● The platform is praised for its responsive chat feature and additional resume sections like
certifications, social media, or public speaking experiences.
2. Zety : is an online resume builder with the following features:

● Resume Builder: Create a professional resume using their easy-to-use resume builder and a
library of pre-written bullet points, skills, and resume summaries tailored to your industry.
● ATS-friendly templates: Zety templates are designed to be ATS friendly, ensuring that your
resume can be easily parsed and read by most applicant tracking systems.
● Pricing: Zety's resume builder costs $2.70 for a 14-day trial, after which they charge $5.95 per
month.
● Template options: Zety offers an extensive library of templates with modern, minimalist
designs. However, users have noted that the templates all feature a similar style.
● Helpful features: Zety's resume builder offers pre-written bullet points and skills tailored to
the user's industry, making it a convenient and time-saving option.

Testimonials

Users have praised Zety for its easy-to-use interface, helpful features, and customer support:

● Users have found the pre-written bullet points and skills to be particularly helpful, as it saved
time and provided ideas for what to include in their resumes.
● Zety's customer support is considered excellent, with users receiving prompt responses to
their inquiries.
● Users have noted that the templates are modern and minimalist, which can be both an
advantage and a disadvantage, as some users prefer more varied designs.
 SOFTWARE REQUIREMENTS

For the Resume Builder project, the software requirements can be categorized into frontend, backend,
and additional tools for development and deployment. Here's a breakdown:

Frontend:

1. Node.js: Required for running JavaScript on the server side and for managing dependencies using
npm.

2. React.js: The core library for building the user interface components of the application.

Backend:

1. Node.js: Used for building the backend server and handling server-side logic.

2. Express.js: A web application framework for Node.js that simplifies routing, middleware, and
other common tasks.

Additional Tools:

1. Code Editor: Any code editor or integrated development environment (IDE) like Visual Studio
Code, Atom, or Sublime Text for writing and editing code.

2. Git: Version control system for tracking changes in the codebase and collaborating with team
members.

3. Package Manager: npm (Node Package Manager) or Yarn for managing dependencies and
packages.

4. API Development Tools: Tools like Postman or Insomnia for testing APIs during development.

Deployment:

Hosting Service: A hosting provider such as Heroku, AWS (Amazon Web Services), or Vercel for
deploying both frontend and backend applications.
 HARDWARE REQUIREMENTS
■ OS: Windows 7 or above
■ Processor: Intel Core 2 Quad CPU Q6600 @ 2.40GHz (4 CPUs) / AMD Phenom 9850
Quad-Core Processor (4 CPUs) @ 2.5GHz or above
■ Memory: 4GB
■ HDD Space: 1GB
■ Internet connection: Yes
 METHODOLOGY / PLANNING OF WORK
The steps for making and working of the react based resume builder web application are:
This is the outline of the methodology employed in the development of a web-based resume builder
application utilizing React for the frontend and Node.js with Express for the backend.
1. Project Planning and Setup:
- Define project objectives and requirements.
- Set up development environment using create-react-app for the frontend and
express-generator for the backend.
- Initialize project directories and establish version control.
2. Designing User Interface (UI):
- Design user interface components using React.
- Implement form inputs for personal information, work experience, education, and skills.
- Create templates for displaying resumes with customization options.
3. Implementing Frontend Logic:
- Develop React components to handle user interactions and form submissions.
- Incorporate client-side validation for input fields.
- Integrate features like drag-and-drop and rich text editing.
4. Backend API Development:
- Set up routes and controllers in Express to handle API requests.
- Define endpoints for CRUD operations related to resume data.
5. Database Integration:
- Select a suitable database (e.g., MongoDB, PostgreSQL).
- Establish database connections and define schema models.
- Develop database queries for storing and retrieving resume data.
6. User Authentication and Authorization:
- Implement user authentication using libraries like Passport.js or JWT.
- Create routes for user registration, login, and password management.
- Configure authorization to control access to application features and data.
7. Integration and Testing:
- Integrate frontend and backend components.
- Conduct comprehensive testing to ensure functionality and usability.
- Perform unit tests, integration tests, and end-to-end tests.
8. Deployment and Hosting:
- Choose a suitable hosting platform (e.g., Heroku, AWS).
- Set up deployment pipelines for automated deployment from version control.
9. Continuous Improvement:
- Solicit user feedback and iterate on application features.
- Monitor performance and security, and apply updates as necessary.
- Plan for future enhancements and feature additions to improve the application over time.
 REFERENCES
1. https://www.crio.do/projects/react-resume-builder/?utm_source=crio-blog&utm_medium=mp
fcse
2. https://resumebuild.com/
3. https://resume.io/
4. https://www.resumebuilder.com/
5. https://www.w3schools.com/react/react_getstarted.asp
6. https://www.geeksforgeeks.org/reactjs-introduction/
7. https://expressjs.com/
8. https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction
9. https://www.geeksforgeeks.org/express-js/