PROJECT REPORT

ON
AI Powered Resume Builder: ResumeIQ
Submitted in the fulfilment of the requirement
for the award of the degree of
Bachelor of Technology
in
Computer Science & Engineering

SUBMITTED BY

Prince Kumar (2203400130017)

Mohd. Saad Sherwani (2203400130010)

UNDER THE SUPERVISION OF

Dr. Mohammad Haris

(Assistant Professor)

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

VIVEKANANDA COLLEGE OF TECHNOLOGY & MANAGEMENT,
ALIGARH AFFILIATED TO DR. A.P.J ABDUL KALAM TECHNICAL UNIVERSITY,
LUCKNOW 2024

1
 Abstract

ResumeIQ is a dynamic and user-friendly web application designed to simplify and

enhance the resume creation process for individuals across various professional
domains. The project seeks to revolutionize the traditional methods of crafting resumes
by offering an innovative platform where users can seamlessly input their details,
generate professional resume summaries, and customize the appearance of their resumes
with ease. The platform empowers users with the flexibility to download their resumes
in PDF format for offline use or securely save their data on the server, ensuring
accessibility at any time. The entire process is aimed at making resume creation
efficient, interactive, and hassle-free.
The application leverages cutting-edge web technologies to deliver a smooth and
engaging user experience. The front end is built using React, which ensures a dynamic
and responsive interface that adapts to various devices and screen sizes. State
management is efficiently handled via the Context API, enabling the application to
manage and synchronize user data seamlessly across different components.
Additionally, React Router is integrated to ensure smooth navigation between different
sections of the platform, providing users with an intuitive experience. Tailwind CSS is
employed for styling, offering a modern and visually appealing interface. Users can
further enhance their resumes by customizing font colors, weights, and other styling
elements, allowing them to align their resumes with their personal preferences or the
specific requirements of potential employers.
On the backend, the application relies on Express.js and Node.js to deliver robust and
scalable server-side functionality. These technologies ensure that user interactions are
processed efficiently, maintaining high performance even as the user base grows.
MongoDB serves as the primary database, allowing for efficient storage and retrieval of
user details and resume data. To further enhance the application’s functionality,
Cloudinary services are integrated for secure and reliable file storage, enabling users to
save their resumes on the server with ease. This backend architecture is designed to
support high scalability and data integrity, making it a reliable solution for managing
user data and files.

2
Acknowledgment

I would like to take this opportunity to express my sincere gratitude to all those who
have contributed to my learning and the successful completion of this project. While I
have not had direct interactions with the instructors, the recorded video tutorials and
online resources were indispensable in my journey.
Firstly, I would like to thank Hitesh Choudhary, whose YouTube tutorials on React
played a significant role in shaping my understanding of front-end development. His
well-structured lessons and in-depth explanations made complex concepts easy to grasp.
Through his recorded videos, I was able to learn the fundamentals of React, such as
component-based architecture, state management, and React Router. His teaching
style and the practical examples provided in his sessions were instrumental in helping
me build the user interface for the ResumeIQ project.
In addition to React, I owe much of my backend knowledge to the tutorials provided by
Hitesh Choudhary and Sheriyans, both of whom have outstanding YouTube channels
dedicated to backend development. Their recorded sessions on Node.js, Express.js, and
MongoDB were incredibly valuable in helping me understand the intricacies of server-
side programming. Thanks to their lessons, I was able to implement the backend
architecture of the ResumeIQ project, which includes data storage, API handling, and
server management. The practical exercises in their tutorials also helped me integrate
Cloudinary for file storage and efficiently manage the backend of the application.
Furthermore, I am grateful for the online resources and communities available, which
made it possible to access top-notch tutorials and expand my knowledge at my own
pace. The ability to learn from recorded videos provided me with the flexibility to
understand and implement the technologies on my own time, which was crucial for my
project’s success.
In conclusion, I extend my deepest gratitude to all the content creators and online
learning platforms that made my journey of learning React, backend development, and
full-stack technologies a rewarding and fulfilling experience.

3
Table of Content

1. Abstract…………………………………………………… I
2. Acknowledgment…………………………………………. II
3. Chapter 1: Introduction……………………………………...1-8
1.1 Overview of the Project………………………1-2
1.2 Objective of ResumeIQ……………………....2-2
4. Chapter 2: Literature Review………………………………..6-8
2.1 Challenges in Resume Creation………………..6-6
2.2 Evolution of Resume-Building Platforms……...6-6
2.3 Web Technologies in Resume Building………..6-6
2.4 Backend Solutions for Data Management……...7-7
2.5 User-Centric Design Principle………………….7-7
2.6 Role of AI and Future Innovations……………..7-7
2.7 Impact of Resume Quality ……………………..7-7
2.8 Accessibility and Inclusivity…………………...7-7
2.9 Open-Source and Modular Development………8-8
2.10 Conclusion…………………………………….8-8

5. Chapter 3: Methodology……………………………………9-30
3.1 Development Process…………………………9-11
3.2 Code Examples………………………………11-26
3.3 Results and Discussion………………………26-30
6. Chapter 4: Technology Stack……………………………..31-33
4.1 Front-End Technologies……………………..31-31
4.2 Back-End Technologies……………………...31-
32
4.3 Database……………………………………..32-32
4.4 Cloud Services……………………………….32-32
4.5 Tools and Utilities…………………………...32-33
4.6 Future Enhancements………………………..33-33
7. Conclusion………………………………………………...34-36
8. References/Bibliography………………………………….37-39

4
 Chapter - 1
Introduction

1.1. Overview of the Project

1.1.1 Introduction to Resume Building:
o ResumeIQ is an innovative web application designed to simplify the process of
creating professional resumes. In today's competitive job market, having a well-
structured and visually appealing resume is crucial for job seekers. However,
many individuals face challenges in designing and formatting their resumes.
ResumeIQ addresses this issue by offering an easy-to-use platform where users
can input their personal details, generate a summary of their resume, and
customize the design to suit their preferences.
o Built with modern web technologies like React, Context API, Tailwind CSS,
and backed by Express.js, Node.js, and MongoDB, ResumeIQ ensures a smooth
user experience. The platform allows users to download their resumes as PDFs
or save them on the server for future updates. With customization options for
font colors, weights, and layout, users can create resumes that reflect their
personal style, making the job application
1.1.2 Need for ResumeIQ:
o In today’s competitive job market, a well-crafted resume is crucial for standing
out among hundreds of applicants. Many individuals, especially students and
early-career professionals, struggle to create a resume that effectively showcases
their skills and experience. Traditional methods of resume creation, such as
using word processors or hiring professionals, can be time-consuming and
costly.
o ResumeIQ fills this gap by offering an easy-to-use, cost-effective solution for
creating professional resumes. It allows users to quickly input their details,
generate a resume summary, and customize its style to meet specific job
requirements. With its simple interface and real-time resume generation, users
can save time and effort in preparing resumes.
o Additionally, the platform offers cloud storage for resumes, enabling users to
store and access them anytime. The customization options, such as adjusting
fonts, colors, and layout, ensure that users can create resumes that reflect their
1
 personal brand and stand out to potential employers.
1.1.3 Target Audience:
o The primary target audience for ResumeIQ includes job seekers from various
professional backgrounds, particularly those who are new to the job market
or in the early stages of their careers. This includes students, recent
graduates, and individuals looking to switch careers. Many of these users
may not have the expertise or resources to create visually appealing and
professionally formatted resumes on their own. ResumeIQ offers them a
straightforward solution to generate resumes quickly and efficiently.
o Additionally, the platform appeals to professionals who wish to update or
customize their resumes as part of career advancement. These users often
require a tool that not only helps in creating a resume but also allows for
personalization and customization based on specific job requirements.
o The tool also benefits freelancers, consultants, and part-time workers who
may have multiple roles and need to tailor their resumes for different job
applications.
o Small business owners and entrepreneurs seeking a simple and efficient way
to create resumes for their teams can also leverage ResumeIQ for their
workforce.
o Ultimately, ResumeIQ serves anyone who needs a professional, customized
resume without spending time on complicated software or hiring professional
services. The easy-to-use interface, customization options, and cloud storage
make it an ideal choice for a diverse range of users.
1.2 Objectives of ResumeIQ

ResumeIQ is designed to address the challenges faced by individuals in creating

professional resumes. With the growing need for standout resumes in today’s
competitive job market, the project aims to simplify and enhance the resume-building
process. The following objectives outline the vision and goals of ResumeIQ,
emphasizing its role as a comprehensive solution for efficient and customizable resume
creation.
1.2.1. Simplifying Resume Creation
The primary objective of ResumeIQ is to streamline the process of resume
creation. Many users, especially students and professionals early in their careers,
lack the technical skills to design and format resumes. By providing an intuitive
2
 interface, ResumeIQ enables users to enter their information step-by-step,
eliminating the need for complex design software or templates.
1.2.2. Offering Customization Options
A major focus of ResumeIQ is to provide extensive customization options. Users
can modify resume layouts, adjust font styles, colors, and weights, and tailor the
design to reflect their personal branding. These customization features ensure
that resumes align with individual preferences, specific job requirements, or
industry standards.
1.2.3. Supporting Multiple Output Formats
ResumeIQ aims to deliver flexibility in output formats, particularly by allowing
users to download their resumes as PDF files. This ensures compatibility with
various job application systems and makes the resumes easy to share via email or
job portals. The project also incorporates cloud storage, enabling users to save
their resumes securely on the platform for future editing or updates.
1.2.4. Enhancing User Experience with Advanced Technology
A key objective is to leverage cutting-edge technologies to create an interactive
and responsive user experience. The front end is built using React, ensuring
seamless performance and dynamic updates. State management through Context
API provides efficient data handling, while Tailwind CSS ensures a visually
appealing and responsive design. These technologies work together to create a
smooth and engaging platform for users.
1.2.5. Providing a Secure Backend Infrastructure
ResumeIQ places a strong emphasis on data security and reliability. By utilizing
Express.js and Node.js for the backend, the project ensures robust server-side
functionality. MongoDB is employed to manage user data and resume
information efficiently. Furthermore, integrating Cloudinary services enables
secure storage of resumes on the server, ensuring data integrity and accessibility.
1.2.6. Addressing Common Resume Challenges
The platform is designed to overcome common challenges faced by job seekers,
such as formatting inconsistencies, lack of professional appearance, and time-
consuming resume updates. ResumeIQ’s automated resume generation and
customization features simplify these tasks, allowing users to focus on content
rather than design complexities.
1.2.7. Supporting Career Advancement

3
 ResumeIQ is not just a tool for creating resumes but also a platform for career
development. By providing an efficient and user-friendly solution, the project
supports users in presenting their qualifications, skills, and experience in the best
possible manner. This, in turn, enhances their chances of securing job
opportunities and advancing their careers.
1.2.8. Promoting Accessibility for All Users
One of the core objectives of ResumeIQ is to ensure accessibility. The platform
is designed to cater to users of all skill levels, from beginners to advanced
professionals. With a straightforward and guided process, ResumeIQ eliminates
barriers to entry, making professional resume creation accessible to everyone,
regardless of their technical expertise.
1.2.9. Encouraging Modularity and Scalability
ResumeIQ is built with a modular architecture to allow for easy updates and
expansions in the future. This ensures that the platform can adapt to evolving
user needs and incorporate additional features, such as AI-powered suggestions,
analytics, and templates. The scalable backend infrastructure also ensures that
the platform can handle a growing user base without compromising performance.
1.2.10. Delivering an Economical Solution
ResumeIQ aims to provide a cost-effective alternative to professional resume-
building services. Many users, especially students and young professionals,
cannot afford expensive design software or professional resume writers. By
offering a free or affordable platform.
1.2.11. Reducing Time and Effort
The platform is designed to save users significant time and effort by automating
various aspects of resume creation. With features like real-time preview and
automated formatting, ResumeIQ reduces the manual work involved, allowing
users to create resumes quickly and efficiently.
1.2.12. Supporting Multi-Device Usage
ResumeIQ ensures compatibility across devices, enabling users to access and
edit their resumes from desktops, laptops, tablets, and smartphones. This
flexibility enhances the user experience, allowing for resume creation and
updates on the go.
1.2.13. Enabling Easy Collaboration

4
 For users who require feedback or collaboration on their resumes, ResumeIQ
provides options for sharing or saving resumes for external review. This feature
ensures that users can refine their resumes with input from mentors, peers, or
career advisors.
1.214. Encouraging Innovation in Resume Design
ResumeIQ fosters creativity by allowing users to experiment with different
layouts and designs. The platform’s customization features enable users to create
unique resumes that stand out, helping them leave a lasting impression on
potential employers.
1.2.15. Aligning with Industry Standards
The platform ensures that resumes generated using ResumeIQ adhere to industry
standards and best practices. By offering structured layouts and professional
formatting, ResumeIQ helps users create resumes that meet the expectations of
recruiters and hiring managers.
1.2.16. Supporting Future Enhancements
ResumeIQ lays the groundwork for future development, including advanced
features like:
 AI-Powered Suggestions: Offering recommendations for content optimization,
such as skill enhancements or improved phrasing.
 Job-Specific Templates: Providing tailored resume templates for specific roles or
industries.
 Analytics: Enabling users to track engagement and effectiveness of their
resumes.

5
 Chapter - 2
Literature Review
The development of ResumeIQ is inspired by the growing demand for efficient,
customizable, and accessible resume-building tools. This literature review explores the
background, existing technologies, and research insights that inform the design and
implementation of ResumeIQ. It focuses on the challenges faced by users in resume
creation, the evolution of resume-building platforms, and the integration of modern
technologies to address these challenges.
2.1. Challenges in Resume Creation
Creating a professional resume is often a daunting task for job seekers. Research
indicates that individuals face difficulties in designing visually appealing
resumes, maintaining consistent formatting, and tailoring resumes to specific job
roles. Traditional tools like Microsoft Word or generic templates offer limited
customization, which can restrict the creative expression and individuality of
resumes. According to a study by CareerBuilder, over 60% of job seekers
struggle with crafting resumes that effectively showcase their skills and
qualifications.
2.2. Evolution of Resume-Building Platforms
Over the years, the emergence of resume-building platforms has aimed to
address these challenges. Early platforms like ResumeGenius and Zety offered
basic templates and editing tools but lacked flexibility in customization. More
recent tools, such as Canva and Novoresume, have integrated design-centric
features that allow for better visual presentation. However, many of these
platforms operate on subscription models, making them inaccessible to students
and early-career professionals who may not have the financial resources to afford
premium features.
2.3. Web Technologies in Resume Building
The integration of modern web technologies has revolutionized resume-building
platforms. Technologies such as React, Context API, and Tailwind CSS enable
developers to create interactive, responsive, and customizable applications.
Studies on user experience in web applications highlight the importance of real-
time updates and seamless navigation, both of which are facilitated by these
technologies. Tailwind CSS, in particular, has emerged as a preferred choice for
styling due to its flexibility and ability to create responsive designs.
6
2.4. Backend Solutions for Data Management
Secure and scalable data management is a critical aspect of any web application.
Research on backend technologies emphasizes the reliability of Node.js and
Express.js in handling server-side functionality. MongoDB, a NoSQL database,
has gained popularity for its ability to store and manage unstructured data
efficiently, making it an ideal choice for applications like ResumeIQ, where
user-generated content varies in format and structure. Integrating cloud services,
such as Cloudinary, ensures secure storage and retrieval of resume files,
addressing user concerns regarding data safety.
2.5. User-Centric Design Principles
The success of resume-building platforms depends heavily on user experience
and accessibility. Studies in human-computer interaction underline the
importance of intuitive interfaces, minimal learning curves, and customization
options in enhancing user satisfaction. ResumeIQ incorporates these principles
by providing step-by-step guidance, real-time previews, and extensive
customization features, catering to users with varying levels of technical
expertise.
2.6. Role of AI and Future Innovations
While ResumeIQ does not currently integrate AI, literature suggests that
incorporating AI-driven features can significantly enhance resume-building
platforms. Tools like Jobscan and Resunate leverage AI to optimize resumes by
analyzing job descriptions and suggesting improvements. Future iterations of
ResumeIQ could benefit from similar features, including keyword optimization
and content recommendations tailored to specific industries or roles.
2.7. Impact of Resume Quality on Career Outcomes
Numerous studies highlight the critical role of well-crafted resumes in securing
job opportunities. Recruiters often spend less than 10 seconds scanning a resume,
emphasizing the need for clear, concise, and visually appealing formats.
Platforms like ResumeIQ address this need by enabling users to create
professional-grade resumes quickly and efficiently, improving their chances of
making a positive impression on potential employers.
2.8. Accessibility and Inclusivity
A key limitation of many existing resume-building platforms is their lack of

7
 accessibility for users with disabilities. Research on web accessibility
underscores the importance of designing platforms that are inclusive and
compliant with accessibility standards, such as WCAG (Web Content
Accessibility Guidelines). ResumeIQ incorporates these standards, ensuring that
users with disabilities can navigate the platform effortlessly and create resumes
without barriers.
2.9. Open-Source and Modular Development
The trend toward open-source and modular development has paved the way for
scalable and maintainable applications. ResumeIQ adopts a modular architecture,
enabling developers to add new features or modify existing ones with ease. This
approach not only supports future enhancements but also allows the application
to evolve in response to user feedback and technological advancements.
2.10. Conclusion
The literature on resume creation, user-centric design, and modern web
technologies provides valuable insights for the development of ResumeIQ. By
addressing the challenges identified in existing platforms and incorporating best
practices from the research, ResumeIQ offers a practical and innovative solution
for resume building. The platform’s focus on accessibility, customization, and
scalability ensures that it meets the diverse needs of its target audience, laying
the foundation for continuous improvement and future innovation.

8
 Chapter - 3
Methodology
3.1.1 The methodology of ResumeIQ focuses on the systematic approach to developing
a user-centric web application for resume creation, customization, and management. The
project follows an agile development model to ensure flexibility, iterative improvement,
and continuous feedback incorporation. The methodology is structured into several
phases, ensuring clarity in implementation and alignment with project objectives.
3.1.2 Requirement Analysis:
The initial phase involves understanding the requirements of the target
audience, which includes job seekers, students, and professionals.
Research is conducted to identify common challenges in resume creation
and customization, such as the lack of user-friendly tools, customization
limitations, and accessibility issues. The insights gathered from this phase
serve as the foundation for feature definition and functionality design.
3.1.3 Technology Stack Selection:
Based on the requirements, a technology stack is chosen to meet
performance, scalability, and usability demands. React is selected for the
front-end development due to its component-based architecture and
reusability. Tailwind CSS ensures responsive design and seamless
customization options. For the back-end, Node.js and Express.js are
utilized for their scalability and efficient server-side operations.
MongoDB is chosen as the database for managing user and resume data
due to its flexibility and document-based structure. Cloudinary is
integrated for secure and scalable file storage.

9
 Fig. 3.1
3.1.4. Design and Prototyping:
During this phase, wireframes and prototypes of the application are
created to visualize the user interface and interactions. The design
emphasizes an intuitive layout, minimalistic aesthetics, and
responsiveness. Feedback is gathered from potential users to refine the
design and ensure it aligns with their expectations.

Fig. 3.2
3.1.5 Development:
The development phase begins with front-end implementation using
React. Components such as the resume editor, customization panel, and
PDF generator are developed modularly to ensure maintainability and
scalability. Context API is integrated to manage state, such as theme
selection and user inputs, across the application. Tailwind CSS is used to
style the interface, providing dynamic and responsive elements. The
10
 back-end is developed in parallel, with Express.js handling API routing
and MongoDB managing data storage. Cloudinary is set up to handle file
uploads and secure storage for user-generated resumes.
3.1.6. Testing:
Testing is conducted throughout the development phase to ensure
functionality, performance. Unit testing is performed for components to
verify their behavior. Integration testing ensures seamless communication
between the front-end. Usability testing involves gathering feedback from
users to identify potential pain points or areas for improvement. Security
testing ensures data integrity and the protection of user information.
3.1.7 Deployment:
Once testing is complete, the application is deployed to a production
environment. Cloudinary ensures reliable file storage, while Node.js and
MongoDB support scalability for handling multiple concurrent users.
Continuous integration and deployment pipelines are established to
streamline future updates.

3.1.8 Maintenance and Future Enhancements:

The project is maintained post-deployment to address user feedback, fix
bugs, and add new features. Future enhancements may include AI-
powered suggestions for resume content, analytics for tracking user
engagement, and multilingual support to cater to a diverse user base. This
methodology ensures that ResumeIQ is a robust, scalable, and user-
friendly platform that meets the evolving needs of its audience.
3.2. Code Examples:
3.2.1. Landing Page Code:
import React from "react";
import { HeroSection } from "../index.js";
import { FontAwesomeIcon } from "@fortawesome/react-
fontawesome";
import { faBolt } from "@fortawesome/free-solid-svg-icons";
import { Link } from "react-router-dom";

const Home = () => {

return (
<div className="container bg-gray-50 pt-3">
{/* Hero Section */}
<HeroSection />

{/* Features Section */}

11
 <section className="py-12 sm:py-16 bg-gradient-to-b from-
white to-blue-100 text-gray-800">
<h2 className="text-2xl sm:text-3xl font-semibold text-
center text-blue-700 mb-8 sm:mb-12 fade-in-up">
Why Choose Us
</h2>
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-
cols-3 gap-6 sm:gap-8">
{["Easy to Use", "Downloadable Formats", "Instant
Download"].map(
(feature, index) => (
<div
key={index}
className="bg-white p-6 rounded-lg shadow-md
hover:shadow-lg transition-shadow duration-300 ease-in-out fade-in-
up"
style={{
animationDelay: `${index * 0.2}s`,
}}
>
<h3 className="text-xl sm:text-2xl font-bold
text-blue-600 mb-4">
{feature}
</h3>
<p className="text-gray-700">
{index === 0
? "Our user-friendly interface allows you to
build a professional resume quickly and easily."
: index === 1
? "Download your resume in various formats,
including PDF and DOCX, for easy sharing and printing."
: "Once your resume is ready, download it
instantly in multiple formats like PDF and DOC."}
</p>
</div>
)
)}
</div>
</section>

{/* Call to Action Section */}

<section className="text-center py-12 sm:py-16 bg-
gradient-to-r from-teal-50 to-teal-100 text-gray-800 transition-colors
duration-500 hover:from-teal-100 hover:to-teal-50">
<h2 className="text-2xl sm:text-3xl font-semibold mb-4
sm:mb-6 text-teal-700 scale-in">
Start Building Your Resume Today
</h2>
<p className="text-base sm:text-lg mb-4 sm:mb-6 text-
gray-600 fade-in">
Join thousands of users who have successfully created
their resumes with ease!
</p>
<Link
to="/sign-in"

12
 className="bg-white text-teal-600 py-2 px-6 sm:py-3
sm:px-8 rounded-full font-semibold hover:bg-teal-600 hover:text-
white transition-transform duration-300 ease-in-out scale-105
hover:scale-110"
>
Sign In & Begin
</Link>
</section>

{/* Footer Section */}

<footer className="py-8 bg-gradient-to-r from-teal-50 to-
teal-100 text-gray-800 text-center">
<p className="text-gray-700 glow">⚡ Powered by the
brilliance of Prince Saxena!</p>
<p className="text-teal-600 animate-gradient-text">
ResumeIQ | Electrifying the tech scene!
</p>
</footer>
</div>
);
};

export default Home;

3.2.2. SignIn Page Code:

import React, { useState } from "react";
import { Link } from "react-router-dom";
import { useNavigate } from "react-router-dom";
import axios from "axios";
import { signInURL } from "../../assets/URL.js";

export default function SignIn() {

const navigate = useNavigate();
const [formData, setFormData] = useState({
identifier: "",
password: "",
});

const handleChange = (e) => {

setFormData({
...formData,
[e.target.name]: e.target.value,
});
};
13
 const handleSubmit = async (e) => {
e.preventDefault();
try {
const response = await axios.post(signInURL, formData, {
headers: { "Content-Type": "application/json" },
withCredentials: true,
});
navigate("../dashboard");
} catch (error) {
// if (error === "Incorrect Password!")
alert("Invaild Credentials!");
// console.log(error);

// alert("Error while SignIn process!");

// console.error("Error Response:", error.response?.data ||
error.message);
}
};

return (
<div className="flex justify-center items-center w-full min-h-screen
bg-gradient-to-br from-blue-50 to-purple-100">
<form
onSubmit={handleSubmit}
className="w-full max-w-[450px] bg-white p-8 rounded-xl
shadow-lg shadow-blue-300/50"
>
<h2 className="text-2xl font-bold text-blue-600 mb-6 text-
center">Sign In</h2>

<div className="mb-4">
<input
type="text"
name="identifier"
onChange={handleChange}
placeholder="Username or Email"

14
 className="w-full px-3 py-2 border rounded-lg shadow-sm
focus:outline-none focus:ring-2 focus:ring-blue-500"
required
autoComplete="username" // Add autocomplete for
username/email
/>
</div>

<div className="mb-6">
<input
type="password"
name="password"
onChange={handleChange}
placeholder="Password"
className="w-full px-3 py-2 border rounded-lg shadow-sm
focus:outline-none focus:ring-2 focus:ring-blue-500"
required
autoComplete="current-password" // Add autocomplete for
password
/>
</div>

<button
type="submit"
className="w-full bg-blue-600 text-white py-2 rounded-lg
shadow hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-
400"
>
Sign In
</button>
<p className="text-center text-sm text-gray-600 mt-4">
Didn't have account?{" "}
<Link
to="/signup"
className="text-blue-600 hover:underline focus:outline-
none focus:ring-1 focus:ring-blue-400"
>

15
 Sign Up
</Link>
</p>
</form>
</div>
);
}

3.2.3. SignUp Page Code:

import React, { useState } from "react";

import { Link, useNavigate } from "react-router-dom";
import axios from "axios";
import sticker from "/sticker.png";
import { signUpURL } from "../../assets/URL.js";

export default function SignUp() {

const navigate = useNavigate();
const [formData, setFormData] = useState({
fullname: "",
username: "",
email: "",
password: "",
});
const [otpSent, setOtpSent] = useState(false);
const [otp, setOtp] = useState("");
const [serverOtp, setServerOtp] = useState("");
const [isVerified, setIsVerified] = useState(false);

const handleChange = (e) => {

setFormData({
...formData,
[e.target.name]: e.target.value,
});
};
16
 const handleOtpChange = (e) => {
setOtp(e.target.value);
};

const postData = async () => {

try {
const response = await axios.post(signUpURL, formData);
// console.log("User registered successfully:", response.data);
// alert("User registered successfully!");
navigate("../signin");
} catch (error) {
alert("Error registering user.");
// console.error(error);
}
};

const handleSubmit = async (e) => {

e.preventDefault();
postData();
};

return (
<div
className="flex justify-center items-center w-full min-h-
screen bg-gradient-to-br from-blue-50 to-purple-100"
>
{/* <div className="main flex justify-between">
<div className="img flex justify-center items-center">
<img src={sticker} alt="sticker" className="max-w-
[300px] w-full" />
</div>
</div> */}
<form
17
 onSubmit={handleSubmit}
className="w-full max-w-[450px] bg-white p-8 rounded-xl
shadow-lg shadow-blue-300/50"
>
<h2 className="text-3xl font-bold text-center text-blue-
600 mb-6">Sign Up</h2>

<div className="mb-5">
<input
type="text"
name="fullname"
value={formData.fullname}
onChange={handleChange}
placeholder="Full Name"
className="w-full px-4 py-2 border border-gray-300
rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-
500 transition"
required
/>
</div>
<div className="mb-5">
<input
type="text"
name="username"
value={formData.username}
onChange={handleChange}
placeholder="Username"
className="w-full px-4 py-2 border border-gray-300
rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-
500 transition"
required
/>
</div>
<div className="mb-5">
18
 <input
type="email"
name="email"
value={formData.email}
onChange={handleChange}
placeholder="Email"
className="w-full px-4 py-2 border border-gray-300
rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-
500 transition"
autoComplete="username"
required
/>
</div>
<div className="mb-6">
<input
type="password"
name="password"
minLength={8}
maxLength={16}
value={formData.password}
onChange={handleChange}
placeholder="Password"
className="w-full px-4 py-2 border border-gray-300
rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-
500 transition"
required
autoComplete="current-password"
/>
</div>

{/* OTP Verification Section */}

{/* {otpSent && (
<div className="mb-6">
<input
19
 type="text"
value={otp}
onChange={handleOtpChange}
placeholder="Enter OTP"
className="w-full px-4 py-2 border border-gray-300
rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-
500 transition"
required
/>
<button
type="button"
onClick={verifyOtp}
className="w-full bg-green-600 text-white py-2
rounded-lg shadow-md hover:bg-green-700 mt-3 focus:outline-none
focus:ring-2 focus:ring-green-400 transition"
>
Verify OTP
</button>
</div>
)} */}

<button
type="submit"
className="w-full bg-blue-600 text-white py-3 rounded-
lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2
focus:ring-blue-400 transition"
>
Register
{/* {otpSent ? (isVerified ? "Register" : "Verify Email") :
"Send OTP"} */}
</button>

<p className="text-center text-gray-600 mt-4">

Already have an account?{" "}
20
 <Link to="/signin" className="text-blue-600 font-
semibold hover:underline">
Sign In
</Link>
</p>
</form>
</div>
);
}

3.2.4. Dashboard Page Code:

import React, { useState, useEffect, useContext } from "react";

import { useNavigate } from "react-router-dom";
import axios from "axios";
import { ResumeInfoContext } from "../../context/ResumeContext.jsx";
import { useUser } from "../../context/UserContext.jsx";
import Card from "../small-components/Card.jsx";
import { getURL } from "../../assets/URL.js";

const Dashboard = () => {

const { formData, setFormData } = useContext(ResumeInfoContext);
const { user } = useUser();
const [isOpen, setIsOpen] = useState(false);
const [resumes, setResumes] = useState([]);
const navigate = useNavigate();

// Fetch resumes from backend

const fetchResumes = async () => {
try {
const response = await axios.get(getURL, {
params: {
userId: user._id,
},
});
// console.log(response, "skjn");

21
 if (response.status === 200) {
// console.log(response.data.data.publicIdArray);

setResumes(response.data.data.publicIdArray || []);
} else {
// console.error("Unexpected response status");
}
} catch (error) {
// console.error("Error fetching resumes:", error.message);
window.location.reload();
}
};

useEffect(() => {
fetchResumes();
}, [user]);

const handleChange = (e) => {

const { name, value } = e.target;
setFormData({ ...formData, [name]: value });
};

const handleSubmit = (e) => {

e.preventDefault();
setIsOpen(false);
navigate("../user-input/personal");
};

return (
<>
<div className="fixed inset-0 font-serif flex justify-center items-
center text-7xl bg-gradient-to-r from-purple-100 via-indigo-200 to-blue-300
text-gray-500 -z-10 opacity-50 pointer-events-none">
ResumeIQ
</div>
{/* Modal for adding a new resume */}

22
 {isOpen && (
<div className="fixed inset-0 flex items-center justify-center bg-
black bg-opacity-50 z-50">
<div className="w-full max-w-md p-6 bg-white rounded
shadow-lg">
<h2 className="mb-4 text-xl font-semibold text-gray-
700">Enter Job Role</h2>
<form onSubmit={handleSubmit}>
<div className="mb-4">
<label
htmlFor="jobRole"
className="block mb-2 text-sm font-medium text-
gray-600"
>
Job Role
</label>
<input
type="text"
name="title"
placeholder="Enter job role"
required
className="w-full p-3 border rounded focus:ring-2
focus:ring-blue-500 focus:outline-none"
onChange={handleChange}
/>
</div>
<div className="flex justify-end">
<button
type="button"
onClick={() => setIsOpen(false)}
className="px-4 py-2 mr-2 text-gray-700 bg-gray-
200 rounded hover:bg-gray-300"
>
Cancel
</button>
<button
type="submit"

23
 className="px-4 py-2 text-white bg-blue-500
rounded hover:bg-blue-600"
>
Submit
</button>
</div>
</form>
</div>
</div>
)}

{/* Main content */}

<div className="p-4 pt-12 bg-transparent min-h-screen w-full flex
justify-center">
<div className="w-full max-w-7xl h-full py-10 px-6 sm:px-8
lg:px-12">
<h1 className="text-3xl font-bold mb-6 text-center sm:text-
left">My Resumes</h1>

<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3

lg:grid-cols-4 xl:grid-cols-5 lg:gap-20 gap-6">
{/* Add new resume card */}
<div
onClick={() => setIsOpen(true)}
className="w-60 h-80 bg-white rounded-lg shadow-lg
border border-gray-300 overflow-hidden flex justify-center items-center
cursor-pointer hover:shadow-xl transition-transform hover:scale-105"
>
<span className="text-gray-500 font-medium text-
center">
+ Add New Resume
</span>
</div>

{/* Map over resumes and display them */}

{resumes &&
resumes.map((resume, index) => (

24
 <Card
title={resume.title || "Can't Get!"}
publicId={resume.publicId}
key={index}
/>
))}
</div>
</div>
</div>
</>
);
};

export default Dashboard;

25
Home Page:

Fig. 3.3

SignIn Page:

Fig. 3.4

26
3.3. Resuts and Discussion

The development and implementation of ResumeIQ yielded significant results that

demonstrate its effectiveness as a resume creation and customization platform. This
section discusses the outcomes of the project, evaluates its performance against
objectives, and reflects on the challenges encountered during development.
Key Results
3.3.1.Seamless Resume Creation:
Users can effortlessly input their details to generate professional resumes.
The form-driven approach ensures accuracy and efficiency in data
collection, while real-time previews provide users with immediate
feedback, enhancing the user experience.

Fig. 3.5
3.3.2. Customization Features
The application offers robust customization options, such as font styles,
colors, and weights. These features allow users to personalize their
resumes to align with their preferences or specific job requirements.
Tailwind CSS played a significant role in achieving a responsive and
visually appealing design.

27
 Fig. 3.6

3.3.3. Download and Storage

The ability to download resumes in PDF format and securely save them
on the server offers convenience and accessibility. Cloudinary integration
ensures fast and secure storage, while MongoDB efficiently manages user
data and resume templates.

Fig. 3.7

28
 3.3.4. Efficient State Management
The Context API facilitated smooth state management across the
application, ensuring consistent theme settings and user preferences
without performance degradation.
3.3.5. Scalable Backend:
The backend architecture, built with Node.js and Express.js, performed
well under testing conditions, supporting concurrent user requests and
ensuring data integrity.Discussion
3.3.6. User Feedback:
Initial testing with a sample user base highlighted the ease of use and
simplicity of the interface. Users appreciated the customization options
and real-time previews. However, some feedback suggested adding more
predefined templates to cater to diverse industries.
3.3.7 Performance Analysis:
The application performed efficiently during stress testing, handling
multiple user requests simultaneously without significant latency. The
use of MongoDB allowed for fast retrieval and storage of data, and
Cloudinary ensured reliable file uploads.
3.3.8. Challenges and Solutions:
1. Customization Complexity: Implementing extensive customization
options required careful planning. Using Tailwind CSS, with its utility-
first approach, streamlined the process and reduced development time.
2. State Management: Managing user preferences and theme settings across
multiple components was initially challenging. The Context API resolved
this issue effectively by providing a centralized state management
solution.
3. File Storage: Ensuring secure and scalable file storage was critical.
Cloudinary integration not only addressed this concern but also improved
overall storage reliability.
3.3.9. Limitations:
Despite its success, the project has certain limitations. The absence of advanced
features such as AI-driven content recommendations and analytics limits its

29
 current capabilities. Moreover, the application's dependency on an internet
connection for server functionalities may hinder accessibility in offline scenarios.
3.3.10 Future Prospects:
To enhance its utility, future iterations of ResumeIQ could include:
 AI-powered content suggestions for improving resume summaries.
 Industry-specific templates tailored to unique requirements.
 Offline support for creating and editing resumes without an internet
connection.
 Enhanced analytics to help users track the effectiveness of their resumes.

30
 Chapter - 4
Technology Stack
The development of ResumeIQ involves a carefully chosen technology stack that
ensures a seamless, efficient, and secure user experience. The technology stack spans
front-end, back-end, database, and cloud services, each playing a crucial role in
delivering a robust and feature-rich platform. This section provides an in-depth overview
of the technologies used and their contributions to the project.
4.1. Front-End Technologies
The front end is the user interface that interacts directly with the users. ResumeIQ’s
front-end architecture ensures an intuitive, responsive, and visually appealing design.
4.1.1 React.js:
React is the core technology powering the front end. It enables the creation of
reusable components and promotes a modular development approach. React's
virtual DOM ensures optimal rendering performance, enhancing the
responsiveness of the application. Its component-based architecture simplifies
the addition of new features and ensures maintainability.
4.1.2 ContextAPI:
The Context API is used for state management, allowing seamless
communication between components without the need for prop drilling. It is
particularly useful for managing themes, user preferences, and other global states
efficiently.
4.1.3 React-Router:
For smooth navigation across multiple pages and views within the single-page
application, React Router is employed. It provides dynamic routing, enabling
users to move effortlessly between the resume editor, customization panel, and
saved resumes.
4.1.4 Tailwind-CSS:
Tailwind CSS is used for styling the application. It provides a utility-first
approach, enabling rapid and consistent styling across components. Tailwind's
responsiveness ensures that the application looks and performs well on devices
of varying screen sizes, enhancing usability for all users.
4.2. Back-End Technologies
The back end is responsible for handling server-side logic, data processing, and API
31
integration. It ensures the secure and efficient operation of the application.

4.2.1.Node.js:
Node.js is chosen for its non-blocking, event-driven architecture, making it ideal
for handling multiple user requests simultaneously. Its scalability and
performance are crucial for supporting a growing user base.
4.2.2.Express.js:
Built on top of Node.js, Express provides a minimalist yet powerful framework
for building APIs and managing server-side logic. It facilitates routing,
middleware integration, and handling HTTP requests, forming the backbone of
ResumeIQ's server.
4.3. Database
Data storage and retrieval are key functionalities in ResumeIQ. The platform requires a
flexible and scalable database to manage user data, resume details, and customizations.
4.3.1 MongoDB:
MongoDB, a NoSQL database, is used for its ability to handle unstructured and
semi-structured data. Its document-based model is well-suited for storing JSON-
like objects, such as user preferences, resume details, and file metadata.
MongoDB ensures scalability and high availability, catering to a large volume of
data efficiently.
4.4. Cloud Services
To handle file uploads and storage, a reliable cloud service is integrated into ResumeIQ.
4.4.1 Cloudinary:
Cloudinary provides secure and efficient file storage for user-uploaded resumes.
It supports various file types and offers features like automatic file
transformation and optimization. Cloudinary ensures the safe retrieval and
management of resume files, enhancing the reliability of the platform.
4.5. Tools and Utilities
In addition to core technologies, ResumeIQ leverages several tools and utilities
to streamline development and ensure quality.
4.5.1. VSCode:
The Visual Studio Code editor is used for coding, offering features like IntelliSense,
debugging tools, and extensions that improve developer productivity.
4.5.2. Git and GitHub:

32
 Version control is managed using Git, with GitHub serving as the repository for
collaborative development. These tools ensure efficient code management and
version tracking.
4.6 Future Enhancements
The modularity of the chosen technology stack allows for the integration of advanced
features in future iterations of ResumeIQ. Potential enhancements include:
 AI Integration: AI-based resume optimization and suggestions for improving
content.
 Analytics: User engagement tracking and feedback systems to identify popular
features and areas for improvement.

33
 Conclusion
ResumeIQ represents a significant step forward in addressing the challenges faced by
individuals in crafting professional and impactful resumes. In today’s competitive job
market, a well-structured resume is often the first and most critical point of interaction
between a candidate and potential employers. ResumeIQ simplifies this process, offering
users an intuitive platform that combines functionality, flexibility, and scalability.
At its core, ResumeIQ is designed to empower users with complete control over their
resume-building journey. The platform facilitates seamless input of personal and
professional details, generating comprehensive resume summaries that are ready for use.
Furthermore, it extends customization options, allowing users to tailor their resumes
with specific font styles, colors, weights, and other design elements. This feature not
only caters to individual preferences but also helps users align their resumes with
industry standards or specific job requirements. The ability to download resumes in PDF
format and store them securely on the server ensures that users have easy access to their
documents whenever required.
The development of ResumeIQ leveraged a robust tech stack to ensure a seamless user
experience. The front-end was crafted using React, with state management achieved via
Context API, enabling dynamic updates and efficient handling of user interactions.
Tailwind CSS was employed for responsive and visually appealing designs, while React
Router enhanced navigation across the platform. The backend, built with Express.js and
Node.js, ensured scalability and reliability. MongoDB provided a secure and efficient
database solution for managing user data, and Cloudinary integration facilitated
seamless file storage and retrieval. This carefully chosen technology stack ensured that
the platform is not only functional but also capable of handling a growing user base.
The success of ResumeIQ lies in its ability to address real-world challenges.
Traditionally, resume building has been a time-intensive and often stressful process.
Many users struggle with choosing the right format, structure, or design elements for
their resumes. ResumeIQ eliminates these hurdles by providing pre-designed templates
and real-time customization options. The platform bridges the gap between functionality
and design, ensuring that users do not need advanced technical skills to create visually
appealing resumes.
From a development perspective, ResumeIQ demonstrates the importance of modularity
and scalability.

34
 Each component of the application, from the front-end design to the backend
architecture, was built with reusability and future enhancements in mind. This approach
not only made the development process efficient but also ensured that the platform could
be easily updated to include new features or accommodate more users as demand grows.
ResumeIQ also holds immense potential for future advancements. Incorporating
artificial intelligence (AI) features, such as content suggestions or grammar checks,
could significantly enhance the user experience. For example, AI could provide tailored
recommendations based on the user’s industry or job role, helping them craft more
targeted resumes. Similarly, analytics features could be introduced to track user
engagement, providing insights into popular features and areas for improvement. Offline
support, multilingual templates, and integration with job portals are other potential
enhancements that could further expand the platform's reach and usability.
While the project has achieved its initial objectives, the development journey
highlighted areas for improvement. For instance, refining the user interface to include
more design options and optimizing backend performance for faster file uploads and
downloads are critical next steps. Expanding the template library to cater to niche
industries or creative fields could attract a broader audience. Additionally, providing
tutorials for first-time users would enhance the onboarding experience and increase user
satisfaction.
Another aspect of ResumeIQ's significance lies in its potential to contribute to the tech
community. The project showcases the effective use of modern web development tools
to create a practical, real-world application. Its modular architecture, clear
documentation, and scalable design serve as an excellent learning resource for
developers, particularly those new to React, Tailwind CSS, and backend development
with Node.js and MongoDB.
ResumeIQ has also demonstrated the value of cloud-based services in modern
application development. By integrating Cloudinary for file storage, the platform
ensured that users could rely on secure, scalable, and efficient storage solutions. This
integration highlights the growing importance of cloud services in building applications
that cater to dynamic and diverse user needs.
In conclusion, ResumeIQ is more than just a resume-building platform; it is a solution
tailored to meet the demands of modern job seekers. By simplifying and enhancing the

35
resume creation process, it empowers users to focus on what truly matters—their career
goals. The project underscores the potential of technology to transform mundane tasks
into streamlined, user-friendly experiences.

Looking ahead, ResumeIQ is well-positioned to evolve and adapt to emerging trends in

the job market and technology landscape. Its strong foundation, combined with a
commitment to continuous improvement, ensures that it will remain a relevant and
valuable tool for users. The lessons learned during its development provide valuable
insights for future projects, emphasizing the importance of user-centric design,
modularity, and scalability.
ResumeIQ’s journey highlights how technology, when applied thoughtfully, can address
everyday challenges effectively. By bridging the gap between functionality and
accessibility, it sets a benchmark for similar applications in the future. With its robust
features, scalable architecture, and potential for innovation, ResumeIQ stands as a
testament to the possibilities of modern web development and its impact on real-world
problems.

36
 References/Bibliography

Creating ResumeIQ was a rewarding journey, and it would not have been possible
without the guidance and resources available on platforms like YouTube. As a self-
taught developer, I relied heavily on online tutorials, recorded lectures, and video
resources to build my technical expertise. One of the primary contributors to my
learning was Hitesh Choudhary's YouTube channel. His comprehensive and easy-to-
understand tutorials provided me with a solid foundation in both front-end and back-end
development, helping me apply these skills to develop ResumeIQ.
Hitesh Choudhary's channel is well-known for its in-depth content on a variety of
programming languages, frameworks, and development tools. His tutorials on React,
Context API, and Tailwind CSS were particularly valuable during the development of
ResumeIQ’s front-end. The step-by-step approach used in his videos enabled me to
grasp complex concepts such as state management and responsive design. I applied
these lessons while creating an interactive and user-friendly interface for ResumeIQ.
Additionally, his content on modern JavaScript provided insights into best practices and
advanced techniques, enhancing the overall quality of my code.
For back-end development, I again turned to Hitesh Choudhary’s recorded tutorials,
which covered Express.js and Node.js in great detail. His explanations of server-side
architecture, RESTful APIs, and middleware integration were instrumental in designing
a scalable and efficient back-end for ResumeIQ. These tutorials also guided me in
implementing secure data storage solutions using MongoDB. The practical examples
provided in the videos helped bridge the gap between theory and real-world application,
enabling me to create robust server-side functionality.
Apart from Hitesh Choudhary’s channel, I also benefited from the resources provided by
the Sheriyans YouTube channel. Sheriyans’ tutorials on backend development
complemented my learning, especially when working with MongoDB and integrating
third-party services like Cloudinary.
Their step-by-step instructions for database management and file storage were crucial in
ensuring that ResumeIQ could handle user data efficiently and securely. This knowledge
proved invaluable when implementing features like resume saving and secure file

37
uploads to the cloud.

The use of Cloudinary services for file storage was a new area for me, and the tutorials
on Sheriyans’ channel provided the necessary guidance to integrate it seamlessly into the
project. These videos explained key concepts such as file uploads, URL generation, and
optimizing storage costs, which enhanced my understanding of cloud-based solutions.
This allowed me to offer ResumeIQ users a reliable and secure way to store their
resumes on the platform’s server.
In addition to YouTube channels, I referred to official documentation and community
forums to clarify doubts and troubleshoot issues. For example, the React and Tailwind
CSS official documentation served as a go-to resource for exploring advanced features
and understanding the latest updates. Similarly, Node.js and Express.js documentation
provided in-depth explanations of server-side programming concepts, which were
essential in building ResumeIQ’s backend.
The importance of community-driven platforms like Stack Overflow cannot be
overstated. While developing ResumeIQ, I frequently encountered challenges that
required a deeper understanding or alternative approaches. The community discussions
on Stack Overflow provided quick solutions and insights, saving valuable time during
the debugging process. These forums also exposed me to diverse perspectives and
coding styles, enriching my learning experience.
GitHub repositories and open-source projects also played a significant role in my
journey. Examining the code of similar projects helped me understand best practices and
learn how to structure my code efficiently. These resources offered inspiration and
guidance, particularly when designing the modular architecture of ResumeIQ.
Apart from technical tutorials, I also explored videos and blogs on UI/UX design to
ensure that ResumeIQ offered an intuitive and visually appealing interface. Resources
from YouTube creators specializing in design principles helped me understand user
behavior and the importance of responsive design. These lessons influenced the use of
Tailwind CSS for styling, enabling me to create a cohesive and professional look for the
application.
It is important to acknowledge the contribution of recorded tutorials in my learning
journey. Unlike live sessions or classroom interactions, recorded videos allowed me to
revisit complex topics multiple times until I fully understood them. This flexibility was
especially beneficial when tackling advanced features like state management using the

38
Context API or implementing secure RESTful APIs.
The overall success of ResumeIQ is a testament to the power of accessible online
education. Platforms like YouTube have democratized learning, making high-quality
technical content available to anyone with an internet connection. Hitesh Choudhary’s
and Sheriyans’ channels exemplify this, offering valuable resources that cater to learners
of all levels.
In conclusion, the development of ResumeIQ was deeply influenced by the knowledge
and skills I acquired from YouTube channels and other online resources. Hitesh
Choudhary’s detailed tutorials on React and backend development, combined with
Sheriyans’ expertise in MongoDB and cloud integration, formed the backbone of my
learning. These resources, supplemented by official documentation, community forums,
and open-source projects, enabled me to build a functional and scalable application.sw
ResumeIQ is not only a project but also a reflection of the knowledge I have gained
from these invaluable resources. By leveraging the guidance provided by Hitesh
Choudhary, Sheriyans, and the larger tech community, I was able to create a platform
that simplifies resume creation for users across diverse domains. This journey highlights
the transformative impact of online education and the importance of sharing knowledge
to empower aspiring developers.

39