A
MINI Project-REPORT
on
“INTERVIEW GENIE”
in partial fulfilment of the requirements for the
degree
of
Bachelor of Technology
in
COMPUTER SCIENCE AND
ENGINEERING
Submitted by
HARSH PANDEY (ROLL NO- 2108410100028)
Under the supervision of
Dr. MAINEJAR YADAV
(Assistant Professor, CSED)
&
Dr. AMOD KUMAR TIWARI
(Associate Professor, CSED)
RAJKIYA ENGINEERING COLLEGE, SONBHADRA
Certificate
This is to certify that this project report entitled
“Interview Genie”. Submitted by Harsh Pandey in partial
fulfillment of the requirements for the degree of Bachelor
of Technology in Computer Science and Engineering of
Rajkiya Engineering College , Sonbhadra ,Uttar Pradesh
(An AICTE Approved Government Engineering College
Affiliated to Dr. A.P.J. Abdul KalamTechnical University ,
Lucknow) during the academic year 2024 – 25 ,is a
authentic record of work carried out under theguidance of
Dr. Mainejar Yadav (Assist. Pro. C.S.D.E. RECSONBHADRA).
Dr. Mainejar Yadav Dr. Amod Kumar Tiwari
(Assistant Professor of C.S.E.D.) (Head of Department)
I
DECLARATION
I, Harsh Pandey hereby declare that this project report
entitled “INTERVIEW GENIE” submitted to the Rajkiya
Engineering College ,Sonbhadra Uttar Pradesh in partial
fulfilment of the requirements for the award of the Degree of
Bachelor of Technology is web portal providing various
functionalities related to interview and job hunt is made by
me during the period of 7th semester under the supervision
of Dr. Mainejar Yadav ( Assist. Professor) , Department of
C.S.E.D.
Rajkiya Engineering College , Sonbhadra.
PLACE : R.E.C SONBHADRA
Submitted by
Harsh Pandey
(Roll no: 2108410100028)
II
TABLE OF CONTENTS
CERTIFICATE .........................................................................................................I
DECLARATION .....................................................................................................II
TABLE OF CONTENTS……………………………………………………………..III
ABSTRACT ............................................................................................................IV
OBJECTIVE AND FEATURES…….………………………………………………..V
Content Page Number
Introduction 1
Resource Requirements 2
Source Code 3
Output 14
Conclusion 18
References 19
III
ABSTRACT
Interview Genie is an innovative platform crafted to revolutionize
the job hunting and preparation process by leveraging the power
of artificial intelligence. It offers two core features: AI-based mock
interviews and AI-driven resume creation. These tools are
designed to provide users with a seamless, personalized, and
effective way to prepare for their career aspirations. The AI
interview feature simulates real-world interview scenarios,
helping users practice and refine their responses, while the
resume-building feature uses intelligent algorithms to craft
professional resumes tailored to industry standards.
To facilitate accessibility and monetization, Interview Genie
employs a coin-based system. Users can purchase coins through
an integrated payment gateway, which are then used to access
premium AI services.
Additionally, a referral program enables users to earn coins by
inviting others to join the platform, creating a community-driven
approach to engagement and growth.
The platform incorporates a robust authentication system using
Firebase to ensure user data protection and account safety.
IV
OBJECTIVES AND FEATURES
The primary objective of Interview Genie is to empower job
seekers by providing them with cutting-edge tools and
resources to enhance their interview skills and build
professional resumes. By integrating artificial intelligence
with user-centric design, the platform aims to streamline the
job preparation process, making it accessible, efficient, and
personalized for users across diverse industries and career
levels.
Features
1. AI-Based Mock Interviews
o Simulates real-world interview scenarios tailored
to various job roles.
o Provides instant feedback and suggestions for
improvement.
o Helps users practice and refine responses to
common and role-specific interview questions.
2. AI-Driven Resume Builder
o Offers customization options to align with industry
standards and user preferences.
o Ensures error-free, visually appealing, and ATS-
compliant resumes.
3. Coin-Based Monetization System
o Users can purchase coins via an integrated
payment gateway.
o Coins are used to access premium features like
mock interviews and resume building.
o A referral program allows users to earn coins by
inviting others to join the platform.
4. Secure Authentication System
o Implements Firebase for robust user
authentication and data protection.
o Supports third-party login options such as Google
authentication for seamless access.
V
INTRODUCTION
The job market is evolving rapidly, with increasing competition and
dynamic requirements making it crucial for job seekers to be well-prepared
and confident. Traditional methods of resume creation and interview
preparation often lack personalization and accessibility, leaving candidates
at a disadvantage. Recognizing these challenges, Interview Genie has been
developed as a modern, AI-powered solution to simplify and enhance the
job preparation process.
Interview Genie provides an innovative platform that combines technology
and user-focused design to offer two core services: AI-based mock
interviews and AI-driven resume building. These features enable users to
prepare for interviews in a realistic and stress-free environment while
creating professional, industry-standard resumes with minimal effort. By
leveraging artificial intelligence, the platform ensures personalized
feedback and results tailored to each user's unique needs and career goals.
To make these advanced services accessible, Interview Genie incorporates a
coin-based system for monetization. Users can purchase coins via a secure
payment gateway to unlock premium features. The referral program
incentivizes user engagement by allowing participants to earn coins for
inviting others, creating a self-sustaining growth model for the platform.
Security and convenience are at the heart of Interview Genie’s design. A
robust authentication system using Firebase protects user data, while
third-party login options, such as Google authentication, provide seamless
access. The platform is built with scalability and flexibility in mind,
allowing for future enhancements and the addition of new features to meet
the evolving needs of job seekers.
By bridging the gap between advanced technology and job preparation,
Interview Genie empowers individuals to approach the job market with
confidence. It is a one-stop solution for mastering interview skills and
building standout resumes, ultimately enabling users to achieve their
professional aspirations in a competitive landscape.
1
RESOURCE REQUIREMENTS
1. Next.js
o Framework for building a responsive and fast front-end
with server-side rendering (SSR) and static site generation
(SSG).
o Simplifies routing and provides built-in support for React
features.
2. Tailwind CSS
o Utility-first CSS framework for efficient and responsive UI
design.
o Used with dark mode classes to enhance the user interface
for better aesthetics and usability.
3.Node.js
o JavaScript runtime for building scalable and high-
performance backend services.
o Used for handling user authentication, API integrations,
and core logic.
4.FastAPI
o High-performance Python framework for building APIs.
o Handles AI-related operations such as managing requests
to Gemini API for interviews and resume building.
5.MongoDB
o NoSQL database for storing user profiles, transaction data,
authentication details, and referral records.
o Provides flexibility and scalability for dynamic data
handling.
6.Visual Studio Code (VS Code)
o Code editor used for development, debugging, and
managing the project’s source code.
o Extensions for JavaScript, Python, and Tailwind CSS were
used to enhance productivity.
7.Firebase
o Authentication system to ensure secure user sign-in and
account management.
o Supports Google login and email/password authentication.
2
SOURCE CODE
"use client";
import React from "react";
import "./globals.css";
import { useRouter } from "next/navigation";
const Home = () => {
const router = useRouter();
return (
<div className="relative min-h-screen flex flex-col items-center justify-center bg-gradient-to-b from-
white to-gray-100 dark:from-gray-900 dark:to-gray-800 px-6">
{/* Title */}
<h1 className="text-4xl md:text-7xl font-extrabold text-black dark:text-white text-center leading-
snug tracking-tight">
Interview Genie
</h1>
{/* Subtitle */}
<p className="mt-4 text-lg md:text-2xl font-light text-gray-700 dark:text-gray-300 text-center max-
w-3xl">
Your all-in-one career companion, offering AI-powered tools to craft
standout resumes and excel in job interviews. With personalized resumes
and immersive mock interviews providing instant feedback, Interview
Genie ensures you're ready to land your dream job effortlessly.
</p>
{/* Features Section */}
<div className="mt-10 grid gap-6 md:gap-8 md:grid-cols-2 text-center">
<div className="p-6 bg-white dark:bg-gray-800 rounded-xl shadow-lg transition-transform
hover:scale-105">
<h3 className="text-xl font-bold text-gray-900 dark:text-white">
AI-Powered Resumes
</h3>
<p className="mt-2 text-sm text-gray-700 dark:text-gray-400">
Create resumes tailored to your desired job with precision and
flair.
</p>
</div>
<div className="p-6 bg-white dark:bg-gray-800 rounded-xl shadow-lg transition-transform
hover:scale-105">
<h3 className="text-xl font-bold text-gray-900 dark:text-white">
Mock Interviews
</h3>
<p className="mt-2 text-sm text-gray-700 dark:text-gray-400">
Practice realistic interviews and get detailed instant feedback.
</p>
</div>
</div>
{/* Call to Action Button */}
<button
onClick={() => {
router.push("/dashboard");
}}
className="mt-8 bg-gradient-to-r from-blue-500 to-indigo-500 dark:from-blue-600 dark:to-indigo-
600 text-white font-semibold rounded-full px-8 py-4 text-lg md:text-xl shadow-lg hover:opacity-90
transition"
3
>
Let's Get Started
</button>
{/* Decorative Elements */}
<div className="absolute top-10 left-10 w-32 h-32 bg-blue-300 dark:bg-blue-700 rounded-full blur-xl
opacity-50 animate-pulse"></div>
<div className="absolute bottom-10 right-10 w-40 h-40 bg-pink-300 dark:bg-pink-700 rounded-full
blur-xl opacity-50 animate-pulse"></div>
</div>
);
};
export default Home;
"USE CLIENT";
IMPORT REACT FROM "REACT";
IMPORT { CARD, CARDCONTENT } FROM "@/COMPONENTS/UI/CARD";
IMPORT { BUTTON } FROM "@/COMPONENTS/UI/BUTTON";
IMPORT { INPUT } FROM "@/COMPONENTS/UI/INPUT";
IMPORT {
DIALOG,
DIALOGCONTENT,
DIALOGHEADER,
DIALOGTITLE,
} FROM "@/COMPONENTS/UI/DIALOG";
IMPORT { TEXTAREA } FROM "@/COMPONENTS/UI/TEXTAREA";
IMPORT {
SELECT,
SELECTCONTENT,
SELECTITEM,
SELECTTRIGGER,
SELECTVALUE,
} FROM "@/COMPONENTS/UI/SELECT";
IMPORT LINK FROM "NEXT/LINK";
IMPORT { USESTATE } FROM "REACT";
IMPORT { V4 AS UUIDV4 } FROM "UUID";
IMPORT AXIOS FROM "AXIOS";
IMPORT { USEROUTER } FROM "NEXT/NAVIGATION";
IMPORT USESTORE FROM "../../STORE/ZUSTAND.STORE";
IMPORT { USETOAST } FROM "@/HOOKS/USE-TOAST";
IMPORT { CHATSESSION } FROM "../../CONFIG/GEMINI.CONFIG";
IMPORT { USEEFFECT } FROM "REACT";
// DEFINE AN ARRAY OF GRADIENT CLASSES
CONST GRADIENTCOLORS = [
"BG-GRADIENT-TO-BR FROM-PINK-200 TO-PINK-400 DARK:FROM-PINK-500 DARK:TO-PINK-700",
"BG-GRADIENT-TO-BR FROM-BLUE-200 TO-BLUE-400 DARK:FROM-BLUE-500 DARK:TO-BLUE-700",
"BG-GRADIENT-TO-BR FROM-TEAL-200 TO-TEAL-400 DARK:FROM-TEAL-500 DARK:TO-TEAL-700",
"BG-GRADIENT-TO-BR FROM-PURPLE-200 TO-PURPLE-400 DARK:FROM-PURPLE-500 DARK:TO-PURPLE-700",
"BG-GRADIENT-TO-BR FROM-ORANGE-200 TO-ORANGE-400 DARK:FROM-ORANGE-500 DARK:TO-ORANGE-700",
];
INTERFACE INTERVIEWCARDPROPS {
TITLE: STRING;
DESCRIPTION: STRING;
ONRETAKE: () => VOID;
ONFEEDBACK: () => VOID;
4
GRADIENT: STRING;
CONST INTERVIEWCARD = ({
TITLE,
DESCRIPTION,
ONRETAKE,
ONFEEDBACK,
GRADIENT,
}: INTERVIEWCARDPROPS) => (
<CARD
CLASSNAME={`HOVER:SHADOW-XL TRANSFORM HOVER:SCALE-105 TRANSITION-ALL DURATION-300 ${GRADIENT}`}
>
<CARDCONTENT CLASSNAME="P-6 MIN-H-[240PX] FLEX FLEX-COL JUSTIFY-BETWEEN">
<DIV>
<H3 CLASSNAME="TEXT-XL FONT-BOLD TEXT-GRAY-900 DARK:TEXT-WHITE">
{TITLE}
</H3>
<P CLASSNAME="TEXT-SM TEXT-GRAY-700 DARK:TEXT-GRAY-300 MT-2">
{DESCRIPTION}
</P>
</DIV>
<DIV CLASSNAME="FLEX SPACE-X-4 MT-6">
<BUTTON
CLASSNAME="BG-GRAY-800 TEXT-WHITE HOVER:BG-GRAY-700 DARK:BG-GRAY-300 DARK:TEXT-GRAY-900
DARK:HOVER:BG-GRAY-400"
ONCLICK={ONRETAKE}
>
RETAKE
</BUTTON>
<BUTTON
CLASSNAME="BG-GRAY-800 TEXT-WHITE HOVER:BG-GRAY-700 DARK:BG-GRAY-300 DARK:TEXT-GRAY-900
DARK:HOVER:BG-GRAY-400"
ONCLICK={ONFEEDBACK}
>
CHECK FEEDBACK
</BUTTON>
</DIV>
</CARDCONTENT>
</CARD>
);
CONST CREATENEWINTERVIEWCARD = ({ SETISMODALOPEN }) => {
RETURN (
<CARD CLASSNAME="HOVER:SHADOW-XL TRANSFORM HOVER:SCALE-105 TRANSITION-ALL DURATION-300 BG-
GRADIENT-TO-R FROM-GRAY-700 VIA-GRAY-500 TO-GRAY-400">
<CARDCONTENT CLASSNAME="P-6 MIN-H-[240PX] FLEX FLEX-COL JUSTIFY-CENTER ITEMS-CENTER TEXT-CENTER">
<H3 CLASSNAME="TEXT-LG FONT-SEMIBOLD TEXT-WHITE DARK:TEXT-BLACK">
CREATE A NEW INTERVIEW
</H3>
<BUTTON
ONCLICK={() => SETISMODALOPEN(TRUE)}
CLASSNAME="MT-4 BG-GREEN-500 HOVER:BG-GREEN-600 TEXT-WHITE"
>
CREATE NOW
</BUTTON>
5
</CARDCONTENT>
</CARD>
);
};
CONST INTERVIEWPAGE = () => {
// FUNCTION TO PICK A RANDOM GRADIENT
CONST ROUTER = USEROUTER();
CONST { TOAST } = USETOAST();
CONST { UUID, EMAIL } = USESTORE();
CONST GETRANDOMGRADIENT = () =>
GRADIENTCOLORS[MATH.FLOOR(MATH.RANDOM() * GRADIENTCOLORS.LENGTH)];
CONST [ISMODALOPEN, SETISMODALOPEN] = USESTATE<BOOLEAN>(FALSE);
CONST [CURRENTSTEP, SETCURRENTSTEP] = USESTATE(1);
CONST [NEWINTERVIEW, SETNEWINTERVIEW] = USESTATE({
TITLE: "",
DESCRIPTION: "",
SKILLS: "",
TYPE: "",
LOCATION: "",
SALARY: "",
EXPERIENCE: "",
});
CONST [ISSUBMITTING, SETISSUBMITTING] = USESTATE(FALSE);
CONST [INTERVIEWS, SETINTERVIEWS] = USESTATE([]);
USEEFFECT(() => {
CONST FETCHINTERVIEWS = ASYNC () => {
TRY {
CONST RESPONSE = AWAIT AXIOS.GET(
`${PROCESS.ENV.NEXT_PUBLIC_NODE_BACKEND_URL}/API/V1/INTERVIEWS/${UUID}`
);
CONSOLE.LOG("INTERVIEWS FETCHING", RESPONSE.DATA);
CONST INTERVIEWSWITHGRADIENT = RESPONSE.DATA.MAP((INTERVIEW) => ({
...INTERVIEW,
GRADIENT: GETRANDOMGRADIENT(),
}));
SETINTERVIEWS(INTERVIEWSWITHGRADIENT);
} CATCH (ERROR) {
TOAST({
TITLE: "ERROR",
DESCRIPTION: "FAILED TO FETCH INTERVIEWS",
VARIANT: "DESTRUCTIVE",
});
}
};
FETCHINTERVIEWS();
}, []);
CONST HANDLENEXT = () => SETCURRENTSTEP((PREV) => PREV + 1);
CONST HANDLEBACK = () => SETCURRENTSTEP((PREV) => PREV - 1);
CONST HANDLECREATEINTERVIEW = ASYNC (E) => {
E.PREVENTDEFAULT();
6
SETISSUBMITTING(TRUE);
IF (
!NEWINTERVIEW.TITLE ||
!NEWINTERVIEW.DESCRIPTION ||
!NEWINTERVIEW.SKILLS ||
!NEWINTERVIEW.TYPE ||
!NEWINTERVIEW.LOCATION ||
!NEWINTERVIEW.SALARY ||
!NEWINTERVIEW.EXPERIENCE
){
SETISSUBMITTING(FALSE);
TOAST({
TITLE: "ERROR",
DESCRIPTION: "ALL FIELDS ARE REQUIRED",
VARIANT: "DESTRUCTIVE",
});
RETURN;
}
TRY {
CONST INTERVIEWID = UUIDV4();
AWAIT AXIOS.POST(
`${PROCESS.ENV.NEXT_PUBLIC_NODE_BACKEND_URL}/API/V1/INTERVIEWS/CREATE`,
{
INTERVIEWID,
UUID,
...NEWINTERVIEW,
}
);
//SECOND API CALL THIS ONE IS TO GEENRATE AI INTERVIEW QUESTIONS AND SAVE IT TO DB
CONST PROMPT = `GENERATE TOP 4 INTERVIEW QUESTION IN THE ARRAY OF JSON FORM ALONG WITH THE ANSWERS
FOR THE JOB ROLE OF ${NEWINTERVIEW.TITLE}. THE JOB DESCRIPTION IS ${NEWINTERVIEW.DESCRIPTION}. THE SKILLS
REQUIRED ARE ${NEWINTERVIEW.SKILLS}. THE JOB TYPE IS ${NEWINTERVIEW.TYPE},LOCATION IS
${NEWINTERVIEW.LOCATION} AND THE SALARY IS ${NEWINTERVIEW.SALARY}. THE EXPERIENCE REQUIRED IS
${NEWINTERVIEW.EXPERIENCE}.TRY TO GIVE THE RESPONSE AS AN ARRAY CONTAINING OBJECTS THE OBJECTS SHOULD BE
LIKE THIS
QUESTIONID: A UNIQUE QUESTION ID FOR EACH QUESTION IN FORM OF STRING ,
QUESTION: THE GENERATED QUESTION,
SAMPLEANSWER: SAMPLE ANSWER FOR GENERATED QUESTION,
USERANSWER: LEAVE THIS FIELD AS BLANK WITH VALUE AS "",
FEEDBACK: LEAVE THIS AS EMPTY TOO`;
CONST RESULT = AWAIT CHATSESSION.SENDMESSAGE(PROMPT);
CONST MOCKJSONRESPONSE = RESULT.RESPONSE
.TEXT()
.REPLACE("```JSON", "")
.REPLACE("```", "");
CONST RES = AWAIT AXIOS.POST(
`${PROCESS.ENV.NEXT_PUBLIC_NODE_BACKEND_URL}/API/V1/INTERVIEWS/SAVEINTERVIEWQUESTIONS`,
{
INTERVIEWID,
UUID,
QUESTIONS: JSON.PARSE(MOCKJSONRESPONSE),
}
);
7
CONSOLE.LOG(RES);
IF (RES) ROUTER.REPLACE(`/INTERVIEW/${INTERVIEWID}/START`);
// AWAIT AXIOS.POST(
// `${PROCESS.ENV.NEXT_PUBLIC_NODE_BACKEND_URL}/API/V1/COINS/REDUCE`,
// { EMAIL }
// );
SETISSUBMITTING(FALSE);
SETNEWINTERVIEW({
TITLE: "",
DESCRIPTION: "",
SKILLS: "",
TYPE: "",
LOCATION: "",
SALARY: "",
EXPERIENCE: "",
});
SETISMODALOPEN(FALSE);
SETCURRENTSTEP(1);
} CATCH (ERROR) {
TOAST({
TITLE: "ERROR",
DESCRIPTION: ERROR.MESSAGE,
VARIANT: "DESTRUCTIVE",
});
} FINALLY {
SETISSUBMITTING(FALSE);
}
};
CONST STEPCONTENT = [
{
TITLE: "BASIC INFORMATION",
CONTENT: (
<>
<INPUT
TYPE="TEXT"
PLACEHOLDER="ENTER INTERVIEW TITLE"
VALUE={NEWINTERVIEW.TITLE}
ONCHANGE={(E) =>
SETNEWINTERVIEW({ ...NEWINTERVIEW, TITLE: E.TARGET.VALUE })
}
CLASSNAME="W-FULL MB-4"
/>
<TEXTAREA
PLACEHOLDER="ENTER DESCRIPTION (MAX 1000 CHARACTERS)"
VALUE={NEWINTERVIEW.DESCRIPTION}
ONCHANGE={(E) =>
SETNEWINTERVIEW({
...NEWINTERVIEW,
DESCRIPTION: E.TARGET.VALUE.SLICE(0, 1000),
})
}
CLASSNAME="W-FULL"
/>
<P CLASSNAME="TEXT-SM TEXT-GRAY-500 DARK:TEXT-GRAY-400 MT-1">
8
{NEWINTERVIEW.DESCRIPTION.LENGTH}/1000 CHARACTERS
</P>
</>
),
},
{
TITLE: "SKILLS & TYPE",
CONTENT: (
<>
<INPUT
TYPE="TEXT"
PLACEHOLDER="ENTER REQUIRED SKILLS"
VALUE={NEWINTERVIEW.SKILLS}
ONCHANGE={(E) =>
SETNEWINTERVIEW({ ...NEWINTERVIEW, SKILLS: E.TARGET.VALUE })
}
CLASSNAME="W-FULL MB-4"
/>
<SELECT
ONVALUECHANGE={(VALUE) =>
SETNEWINTERVIEW({ ...NEWINTERVIEW, TYPE: VALUE })
}
VALUE={NEWINTERVIEW.TYPE}
>
<SELECTTRIGGER CLASSNAME="W-FULL">
<SELECTVALUE PLACEHOLDER="SELECT JOB TYPE" />
</SELECTTRIGGER>
<SELECTCONTENT CLASSNAME="DARK:BG-BLACK HOVER:CURSOR-POINTER ">
<SELECTITEM
VALUE="FULL-TIME"
CLASSNAME="Z-10 DARK:BG-GRAY-900 BG-WHITE DARK:TEXT-WHITE"
>
FULL TIME
</SELECTITEM>
<SELECTITEM
VALUE="PART-TIME"
CLASSNAME="Z-10 DARK:BG-GRAY-900 BG-WHITE DARK:TEXT-WHITE"
>
PART TIME
</SELECTITEM>
<SELECTITEM
VALUE="INTERNSHIP"
CLASSNAME="Z-10 DARK:BG-GRAY-900 BG-WHITE DARK:TEXT-WHITE"
>
INTERNSHIP
</SELECTITEM>
</SELECTCONTENT>
</SELECT>
</>
),
},
{
TITLE: "LOCATION & SALARY",
CONTENT: (
<>
<SELECT
ONVALUECHANGE={(VALUE) =>
9
SETNEWINTERVIEW({ ...NEWINTERVIEW, LOCATION: VALUE })
}
VALUE={NEWINTERVIEW.LOCATION}
CLASSNAME="MB-4"
>
<SELECTTRIGGER CLASSNAME="W-FULL">
<SELECTVALUE PLACEHOLDER="SELECT WORK LOCATION" />
</SELECTTRIGGER>
<SELECTCONTENT>
<SELECTITEM
VALUE="ONSITE"
CLASSNAME="Z-10 DARK:BG-GRAY-900 BG-WHITE DARK:TEXT-WHITE"
>
ONSITE
</SELECTITEM>
<SELECTITEM
VALUE="REMOTE"
CLASSNAME="Z-10 DARK:BG-GRAY-900 BG-WHITE DARK:TEXT-WHITE"
>
REMOTE
</SELECTITEM>
</SELECTCONTENT>
</SELECT>
<INPUT
TYPE="TEXT"
PLACEHOLDER="ENTER SALARY (E.G., 5 LPA)"
VALUE={NEWINTERVIEW.SALARY}
ONCHANGE={(E) =>
SETNEWINTERVIEW({ ...NEWINTERVIEW, SALARY: E.TARGET.VALUE })
}
CLASSNAME="W-FULL"
/>
</>
),
},
{
TITLE: "EXPERIENCE",
CONTENT: (
<SELECT
ONVALUECHANGE={(VALUE) =>
SETNEWINTERVIEW({ ...NEWINTERVIEW, EXPERIENCE: VALUE })
}
VALUE={NEWINTERVIEW.EXPERIENCE}
CLASSNAME="W-FULL"
>
<SELECTTRIGGER CLASSNAME="W-FULL MT-1">
<SELECTVALUE PLACEHOLDER="SELECT EXPERIENCE LEVEL" />
</SELECTTRIGGER>
<SELECTCONTENT>
<SELECTITEM
VALUE="0-2"
CLASSNAME="Z-10 DARK:BG-GRAY-900 BG-WHITE DARK:TEXT-WHITE"
>
0-2 YEARS
</SELECTITEM>
<SELECTITEM
VALUE="2-5"
10
CLASSNAME="Z-10 DARK:BG-GRAY-900 BG-WHITE DARK:TEXT-WHITE"
>
2-5 YEARS
</SELECTITEM>
<SELECTITEM
VALUE="5-10"
CLASSNAME="Z-10 DARK:BG-GRAY-900 BG-WHITE DARK:TEXT-WHITE"
>
5-10 YEARS
</SELECTITEM>
<SELECTITEM
VALUE="10+"
CLASSNAME="Z-10 DARK:BG-GRAY-900 BG-WHITE DARK:TEXT-WHITE"
>
10+ YEARS
</SELECTITEM>
</SELECTCONTENT>
</SELECT>
),
},
];
RETURN (
<DIV CLASSNAME="P-6">
<H2 CLASSNAME="TEXT-3XL FONT-EXTRABOLD MB-8 TEXT-GRAY-900 DARK:TEXT-WHITE">
INTERVIEWS
</H2>
<DIV CLASSNAME="GRID GAP-8 MD:GRID-COLS-2 LG:GRID-COLS-3">
{CONSOLE.LOG(INTERVIEWS)}
{INTERVIEWS.MAP((INTERVIEW) => (
<INTERVIEWCARD
KEY={INTERVIEW.ID}
TITLE={INTERVIEW.TITLE}
DESCRIPTION={INTERVIEW.DESCRIPTION}
GRADIENT={INTERVIEW.GRADIENT}
ONRETAKE={() =>
ROUTER.PUSH(`/INTERVIEW/${INTERVIEW.INTERVIEWID}/START`)
}
ONFEEDBACK={() =>
ROUTER.PUSH(`/INTERVIEW/${INTERVIEW.INTERVIEWID}/FEEDBACK`)
}
/>
))}
<CREATENEWINTERVIEWCARD SETISMODALOPEN={SETISMODALOPEN} />
</DIV>
{/* MODAL FOR CREATING INTERVIEW */}
<DIALOG OPEN={ISMODALOPEN} ONOPENCHANGE={SETISMODALOPEN}>
<DIALOGCONTENT CLASSNAME="BG-WHITE DARK:BG-GRAY-900 MAX-W-LG MX-AUTO DARK:TEXT-WHITE">
<DIALOGHEADER>
<DIALOGTITLE CLASSNAME="TEXT-LG FONT-BOLD TEXT-GRAY-900 DARK:TEXT-WHITE">
{STEPCONTENT[CURRENTSTEP - 1].TITLE}
</DIALOGTITLE>
</DIALOGHEADER>
<DIV CLASSNAME="MT-4">{STEPCONTENT[CURRENTSTEP - 1].CONTENT}</DIV>
11
<DIV CLASSNAME="MT-6 FLEX JUSTIFY-BETWEEN">
{CURRENTSTEP > 1 && (
<BUTTON VARIANT="OUTLINE" ONCLICK={HANDLEBACK}>
BACK
</BUTTON>
)}
{CURRENTSTEP < STEPCONTENT.LENGTH ? (
<BUTTON
ONCLICK={HANDLENEXT}
CLASSNAME="BG-BLUE-600 DARK:BG-BLUE-500 TEXT-WHITE HOVER:BG-BLUE-700 DARK:HOVER:BG-BLUE-
600"
>
NEXT
</BUTTON>
):(
<BUTTON
ONCLICK={HANDLECREATEINTERVIEW}
DISABLED={ISSUBMITTING}
CLASSNAME="BG-BLUE-600 DARK:BG-BLUE-500 TEXT-WHITE HOVER:BG-BLUE-700 DARK:HOVER:BG-BLUE-
600"
>
{ISSUBMITTING ? (
<>
{" "}
<SPAN CLASSNAME="FLEX ITEMS-CENTER JUSTIFY-CENTER SPACE-X-2">
<SVG CLASSNAME="ANIMATE-SPIN H-5 W-5" VIEWBOX="0 0 24 24">
<CIRCLE
CLASSNAME="OPACITY-25"
CX="12"
CY="12"
R="10"
STROKE="CURRENTCOLOR"
STROKEWIDTH="4"
FILL="NONE"
/>
<PATH
CLASSNAME="OPACITY-75"
FILL="CURRENTCOLOR"
D="M4 12A8 8 0 018-8V0C5.373 0 0 5.373 0 12H4ZM2 5.291A7.962 7.962 0 014 12H0C0 3.042
1.135 5.824 3 7.938L3-2.647Z"
/>
</SVG>
</SPAN>
GENERATING.....
</>
):(
"SUBMIT"
)}
</BUTTON>
)}
</DIV>
</DIALOGCONTENT>
</DIALOG>
</DIV>
12
);
};
EXPORT DEFAULT INTERVIEWPAGE;
"USE CLIENT";
IMPORT REACT, { USESTATE, USEEFFECT } FROM "REACT";
IMPORT RESUMESECTION FROM "../_COMPONENTS/RESUMESECTION";
IMPORT FORMSECTION FROM "../_COMPONENTS/FORMSECTION";
IMPORT DATA FROM "../_COMPONENTS/DATA";
INTERFACE AIRESUMEEDITPAGEPROPS {
PARAMS: {
RESUMEID: STRING;
};
}
INTERFACE RESUMEINFO {
FIRSTNAME: STRING;
LASTNAME: STRING;
JOBTITLE: STRING;
ADDRESS: STRING;
PHONE: STRING;
EMAIL: STRING;
SUMMARY: STRING;
SELECTEDFORMAT: "MODERN PROFESSIONAL" | "TRADITIONAL CHRONOLOGICAL" | "DEEDY";
SKIPEXPERIENCE: BOOLEAN;
EXPERIENCE: ARRAY<{
ID: NUMBER;
TITLE: STRING;
COMPANY: STRING;
LOCATION: STRING;
STARTDATE: STRING;
ENDDATE: STRING;
CURRENTLYWORKING: BOOLEAN;
WORKSUMMARY: STRING;
}>;
SKIPEDUCATION: BOOLEAN;
EDUCATION: ARRAY<{
ID: NUMBER;
UNIVERSITYNAME: STRING;
STARTDATE: STRING;
ENDDATE: STRING;
DEGREE: STRING;
MAJOR: STRING;
DESCRIPTION: STRING;
}>;
SKIPSKILLS: BOOLEAN;
SKILLS: ARRAY<{
ID: NUMBER;
NAME: STRING;
RATING: NUMBER;
}>;
13
OUTPUT
14
15
16
17
CONCLUSION
The development of Interview Genie, a comprehensive fitness
management and tracking application, marks the culmination of
meticulous planning, technological innovation, and dedicated
teamwork. Throughout this project, the integration of Visual
Studio Code, MongoDB, Node.js, React.js, CSS, and HTML served as
the foundational pillars in creating a versatile and user-centric
platform tailored to meet diverse fitness needs.
The frontend, developed using React.js along with CSS and HTML,
not only ensures a visually appealing interface but also enhances
performance through efficient rendering and responsive design.
These technologies, carefully chosen and implemented,
synergistically contribute to Interview Genie's success as a
holistic fitness management solution.
This project demonstrates the potential of technology in
empowering individuals on their fitness endeavors. Interview
Genie's administrative capabilities enable seamless updates and
maintenance, ensuring adaptability to evolving user preferences
and requirements.
In conclusion, Interview Genie stands as a testament to the
harmonious integration of various technologies, fostering a user-
focused fitness management platform. The project's success
highlights the potential of modern tech-stack amalgamation
in addressing contemporary lifestyle demands, ultimately
empowering users to embark on a healthier and more organized
fitness journey. The journey of Interview Genie's development
underscores the synergy between technological prowess and
user-centric design, shaping a promising future for holistic fitness
management solutions.
18
REFERENCES
Course Link:
1.Tube Guruji
2.The Bong Guy
Image Sources:
1.Google
2.GEMINI
Others:
1.StackoverFlow
2.MDN Web Docs
3.w3School
4.ChatGpt
19
