48 |
49 |
117 |
118 | );
119 | };
120 |
--------------------------------------------------------------------------------
/src/components/form-mock-interview.tsx:
--------------------------------------------------------------------------------
1 | import { z } from "zod";
2 | import { zodResolver } from "@hookform/resolvers/zod";
3 | import { FormProvider, useForm } from "react-hook-form";
4 |
5 | import { Interview } from "@/types";
6 |
7 | import { CustomBreadCrumb } from "./custom-bread-crumb";
8 | import { useEffect, useState } from "react";
9 | import { useNavigate } from "react-router-dom";
10 | import { useAuth } from "@clerk/clerk-react";
11 | import { toast } from "sonner";
12 | import { Headings } from "./headings";
13 | import { Button } from "./ui/button";
14 | import { Loader, Trash2 } from "lucide-react";
15 | import { Separator } from "./ui/separator";
16 | import {
17 | FormControl,
18 | FormField,
19 | FormItem,
20 | FormLabel,
21 | FormMessage,
22 | } from "./ui/form";
23 | import { Input } from "./ui/input";
24 | import { Textarea } from "./ui/textarea";
25 | import { chatSession } from "@/scripts";
26 | import {
27 | addDoc,
28 | collection,
29 | doc,
30 | serverTimestamp,
31 | updateDoc,
32 | } from "firebase/firestore";
33 | import { db } from "@/config/firebase.config";
34 |
35 | interface FormMockInterviewProps {
36 | initialData: Interview | null;
37 | }
38 |
39 | const formSchema = z.object({
40 | position: z
41 | .string()
42 | .min(1, "Position is required")
43 | .max(100, "Position must be 100 characters or less"),
44 | description: z.string().min(10, "Description is required"),
45 | experience: z.coerce
46 | .number()
47 | .min(0, "Experience cannot be empty or negative"),
48 | techStack: z.string().min(1, "Tech stack must be at least a character"),
49 | });
50 |
51 | type FormData = z.infer
50 | {/* First Column: Links */}
51 |
116 |
52 |
61 |
62 | {/* Second Column: About Us */}
63 | Quick Links
53 |-
54 | {MainRoutes.map((route) => (
55 |
64 |
71 |
72 | {/* Third Column: Services */}
73 | About Us
65 |66 | We are committed to helping you unlock your full potential with 67 | AI-powered tools. Our platform offers a wide range of resources to 68 | improve your interview skills and chances of success. 69 |
70 |
74 |
87 |
88 | {/* Fourth Column: Address and Social Media */}
89 | Services
75 |-
76 |
90 |
115 | Contact Us
91 |123 AI Street, Tech City, 12345
92 |
93 |
114 |
177 |
197 |
312 |
313 |
314 | );
315 | };
316 |
--------------------------------------------------------------------------------
/src/components/generate.tsx:
--------------------------------------------------------------------------------
1 | import { Outlet } from "react-router-dom";
2 |
3 | export const Generate = () => {
4 | return (
5 |
183 |
191 |
192 |
6 |
8 | );
9 | };
10 |
--------------------------------------------------------------------------------
/src/components/header.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from "@/lib/utils";
2 | import { useAuth } from "@clerk/clerk-react";
3 | import { Container } from "./container";
4 | import { LogoContainer } from "./logo-container";
5 | import { NavigationRoutes } from "./navigation-routes";
6 | import { NavLink } from "react-router-dom";
7 | import { ProfileContainer } from "./profile-container";
8 | import { ToggleContainer } from "./toggle-container";
9 |
10 | const Header = () => {
11 | const { userId } = useAuth();
12 |
13 | return (
14 |
19 | {/* logo section */}
20 |
48 |
41 | {/* profile section */}
42 |
47 |
16 |
28 | );
29 | };
30 |
--------------------------------------------------------------------------------
/src/components/logo-container.tsx:
--------------------------------------------------------------------------------
1 | import { Link } from "react-router-dom";
2 |
3 | export const LogoContainer = () => {
4 | return (
5 |
6 | 22 | {title} 23 |
24 | {description && ( 25 |{description}
26 | )} 27 |
11 |
12 | );
13 | };
14 |
--------------------------------------------------------------------------------
/src/components/marquee-img.tsx:
--------------------------------------------------------------------------------
1 | export const MarqueImg = ({ img }: { img: string }) => {
2 | return (
3 | -
19 | {MainRoutes.map((route) => (
20 |
30 | {interview?.techStack.split(",").map((word, index) => (
31 |
36 | {word}
37 |
38 | ))}
39 |
40 |
41 | 48 | {`${new Date(interview?.createdAt.toDate()).toLocaleDateString( 49 | "en-US", 50 | { dateStyle: "long" } 51 | )} - ${new Date(interview?.createdAt.toDate()).toLocaleTimeString( 52 | "en-US", 53 | { timeStyle: "short" } 54 | )}`} 55 |
56 | 57 | {!onMockPage && ( 58 |
59 | {
63 | navigate(`/generate/${interview?.id}`, { replace: true });
64 | }}
65 | disbaled={false}
66 | buttonClassName="hover:text-sky-500"
67 | icon={ {
75 | navigate(`/generate/feedback/${interview?.id}`, {
76 | replace: true,
77 | });
78 | }}
79 | disbaled={false}
80 | buttonClassName="hover:text-yellow-500"
81 | icon={ {
89 | navigate(`/generate/interview/${interview?.id}`, {
90 | replace: true,
91 | });
92 | }}
93 | disbaled={false}
94 | buttonClassName="hover:text-sky-500"
95 | icon={
99 | )}
100 |
12 |
14 | );
15 | }
16 |
17 | return (
18 |
19 | {isSignedIn ? (
20 |
27 | );
28 | };
29 |
--------------------------------------------------------------------------------
/src/components/question-section.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 | import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
3 | import { cn } from "@/lib/utils";
4 | import { TooltipButton } from "./tooltip-button";
5 | import { Volume2, VolumeX } from "lucide-react";
6 | import { RecordAnswer } from "./record-answer";
7 |
8 | interface QuestionSectionProps {
9 | questions: { question: string; answer: string }[];
10 | }
11 |
12 | export const QuestionSection = ({ questions }: QuestionSectionProps) => {
13 | const [isPlaying, setIsPlaying] = useState(false);
14 | const [isWebCam, setIsWebCam] = useState(false);
15 |
16 | const [currentSpeech, setCurrentSpeech] =
17 | useState
43 |
48 |
49 | {questions?.map((tab, i) => (
50 |
57 | {`Question #${i + 1}`}
58 |
59 | ))}
60 |
61 |
62 | {questions?.map((tab, i) => (
63 |
64 |
88 | ))}
89 |
90 |
91 | );
92 | };
93 |
--------------------------------------------------------------------------------
/src/components/record-answer.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable @typescript-eslint/no-unused-vars */
2 | import { useAuth } from "@clerk/clerk-react";
3 | import {
4 | CircleStop,
5 | Loader,
6 | Mic,
7 | RefreshCw,
8 | Save,
9 | Video,
10 | VideoOff,
11 | WebcamIcon,
12 | } from "lucide-react";
13 | import { useEffect, useState } from "react";
14 | import useSpeechToText, { ResultType } from "react-hook-speech-to-text";
15 | import { useParams } from "react-router-dom";
16 | import WebCam from "react-webcam";
17 | import { TooltipButton } from "./tooltip-button";
18 | import { toast } from "sonner";
19 | import { chatSession } from "@/scripts";
20 | import { SaveModal } from "./save-modal";
21 | import {
22 | addDoc,
23 | collection,
24 | getDocs,
25 | query,
26 | serverTimestamp,
27 | where,
28 | } from "firebase/firestore";
29 | import { db } from "@/config/firebase.config";
30 |
31 | interface RecordAnswerProps {
32 | question: { question: string; answer: string };
33 | isWebCam: boolean;
34 | setIsWebCam: (value: boolean) => void;
35 | }
36 |
37 | interface AIResponse {
38 | ratings: number;
39 | feedback: string;
40 | }
41 |
42 | export const RecordAnswer = ({
43 | question,
44 | isWebCam,
45 | setIsWebCam,
46 | }: RecordAnswerProps) => {
47 | const {
48 | interimResult,
49 | isRecording,
50 | results,
51 | startSpeechToText,
52 | stopSpeechToText,
53 | } = useSpeechToText({
54 | continuous: true,
55 | useLegacyResults: false,
56 | });
57 |
58 | const [userAnswer, setUserAnswer] = useState("");
59 | const [isAiGenerating, setIsAiGenerating] = useState(false);
60 | const [aiResult, setAiResult] = useState65 | {tab.question} 66 |
67 | 68 |
69 |
81 |
82 |
212 | {/* save modal */}
213 | setOpen(false)}
216 | onConfirm={saveUserAnswer}
217 | loading={loading}
218 | />
219 |
220 |
292 | );
293 | };
294 |
--------------------------------------------------------------------------------
/src/components/save-modal.tsx:
--------------------------------------------------------------------------------
1 | import Modal from "./modal";
2 | import { Button } from "./ui/button";
3 |
4 | interface SaveModalProps {
5 | isOpen: boolean;
6 | onClose: () => void;
7 | onConfirm: () => void;
8 | loading: boolean;
9 | }
10 |
11 | export const SaveModal = ({
12 | isOpen,
13 | onClose,
14 | onConfirm,
15 | loading,
16 | }: SaveModalProps) => {
17 | return (
18 |
221 | {isWebCam ? (
222 | setIsWebCam(true)}
224 | onUserMediaError={() => setIsWebCam(false)}
225 | className="w-full h-full object-cover rounded-md"
226 | />
227 | ) : (
228 |
231 |
232 |
233 |
276 |
277 |
278 |
291 | Your Answer:
279 | 280 |281 | {userAnswer || "Start recording to see your ansewer here"} 282 |
283 | 284 | {interimResult && ( 285 |286 | Current Speech: 287 | {interimResult} 288 |
289 | )} 290 |
25 |
28 |
35 |
36 | {loading ? "Loading..." : content}
64 |{children}
51 | 161 | {body} 162 |
163 | ) 164 | }) 165 | FormMessage.displayName = "FormMessage" 166 | 167 | export { 168 | useFormField, 169 | Form, 170 | FormItem, 171 | FormLabel, 172 | FormControl, 173 | FormDescription, 174 | FormMessage, 175 | FormField, 176 | } 177 | -------------------------------------------------------------------------------- /src/components/ui/input.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | 3 | import { cn } from "@/lib/utils" 4 | 5 | const Input = React.forwardRef
6 | 
11 |
13 | );
14 | };
15 |
16 | export default AuthenticationLayout;
17 |
--------------------------------------------------------------------------------
/src/layouts/main-layout.tsx:
--------------------------------------------------------------------------------
1 | import { Container } from "@/components/container";
2 | import { Footer } from "@/components/footer";
3 |
4 | import Header from "@/components/header";
5 | import { Outlet } from "react-router-dom";
6 |
7 | export const MainLayout = () => {
8 | return (
9 |
11 |
10 |
13 |
14 |
16 |
17 |
18 |
19 |
20 | );
21 | };
22 |
--------------------------------------------------------------------------------
/src/layouts/protected-routes.tsx:
--------------------------------------------------------------------------------
1 | import { LoaderPage } from "@/routes/loader-page";
2 | import { useAuth } from "@clerk/clerk-react";
3 | import { Navigate } from "react-router-dom";
4 |
5 | const ProtectRoutes = ({ children }: { children: React.ReactNode }) => {
6 | const { isLoaded, isSignedIn } = useAuth();
7 |
8 | if (!isLoaded) {
9 | return
9 | {/* handler to store the user data */}
10 |
17 | );
18 | };
19 |
--------------------------------------------------------------------------------
/src/lib/helpers.ts:
--------------------------------------------------------------------------------
1 | export const MainRoutes = [
2 | {
3 | label: "Home",
4 | href: "/",
5 | },
6 | {
7 | label: "Contact Us",
8 | href: "/contact",
9 | },
10 | {
11 | label: "About Us",
12 | href: "/about",
13 | },
14 | {
15 | label: "Services",
16 | href: "/services",
17 | },
18 | ];
19 |
--------------------------------------------------------------------------------
/src/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { clsx, type ClassValue } from "clsx"
2 | import { twMerge } from "tailwind-merge"
3 |
4 | export function cn(...inputs: ClassValue[]) {
5 | return twMerge(clsx(inputs))
6 | }
7 |
--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
1 | import { StrictMode } from "react";
2 | import { createRoot } from "react-dom/client";
3 |
4 | import { ClerkProvider } from "@clerk/clerk-react";
5 |
6 | import "./index.css";
7 | import App from "./App.tsx";
8 | import { ToasterProvider } from "./provider/toast-provider.tsx";
9 |
10 | // Import your Publishable Key
11 | const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY;
12 |
13 | if (!PUBLISHABLE_KEY) {
14 | throw new Error("Missing Publishable Key");
15 | }
16 |
17 | createRoot(document.getElementById("root")!).render(
18 |
34 |
36 | );
37 | };
38 |
--------------------------------------------------------------------------------
/src/routes/dashboard.tsx:
--------------------------------------------------------------------------------
1 | import { Headings } from "@/components/headings";
2 | import { InterviewPin } from "@/components/pin";
3 | import { Button } from "@/components/ui/button";
4 | import { Separator } from "@/components/ui/separator";
5 | import { Skeleton } from "@/components/ui/skeleton";
6 | import { db } from "@/config/firebase.config";
7 | import { Interview } from "@/types";
8 | import { useAuth } from "@clerk/clerk-react";
9 | import { collection, onSnapshot, query, where } from "firebase/firestore";
10 | import { Plus } from "lucide-react";
11 | import { useEffect, useState } from "react";
12 | import { Link } from "react-router-dom";
13 | import { toast } from "sonner";
14 |
15 | export const Dashboard = () => {
16 | const [interviews, setInterviews] = useState
55 | {/* headings */}
56 |
66 |
67 |
71 | {loading ? (
72 | Array.from({ length: 6 }).map((_, index) => (
73 |
105 |
106 | );
107 | };
108 |
--------------------------------------------------------------------------------
/src/routes/feedback.tsx:
--------------------------------------------------------------------------------
1 | import { db } from "@/config/firebase.config";
2 | import { Interview, UserAnswer } from "@/types";
3 | import { useAuth } from "@clerk/clerk-react";
4 | import {
5 | collection,
6 | doc,
7 | getDoc,
8 | getDocs,
9 | query,
10 | where,
11 | } from "firebase/firestore";
12 | import { useEffect, useMemo, useState } from "react";
13 | import { useNavigate, useParams } from "react-router-dom";
14 | import { toast } from "sonner";
15 | import { LoaderPage } from "./loader-page";
16 | import { CustomBreadCrumb } from "@/components/custom-bread-crumb";
17 | import { Headings } from "@/components/headings";
18 | import { InterviewPin } from "@/components/pin";
19 | import {
20 | Accordion,
21 | AccordionContent,
22 | AccordionItem,
23 | AccordionTrigger,
24 | } from "@/components/ui/accordion";
25 | import { cn } from "@/lib/utils";
26 | import { CircleCheck, Star } from "lucide-react";
27 | import { Card, CardDescription, CardTitle } from "@/components/ui/card";
28 |
29 | export const Feedback = () => {
30 | const { interviewId } = useParams<{ interviewId: string }>();
31 | const [interview, setInterview] = useState
81 | 
86 |
87 |
103 | )}
104 |
86 |
87 | 88 | No Data Found 89 |
90 | 91 |92 | There is no available data to show. Please add some new mock 93 | interviews 94 |
95 | 96 | 97 | 101 | 102 |
110 |
141 | {feedbacks.map((feed) => (
142 |
147 | setActiveFeed(feed.id)}
149 | className={cn(
150 | "px-5 py-3 flex items-center justify-between text-base rounded-t-lg transition-colors hover:no-underline",
151 | activeFeed === feed.id
152 | ? "bg-gradient-to-r from-purple-50 to-blue-50"
153 | : "hover:bg-gray-50"
154 | )}
155 | >
156 | {feed.question}
157 |
158 |
159 |
160 |
166 |
167 |
170 |
171 |
172 | {feed.correct_ans}
173 |
174 |
175 |
176 |
177 |
178 |
181 |
182 |
183 | {feed.user_ans}
184 |
185 |
186 |
187 |
188 |
189 |
192 |
193 |
194 | {feed.feedback}
195 |
196 |
197 |
198 |
199 | ))}
200 |
201 | )}
202 |
203 | );
204 | };
205 |
--------------------------------------------------------------------------------
/src/routes/home.tsx:
--------------------------------------------------------------------------------
1 | import { Sparkles } from "lucide-react";
2 | import Marquee from "react-fast-marquee";
3 |
4 | import { Container } from "@/components/container";
5 | import { Button } from "@/components/ui/button";
6 | import { MarqueImg } from "@/components/marquee-img";
7 | import { Link } from "react-router-dom";
8 |
9 | const HomePage = () => {
10 | return (
11 |
111 |
122 |
123 | 129 | Your overall interview ratings :{" "} 130 | 131 | {overAllRating} / 10 132 | 133 |
134 | 135 | {interview &&
161 |
164 |
165 |
12 |
13 |
72 |
73 | {/* marquee section */}
74 |
88 |
117 |
118 | );
119 | };
120 |
121 | export default HomePage;
122 |
--------------------------------------------------------------------------------
/src/routes/loader-page.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from "@/lib/utils";
2 | import { Loader } from "lucide-react";
3 |
4 | export const LoaderPage = ({ className }: { className?: string }) => {
5 | return (
6 |
14 |
15 |
16 | AI Superpower
17 |
18 |
19 | - A better way to
20 |
21 |
24 |
25 |
31 |
32 |
15 |
16 | AI Superpower
17 |
18 |
19 | - A better way to
20 |
21 |
22 | improve your interview chances and skills
23 |
24 |
25 | 26 | Boost your interview skills and increase your success rate with 27 | AI-driven insights. Discover a smarter way to prepare, practice, and 28 | stand out. 29 |
30 |
33 |
46 |
47 | {/* image section */}
48 | 34 | 250k+ 35 | 36 | Offers Recieved 37 | 38 |
39 |40 | 1.2M+ 41 | 42 | Interview Aced 43 | 44 |
45 |
49 | 
54 |
55 |
71 |
54 |
55 |
56 | Inteviews Copilot©
57 |
58 |
59 |
60 |
70 | Developer
61 |62 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam 63 | distinctio natus, quos voluptatibus magni sapiente. 64 |
65 | 66 | 69 |
75 |
85 |
86 |
87 | 89 | Unleash your potential with personalized AI insights and targeted 90 | interview practice. 91 |
92 | 93 |
94 |
116 |
95 | 
100 |
101 |
102 |
100 |
103 |
115 | 104 | Transform the way you prepare, gain confidence, and boost your 105 | chances of landing your dream job. Let AI be your edge in 106 | today's competitive job market. 107 |
108 | 109 | 110 | 113 | 114 |
12 |
14 | );
15 | };
16 |
--------------------------------------------------------------------------------
/src/routes/mock-interview-page.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable @typescript-eslint/no-unused-vars */
2 | import { Interview } from "@/types";
3 | import { useEffect, useState } from "react";
4 | import { useNavigate, useParams } from "react-router-dom";
5 | import { LoaderPage } from "./loader-page";
6 | import { doc, getDoc } from "firebase/firestore";
7 | import { db } from "@/config/firebase.config";
8 | import { CustomBreadCrumb } from "@/components/custom-bread-crumb";
9 |
10 | import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
11 | import { Lightbulb } from "lucide-react";
12 | import { QuestionSection } from "@/components/question-section";
13 |
14 | export const MockInterviewPage = () => {
15 | const { interviewId } = useParams<{ interviewId: string }>();
16 | const [interview, setInterview] = useState
59 |
97 | );
98 | };
99 |
--------------------------------------------------------------------------------
/src/routes/mock-load-page.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable @typescript-eslint/no-unused-vars */
2 | import { db } from "@/config/firebase.config";
3 | import { Interview } from "@/types";
4 | import { doc, getDoc } from "firebase/firestore";
5 | import { useEffect, useState } from "react";
6 | import { Link, useNavigate, useParams } from "react-router-dom";
7 | import { LoaderPage } from "./loader-page";
8 | import { CustomBreadCrumb } from "@/components/custom-bread-crumb";
9 | import { Button } from "@/components/ui/button";
10 | import { Lightbulb, Sparkles, WebcamIcon } from "lucide-react";
11 | import { InterviewPin } from "@/components/pin";
12 | import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
13 | import WebCam from "react-webcam";
14 |
15 | export const MockLoadPage = () => {
16 | const { interviewId } = useParams<{ interviewId: string }>();
17 | const [interview, setInterview] = useState
71 |
72 |
89 |
90 |
91 | {interview?.questions && interview?.questions.length > 0 && (
92 |
74 |
75 | Important Note
76 |
77 |
78 | Press "Record Answer" to begin answering the question. Once you
79 | finish the interview, you'll receive feedback comparing your
80 | responses with the ideal answers.
81 |
82 |
83 | Note:{" "} 84 | Your video is never recorded.{" "} 85 | You can disable the webcam anytime if preferred. 86 |
87 |
88 | 82 |
83 | Note:{" "} 84 | Your video is never recorded.{" "} 85 | You can disable the webcam anytime if preferred. 86 |
93 |
95 | )}
96 |
60 |
76 |
93 |
94 |
114 | );
115 | };
116 |
--------------------------------------------------------------------------------
/src/routes/sign-in.tsx:
--------------------------------------------------------------------------------
1 | import { SignIn } from "@clerk/clerk-react";
2 |
3 | export const SignInPage = () => {
4 | return
61 |
72 |
73 | {interview &&
78 |
79 | Important Information
80 |
81 |
82 | Please enable your webcam and microphone to start the AI-generated
83 | mock interview. The interview consists of five questions. You’ll
84 | receive a personalized report based on your responses at the end.{" "}
85 |
86 |
87 | Note: Your video is{" "} 88 | never recorded. You can disable your webcam at any 89 | time. 90 |
91 |
92 | 86 |
87 | Note: Your video is{" "} 88 | never recorded. You can disable your webcam at any 89 | time. 90 |
95 |
107 |
108 |
96 | {isWebCamEnabled ? (
97 | setIsWebCamEnabled(true)}
99 | onUserMediaError={() => setIsWebCamEnabled(false)}
100 | className="w-full h-full object-cover rounded-md"
101 | />
102 | ) : (
103 |
106 |
109 |
112 |
113 |