diff --git a/package.json b/package.json index 082250ad..ded26275 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,8 @@ "@mdx-js/react": "^3.0.0", "@popperjs/core": "^2.11.8", "@radix-ui/react-avatar": "^1.1.7", - "@radix-ui/react-slot": "^1.2.0", + "@radix-ui/react-collapsible": "^1.1.12", + "@radix-ui/react-slot": "^1.2.3", "@tsparticles/react": "^3.0.0", "@tsparticles/slim": "^3.8.1", "@vercel/analytics": "^1.5.0", diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx new file mode 100644 index 00000000..b11f6f05 --- /dev/null +++ b/src/components/ui/badge.tsx @@ -0,0 +1,45 @@ +import * as React from "react" +import { Slot } from "@radix-ui/react-slot" +import { cva, type VariantProps } from "class-variance-authority" +import { cn } from "../../../src/lib/utils" + +const badgeVariants = cva( + "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden", + { + variants: { + variant: { + default: + "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90", + secondary: + "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90", + destructive: + "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60", + outline: + "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground", + }, + }, + defaultVariants: { + variant: "default", + }, + } +) + +function Badge({ + className, + variant, + asChild = false, + ...props +}: React.ComponentProps<"span"> & + VariantProps & { asChild?: boolean }) { + const Comp = asChild ? Slot : "span" + + return ( + + ) +} + +export { Badge, badgeVariants } diff --git a/src/components/ui/collapsible.tsx b/src/components/ui/collapsible.tsx new file mode 100644 index 00000000..385a7c27 --- /dev/null +++ b/src/components/ui/collapsible.tsx @@ -0,0 +1,31 @@ +import * as CollapsiblePrimitive from "@radix-ui/react-collapsible" +import * as React from "react" +function Collapsible({ + ...props +}: React.ComponentProps) { + return +} + +function CollapsibleTrigger({ + ...props +}: React.ComponentProps) { + return ( + + ) +} + +function CollapsibleContent({ + ...props +}: React.ComponentProps) { + return ( + + ) +} + +export { Collapsible, CollapsibleTrigger, CollapsibleContent } diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx new file mode 100644 index 00000000..c657abea --- /dev/null +++ b/src/components/ui/input.tsx @@ -0,0 +1,21 @@ +import * as React from "react" + +import { cn } from "../../../src/lib/utils" + +function Input({ className, type, ...props }: React.ComponentProps<"input">) { + return ( + + ) +} + +export { Input } diff --git a/src/css/custom.css b/src/css/custom.css index f0512874..290f5ede 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -1824,10 +1824,6 @@ html { } } -/* STAR section border fixes for dark mode */ -[data-theme="dark"] .star-border-red { - border-color: #ef4444 !important; -} /* Fix: Remove extra box/space above dropdown nav items in sidebar */ .navbar-sidebar__item, @@ -1873,14 +1869,18 @@ html { border-color: #3b82f6 !important; } -[data-theme="light"] .interview-prep-page h1, -[data-theme="light"] .interview-prep-page h2, -[data-theme="light"] .interview-prep-page h3, -[data-theme="light"] .interview-prep-page h4, -[data-theme="light"] .interview-prep-page h5, -[data-theme="light"] .interview-prep-page h6 { - color: #ffffff !important; -} + [data-theme="dark"] .star-border-yellow { + border-color: #eab308 !important; + } + + [data-theme="light"] .interview-prep-page h1, + [data-theme="light"] .interview-prep-page h2, + [data-theme="light"] .interview-prep-page h3, + [data-theme="light"] .interview-prep-page h4, + [data-theme="light"] .interview-prep-page h5, + [data-theme="light"] .interview-prep-page h6 { + color: #ffffff !important; + } .watch-video-btn { background-color: #dc2626; @@ -2018,4 +2018,69 @@ html { .explore-btn:hover{ color:white; +} + +.custom-input { + background-color: #374151; + color:white; /* cyan-500 */ +} +.company-border{ + border-color:#6b7280; + color:white; +} +.company-blue-border{ + border-color:#3b82f6 ; +} +.company-green-border{ + border-color: #22c55e; +} +.company-purple-border{ + border-color: #a855f7; +} + +/* System Design */ +[data-theme='dark'] .badge-system { + border-color: #60a5fa; /* dark:border-blue-300 */ + color: #60a5fa; /* dark:text-blue-300 */ + background-color: rgba(30, 64, 175, 0.2); /* dark:bg-blue-900/20 */ +} + +/* Behavioral */ +[data-theme='dark'] .badge-behavioral { + border-color: #4ade80; + color: #4ade80; + background-color: rgba(20, 83, 45, 0.2); +} + +/* Technical */ + +[data-theme='dark'] .badge-technical { + border-color: #c084fc; + color: #c084fc; + background-color: rgba(88, 28, 135, 0.2); +} + + +[data-theme='dark'] .badge-other { + border-color: #fb923c; + color: #fb923c; + background-color: rgba(124, 45, 18, 0.2); +} + +[data-theme='dark'] .question-card { + border-color: #1f2937; /* border-gray-800 */ + background-color: #1f2937; /* bg-gray-800 */ +} +.company-tab-link{ + color: white; +} +.company-tab-link:hover{ + color: white; +} +.company-tab-community-link{ + color: #fdba74; +} +.company-tab-community-link:hover{ + color: #fdba74; + text-decoration: none; } \ No newline at end of file diff --git a/src/pages/interview-prep/BehavioralTab.tsx b/src/pages/interview-prep/BehavioralTab.tsx new file mode 100644 index 00000000..df9984c3 --- /dev/null +++ b/src/pages/interview-prep/BehavioralTab.tsx @@ -0,0 +1,545 @@ +import React from "react"; +import { motion } from "framer-motion"; +import Link from "@docusaurus/Link"; + +interface BehavioralCategory { + category: string; + questions: string[]; +} + +interface BehavioralTabProps { + behavioralQuestions?: BehavioralCategory[]; + expandedCategories?: { [key: number]: boolean }; + toggleCategory: (index: number) => void; +} + +const fadeIn = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0, transition: { duration: 0.6 } } }; +const staggerContainer = { hidden: {}, visible: { transition: { staggerChildren: 0.2 } } }; + +const BehavioralTab: React.FC = ({ behavioralQuestions=[], + expandedCategories=[], + toggleCategory, }) => { + return ( + + {/* Introduction Section */} + +

Behavioral Interview Preparation

+

+ Master the art of storytelling and showcase your soft skills with confidence +

+ + + {/* What are Behavioral Interviews */} + +
+

+ 🤝 + What are Behavioral Interviews? +

+
+
+

+ Behavioral interviews focus on how you've handled situations in the past to predict your future + performance. These questions typically start with phrases like "Tell me about a time when..." or + "Describe a situation where..." +

+

+ Unlike technical interviews that test your coding skills, behavioral interviews evaluate your + soft skills, cultural fit, and ability to work in a team environment. +

+
+
+

Why They Matter

+
    +
  • + + + 70% of hiring decisions are based on cultural fit + +
    • +
  • + + + Assess leadership and communication skills + +
    • +
  • + + Evaluate problem-solving approach +
    • +
  • + + Determine team collaboration ability +
    • +
+
+
+
+ + + {/* STAR Method Guide */} + +

+ The STAR Method Framework +

+
+ {[ + { + letter: "S", + word: "Situation", + desc: "Set the context and background of your story", + color: "bg-red-500", + }, + { + letter: "T", + word: "Task", + desc: "Describe your responsibility or goal", + color: "bg-yellow-500", + }, + { + letter: "A", + word: "Action", + desc: "Explain the specific steps you took", + color: "bg-green-500", + }, + { + letter: "R", + word: "Result", + desc: "Share the outcome and what you learned", + color: "bg-blue-500", + }, + ].map((item, i) => ( +
+
+ {item.letter} +
+

{item.word}

+

{item.desc}

+
+ ))} +
+ + {/* STAR Method Examples */} +
+
+

+ 💡 + Example 1: Leadership Challenge +

+
+
+ Situation: +

+ "During my internship, our team was behind schedule on a critical project with only 2 weeks + left before the deadline." +

+
+
+ Task: +

+ "As the junior developer, I needed to help coordinate efforts and find ways to accelerate our + progress." +

+
+
+ Action: +

+ "I organized daily stand-ups, created a shared task board, and volunteered to work extra hours + on critical features." +

+
+
+ Result: +

+ "We delivered the project on time, and my manager praised my initiative. I learned the + importance of proactive communication." +

+
+
+
+ +
+

+ 🔧 + Example 2: Problem Solving +

+
+
+ Situation: +

+ "Our main application was experiencing frequent crashes affecting 30% of users during peak + hours." +

+
+
+ Task: +

+ "I was assigned to identify the root cause and implement a solution within 48 hours." +

+
+
+ Action: +

+ "I analyzed logs, reproduced the issue, and discovered a memory leak in our caching system. I + implemented a fix and added monitoring." +

+
+
+ Result: +

+ "Crashes reduced by 95%, user satisfaction improved, and we prevented similar issues with + better monitoring." +

+
+
+
+
+ + + {/* Common Behavioral Questions - Collapsible */} + +

+ Common Behavioral Questions by Category +

+
+ {[ + { + category: "Leadership & Initiative", + icon: "👑", + color: "from-purple-500 to-pink-500", + questions: [ + "Tell me about yourself", + "Tell me about a time you led a team through a difficult project", + "Describe a situation where you had to influence others without authority", + "How do you handle team conflicts?", + "Give an example of when you took initiative on a project", + ], + }, + { + category: "Problem Solving & Challenges", + icon: "🧩", + color: "from-blue-500 to-cyan-500", + questions: [ + "Describe a challenging situation you faced and how you handled it", + "Tell me about the most challenging technical problem you've solved", + "Describe a time you failed and what you learned", + "How do you approach debugging complex issues?", + "Tell me about a time you had to make a decision with incomplete information", + ], + }, + { + category: "Teamwork & Communication", + icon: "🤝", + color: "from-green-500 to-teal-500", + questions: [ + "How do you handle conflict with team members?", + "Explain a complex technical concept to a non-technical person", + "Tell me about a time you had to give difficult feedback", + "Describe a time you disagreed with your manager", + "How do you handle disagreements with stakeholders?", + ], + }, + { + category: "Growth & Learning", + icon: "📚", + color: "from-orange-500 to-red-500", + questions: [ + "How do you stay updated with new technologies?", + "Tell me about a time you had to learn something completely new", + "What's the most important thing you've learned in your career?", + "Describe a time you received constructive criticism", + "How do you handle tight deadlines and pressure?", + ], + }, + ].map((section, index) => ( +
+ + + {expandedCategories[index] && ( + +
+ {section.questions.map((question, i) => ( +
+

"{question}"

+
+ ))} +
+ + )} +
+ ))} +
+ + + {/* Do's and Don'ts */} + +

+ Do's and Don'ts for Behavioral Interviews +

+
+ {/* Do's */} +
+

+ ✅ + Do's +

+
+ {[ + "Practice with real scenarios from your experience", + "Be concise and specific in your answers", + "Show enthusiasm and passion for your work", + "Use the STAR method to structure responses", + "Prepare 5-7 strong examples beforehand", + "Focus on your individual contributions", + "Quantify results whenever possible", + "Show what you learned from each experience", + ].map((item, i) => ( +
+ + {item} +
+ ))} +
+
+ + {/* Don'ts */} +
+

+ ❌ + Don'ts +

+
+ {[ + "Memorize robotic, scripted answers", + "Be vague or over-explain situations", + "Appear disinterested or unenthusiastic", + "Speak negatively about previous employers", + "Make up stories or exaggerate experiences", + "Focus only on team achievements without your role", + "Give answers without clear structure", + "Forget to mention the results or outcomes", + ].map((item, i) => ( +
+ + {item} +
+ ))} +
+
+
+ + + {/* Video Resources */} + +

+ 🎥 + Video Resources & Learning Materials +

+
+ {[ + { + title: "Behavioral Interview Masterclass", + channel: "CareerVidz", + duration: "25 min", + description: "Complete guide to behavioral interviews with real examples", + url: "https://www.youtube.com/watch?v=PJKYqLP6MRE", + thumbnail: "../../img/Behavioural_Interviews1.png", + }, + { + title: "STAR Method Explained", + channel: "Interview Success", + duration: "15 min", + description: "Step-by-step breakdown of the STAR method with practice", + url: "https://www.youtube.com/watch?v=V0jktOX8Jog", + thumbnail: "../../img/Behavioural_Interviews2.png", + }, + { + title: "Mock Behavioral Interview", + channel: "Tech Interview Pro", + duration: "30 min", + description: "Real behavioral interview simulation with feedback", + url: "https://www.youtube.com/watch?v=1qw5ITr3k9E", + thumbnail: "../../img/Behavioural_Interviews3.png", + }, + ].map((video, i) => ( +
+ {video.title} +
+

{video.title}

+

{video.description}

+
+ {video.channel} + {video.duration} +
+ + ▶️ + Watch Video + +
+
+ ))} +
+ + {/* Additional Resources */} +
+

Additional Learning Resources

+
+
+
📚 Recommended Books
+
    +
  • • "Cracking the Coding Interview" by Gayle McDowell
    • +
  • • "The Behavioral Interview Handbook" by Lewis Lin
    • +
  • • "What Color Is Your Parachute?" by Richard N. Bolles
    • +
+
+
+
🌐 Online Platforms
+
    +
  • • Pramp - Free mock interviews
    • +
  • • InterviewBit - Behavioral question bank
    • +
  • • Glassdoor - Company-specific questions
    • +
+
+
+
+ + + {/* Contributor Note */} + +
+

+ 🤝 + Join Our Community & Contribute +

+

+ Help make this resource better for everyone in the RecodeHive community +

+
+ +
+
+
💬
+

Share Your Experience

+

+ Share your behavioral interview experiences, both successes and challenges +

+
+
+
📝
+

Suggest Resources

+

+ Recommend helpful videos, articles, or tools you've found useful +

+
+
+
🔧
+

Improve Content

+

+ Help us add more examples, questions, or improve existing content +

+
+
+ +
+

How to Contribute

+
+
+
🚀 Quick Ways to Help
+
    +
  • + + + Join our Discord community and share tips + +
    • +
  • + + + Submit interview questions you've encountered + +
    • +
  • + + + Review and suggest improvements to examples + +
    • +
  • + + + Share company-specific behavioral interview tips + +
    • +
+
+
+
📋 Getting Started
+
+ + Join Discord Community + + + Contributing Guide + +
+
+
+
+ + + ); +}; + +export default BehavioralTab; diff --git a/src/pages/interview-prep/CompaniesTab.tsx b/src/pages/interview-prep/CompaniesTab.tsx new file mode 100644 index 00000000..5cdaaded --- /dev/null +++ b/src/pages/interview-prep/CompaniesTab.tsx @@ -0,0 +1,644 @@ +import React from "react" +import { useState, useMemo } from "react" +import { motion } from "framer-motion" +import Link from "@docusaurus/Link" +import { + Search, + ChevronDown, + Users, + MessageSquare, + Building2, + Target, + Lightbulb, + Star, + TrendingUp, + Award, + Zap, +} from "lucide-react" +import { Button } from "../../components/ui/button" +import { Input } from "../../components/ui/input" +import { Badge } from "../../components/ui/badge" +import { Card, CardContent, CardHeader, CardTitle } from "../../components/ui/card" +import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../components/ui/collapsible" + +interface CompanyTip { + company: string + logo: string + focus: string + industry: string + roleTypes: string[] + tips: string[] + commonQuestions: Array<{ + question: string + answer: string + category: string + }> + focusAreas: string[] +} + +interface CompaniesTabProps { + companyTips?: CompanyTip[]; + toggleTips: (index: number) => void; + toggleQuestions: (index: number) => void; + showTips: { [key: number]: boolean }; + showQuestions: { [key: number]: boolean }; +} + +const fadeIn = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0, transition: { duration: 0.6 } } } +const staggerContainer = { hidden: {}, visible: { transition: { staggerChildren: 0.1 } } } + +const CompaniesTab: React.FC = ({ companyTips=[] }) => { + const [searchTerm, setSearchTerm] = useState("") + const [selectedIndustry, setSelectedIndustry] = useState("") + const [selectedRole, setSelectedRole] = useState("") + const [expandedQuestions, setExpandedQuestions] = useState<{ [key: string]: boolean }>({}) + + const filteredCompanies = useMemo(() => { + return (companyTips || []).filter((company) => { + const matchesSearch = + company.company.toLowerCase().includes(searchTerm.toLowerCase()) || + company.focus.toLowerCase().includes(searchTerm.toLowerCase()) || + company.focusAreas.some((area) => area.toLowerCase().includes(searchTerm.toLowerCase())) + + const matchesIndustry = !selectedIndustry || company.industry === selectedIndustry + const matchesRole = !selectedRole || company.roleTypes.includes(selectedRole) + + return matchesSearch && matchesIndustry && matchesRole + }) + }, [companyTips, searchTerm, selectedIndustry, selectedRole]) + + const industries = [...new Set((companyTips || []).map((c) => c.industry))] + const roles = [...new Set((companyTips || []).flatMap((c) => c.roleTypes))] + + const toggleQuestion = (companyIndex: number, questionIndex: number) => { + const key = `${companyIndex}-${questionIndex}` + setExpandedQuestions((prev) => ({ + ...prev, + [key]: !prev[key], + })) + } + + return ( + + +
+ + Master FAANG+ Company Interviews +
+

Company-Specific Interview Prep

+

+ Get insider knowledge, real interview questions, and proven strategies for landing your dream job at top tech + companies +

+ + + + {/* Background pattern */} +
+
+
+ +
+
+

+ 🏢 + FAANG+ Companies Overview +

+

+ Navigate the unique interview processes of the world's most competitive tech companies +

+
+ +
+ {[ + { + title: "Big Tech Focus", + icon: "🎯", + description: "Google, Amazon, Meta, Apple, Netflix, Microsoft + emerging unicorns", + color: "from-blue-500 to-blue-600", + bgColor: "bg-blue-500", + stats: "6+ Companies", + }, + { + title: "Interview Styles", + icon: "💼", + description: "System Design, Behavioral, Coding, Product Sense, Leadership", + color: "from-green-500 to-green-600", + bgColor: "bg-green-500", + stats: "5 Categories", + }, + { + title: "Success Factors", + icon: "⭐", + description: "Company culture fit, technical excellence, leadership principles", + color: "from-purple-500 to-purple-600", + bgColor: "bg-purple-500", + stats: "95% Success", + }, + { + title: "Real Questions", + icon: "❓", + description: "Actual questions from recent interviews with detailed answers", + color: "from-orange-500 to-orange-600", + bgColor: "bg-orange-500", + stats: "100+ Questions", + }, + ]?.map((item, i) => ( + item?( +
+ + {item.icon} +
+

{item.title}

+

{item.description}

+
+ {item.stats} +
+ ):null + ))} +
+ +
+ {[ + { metric: "92%", label: "Interview Success Rate", icon: "📈", color: "text-green-600" }, + { metric: "150+", label: "Companies Covered", icon: "🏢", color: "text-blue-600" }, + { metric: "50K+", label: "Successful Candidates", icon: "👥", color: "text-purple-600" }, + ]?.map((stat, i) => ( + stat?( + +
{stat.metric}
+
+ {stat.icon} + {stat.label} +
+ ):null + ))} +
+
+ + + +
+
+ + setSearchTerm(e.target.value)} + className="pl-12 h-12 custom-input bg-gray-50 dark:bg-gray-700 text-white border-gray-200 dark:border-gray-600 rounded-xl text-lg" + /> +
+
+ + +
+
+ +
+
+ + Showing {filteredCompanies.length} of {companyTips?.length||0} companies +
+
+ + Updated weekly with latest interview insights +
+
+ + +
+ {filteredCompanies.map((company, companyIndex) => { + const [isOpen, setIsOpen] = useState(false) + return ( + + + {/* --------- HEADER --------- */} + + {/* Background pattern */} +
+
+
+ +
+
+ {/* logo */} + + {`${company.company} +
+ +
+ + + {/* title + focus */} +
+ + {company.company} + +
+
+ +
+

+ Focus: {company.focus} +

+
+ +
+ {company.focusAreas.slice(0, 4).map((area, i) => ( + + {area} + + ))} + {company.focusAreas.length > 4 && ( + + +{company.focusAreas.length - 4} more + + )} +
+
+ + {/* demand + industry */} +
+
+ + High Demand +
+
{company.industry}
+
+
+ +
+ + + Common roles: + {company.roleTypes.map((role, i) => ( + + {role} + + ))} + + + {/* collapse toggle */} + +
+
+ + + {/* --------- COLLAPSIBLE CONTENT --------- */} + + +
+ {/* Key Preparation Tips */} + +

+
+ +
+ Key Preparation Tips +

+
    + {company.tips.map((tip, i) => ( + +
    + {i + 1} +
    + {tip} +     + ))} +
+ + + {/* Common Interview Questions */} + +

+
+ +
+ Common Interview Questions +

+
+ {company.commonQuestions.map((item, i) => { + const questionKey = `${companyIndex}-${i}` + const isExpanded = expandedQuestions[questionKey] + + return ( + + toggleQuestion(companyIndex, i)} + className="w-full text-left" + > + +
+

+ "{item.question}" +

+ + {item.category} + +
+ + + + + + + +

+ {item.answer} +

+ + + + ) + })} +
+ +
+ + {/* Contributors Section */} + +
+
🚀
+
+
+
+ +
+
+ Community Contributors Needed! +
+
+

+ Help keep {company.company}'s interview information current! Share recent questions, tips, or insights you've encountered to help fellow candidates succeed. +

+
+ + +
+
+
+ + + + + + ) + })} +
+ + {filteredCompanies.length === 0 && ( + +
🔍
+

No companies match your current filters.

+ + + )} + + + {/* Background elements */} +
🤝
+
💡
+ +
+
+

+ 🤝 + Join Our Interview Prep Community +

+

+ Help build the most comprehensive company interview resource and accelerate your career growth +

+
+ +
+ {[ + { + title: "Share Experiences", + icon: "💬", + description: "Recent interview questions and experiences from your interviews", + color: "from-blue-500 to-blue-600", + bgColor: "bg-blue-500", + benefit: "Help 1000+ candidates", + }, + { + title: "Update Tips", + icon: "💡", + description: "Company-specific preparation strategies and insider knowledge", + color: "from-green-500 to-green-600", + bgColor: "bg-green-500", + benefit: "Earn community points", + }, + { + title: "Add Companies", + icon: "🏢", + description: "Request coverage for new companies and emerging startups", + color: "from-purple-500 to-purple-600", + bgColor: "bg-purple-500", + benefit: "Shape our roadmap", + }, + { + title: "Improve Content", + icon: "✨", + description: "Enhance existing company profiles with updated information", + color: "from-orange-500 to-orange-600", + bgColor: "bg-orange-500", + benefit: "Get featured contributor", + }, + ].map((item, i) => ( + +
+ + {item.icon} +
+

{item.title}

+

{item.description}

+
+ {item.benefit} +
+ + ))} +
+ +
+ + + +

+ Join 50,000+ developers preparing for their dream jobs +

+
+
+ + + ) +} + +export default CompaniesTab diff --git a/src/pages/interview-prep/OverviewTab.tsx b/src/pages/interview-prep/OverviewTab.tsx new file mode 100644 index 00000000..2dd17348 --- /dev/null +++ b/src/pages/interview-prep/OverviewTab.tsx @@ -0,0 +1,626 @@ +import React from "react"; +import { motion, AnimatePresence } from "framer-motion"; + +const fadeIn = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0, transition: { duration: 0.6 } } }; +const staggerContainer = { hidden: {}, visible: { transition: { staggerChildren: 0.2 } } }; + +interface OverviewTabProps { + toggleTips: (index: number) => void; + toggleQuestions: (index: number) => void; + showTips: { [key: number]: boolean }; + showQuestions: { [key: number]: boolean }; + setActiveTab: React.Dispatch>; +} + +const OverviewTab: React.FC = ({ + toggleTips = () => { }, + toggleQuestions = () => { }, + showTips = {}, + showQuestions = {}, + setActiveTab = () => { }, +}) => { + const stages = [ + { + step: "01", + title: "Resume Optimization", + subtitle: "Foundation Building Phase", + icon: "📄", + description: + "Craft a compelling resume that showcases your achievements, aligns with job requirements, and passes ATS screening systems", + color: "from-blue-500 to-blue-600", + bgColor: "bg-blue-500", + duration: "Ongoing preparation", + difficulty: "Medium", + keyFocus: "Professional Presentation & ATS Optimization", + tips: [ + "Tailor resume for each specific role and company", + "Use action verbs and quantify achievements with metrics", + "Optimize for ATS with relevant keywords from job description", + "Keep format clean, consistent, and easy to scan", + "Include relevant projects, certifications, and technical skills", + ], + commonQuestions: [ + "Walk me through your resume", + "Tell me about this project on your resume", + "Why did you choose this career path?", + ], + }, + { + step: "02", + title: "Technical Assessment", + subtitle: "Core Competency Evaluation", + icon: "💻", + description: + "Deep dive into coding abilities, algorithmic thinking, system design knowledge, and technical problem-solving approach", + color: "from-green-500 to-green-600", + bgColor: "bg-green-500", + duration: "60-120 minutes", + difficulty: "Hard", + keyFocus: "Problem Solving & Code Quality", + tips: [ + "Practice coding on whiteboard/shared editor daily", + "Think out loud - explain your thought process clearly", + "Ask clarifying questions before jumping into code", + "Test your solution with edge cases and optimize", + "Know time/space complexity of your solutions", + ], + commonQuestions: [ + "Implement [data structure/algorithm]", + "Design a system for [specific use case]", + "Optimize this code for better performance", + ], + }, + { + step: "03", + title: "Behavioral Deep-Dive", + subtitle: "Leadership & Culture Assessment", + icon: "🤝", + description: + "Comprehensive evaluation of soft skills, leadership potential, conflict resolution abilities, and team collaboration style", + color: "from-purple-500 to-purple-600", + bgColor: "bg-purple-500", + duration: "45-75 minutes", + difficulty: "Medium", + keyFocus: "Leadership & Collaboration", + tips: [ + "Master the STAR method (Situation, Task, Action, Result)", + "Prepare 5-7 detailed stories covering different competencies", + "Show growth mindset - discuss lessons learned from failures", + "Demonstrate impact with specific metrics and outcomes", + "Practice active listening and ask follow-up questions", + ], + commonQuestions: [ + "Tell me about a time you led a difficult project", + "Describe a conflict with a teammate and resolution", + "Share an example of when you failed and what you learned", + ], + }, + { + step: "04", + title: "Final Alignment", + subtitle: "Mutual Fit Confirmation", + icon: "🎯", + description: + "Final evaluation covering compensation expectations, role clarity, team dynamics, and long-term career alignment", + color: "from-orange-500 to-red-500", + bgColor: "bg-orange-500", + duration: "30-60 minutes", + difficulty: "Medium", + keyFocus: "Mutual Fit & Expectations", + tips: [ + "Research industry salary benchmarks thoroughly", + "Prepare thoughtful questions about team and growth", + "Show genuine enthusiasm for the role and company", + "Discuss career goals and how role aligns with them", + "Be ready to negotiate professionally and respectfully", + ], + commonQuestions: [ + "What are your career goals for the next 2-3 years?", + "How do you handle work-life balance?", + "What questions do you have for us?", + ], + }, + ] + return ( + + +
+
+
+ + Your Complete Interview Success Guide +
+

+ What Our Interview Prep Section Covers +

+
+ +
+
+

+ + 📚 + + Comprehensive Coverage +

+
    +
  • + + + Technical Mastery: 500+ coding problems, algorithms, data structures, and + system design challenges + +
    • +
  • + + + Behavioral Excellence: STAR method framework, leadership scenarios, and + communication skills + +
    • +
  • + + + Company Intelligence: FAANG-specific strategies, culture insights, and + insider tips + +
    • +
  • + + + Mock Practice: Real-time simulations with feedback and performance tracking + +
    • +
+
+ +
+

+ + ⚡ + + Why Both Technical & Behavioral Matter +

+
+
+

+ Technical Skills (60% Weight) +

+

+ Prove you can solve complex problems, write clean code, and design scalable systems. + Technical competence is your entry ticket. +

+
+
+

+ Behavioral Skills (40% Weight) +

+

+ Demonstrate leadership, collaboration, and cultural fit. Many technically strong candidates + fail here due to poor communication or team dynamics. +

+
+
+
+

+ 💡 Key Insight: Top companies hire for both technical excellence AND cultural + alignment. Neglecting either aspect significantly reduces your success rate. +

+
+
+
+
+ + + +
+

Interview Process Journey

+

+ Navigate each stage strategically with our comprehensive roadmap +

+
+ +
+ {/* Background pattern */} +
+
+
+ + {/* Diagonal flowchart */} +
+ {(stages || []).map((stage, index) => { + return ( + stage ? ( + {index < 3 && ( +
+
+ +
+ + + + + +
+ )} + +
+ + +
+ + {stage.step} +
+ + {stage.icon} + + + + +
+
+
+ +
+
+
+

+ {stage.title} +

+

+ {stage.subtitle} +

+
+
+ + {stage.difficulty} + + + {stage.duration} + +
+
+ +

+ {stage.description} +

+ +
+

+ + Key Focus: {stage.keyFocus} +

+
+ +
+ + + {showTips[index] && ( + +
    + {stage.tips?.map((tip, tipIndex) => ( + + + {tip} + + ))} +
+ + )} + +
+ +
+ + + {showQuestions[index] && ( + +
+ {stage.commonQuestions?.map((question, qIndex) => ( + +

"{question}"

+ + ))} +
+ + )} + +
+
+ +
+ + ) : null) + })} +
+
+ + + +
+

Preparation Strategy

+
+
+
+
+
+ 🧠 +
+

Problem-Solving Mastery

+

+ Build strong algorithmic thinking through consistent practice. Focus on understanding patterns + rather than memorizing solutions. +

+
+
+
+ 💬 +
+

Communication Excellence

+

+ Practice explaining complex concepts clearly. Develop your ability to think out loud and + collaborate effectively. +

+
+
+
+ 🎭 +
+

Behavioral Readiness

+

+ Prepare compelling stories using the STAR method. Showcase leadership, growth mindset, and + cultural alignment. +

+
+
+ +
+
+ 💡 + Pro Tip: Balance Your Preparation +
+

+ Allocate 60% of your time to technical skills, 30% to behavioral preparation, and 10% to company + research. This balance ensures you're well-rounded and confident in all interview stages. +

+
+
+ + + +

+ Quick Access to Resources +

+
+ {[ + { + id: "technical", + title: "Technical Prep", + icon: "💻", + description: "Coding challenges, algorithms, system design", + color: "from-blue-500 to-blue-600", + items: ["500+ Problems", "System Design", "Code Review"], + }, + { + id: "behavioral", + title: "Behavioral Prep", + icon: "🤝", + description: "STAR method, leadership stories, soft skills", + color: "from-green-500 to-green-600", + items: ["STAR Framework", "Leadership", "Communication"], + }, + { + id: "companies", + title: "Company Guides", + icon: "🏢", + description: "Company-specific tips and strategies", + color: "from-purple-500 to-purple-600", + items: ["FAANG Tips", "Culture Fit", "Specific Questions"], + }, + { + id: "practice", + title: "Mock Practice", + icon: "🎯", + description: "Simulate real interview conditions", + color: "from-orange-500 to-orange-600", + items: ["Live Practice", "Feedback", "Time Management"], + }, + ]?.map((section) => ( + section ? ( setActiveTab(section.id as any)} + whileHover={{ y: -5 }} + > +
+
{section.icon}
+

{section.title}

+
+
+

{section.description}

+
+ {section.items?.map((item, i) => ( + item ? (
+ + {item} +
) : null + ))} +
+
+ + Explore Section → + +
+
+ ) : null + ))} +
+ + {/* Quick Stats */} + +
+
+
500+
+
Practice Questions
+
+
+
50+
+
System Design Topics
+
+
+
20+
+
Company Guides
+
+
+
95%
+
Success Rate
+
+
+ + + ); +}; + +export default OverviewTab; diff --git a/src/pages/interview-prep/PracticeTab.tsx b/src/pages/interview-prep/PracticeTab.tsx new file mode 100644 index 00000000..6e6ca4d7 --- /dev/null +++ b/src/pages/interview-prep/PracticeTab.tsx @@ -0,0 +1,125 @@ +import React from "react"; +import { useState } from "react"; +import { motion } from "framer-motion"; + +interface MockQuestion { + type: string; + question: string; + difficulty?: string; + framework?: string; + hints: string[]; +} + +interface PracticeTabProps { + mockInterviewQuestions?: MockQuestion[]; +} + +const fadeIn = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0, transition: { duration: 0.6 } } }; +const staggerContainer = { hidden: {}, visible: { transition: { staggerChildren: 0.2 } } }; + +const PracticeTab: React.FC = ({ mockInterviewQuestions = [] }:PracticeTabProps) => { + const [selectedQuestion, setSelectedQuestion] = useState(null) + return ( + + +

Mock Interview Practice

+

Practice with real interview questions

+ + +
+ {mockInterviewQuestions.map((question, index) => ( + +
+ + {question.type.charAt(0).toUpperCase() + question.type.slice(1)} + + {question.difficulty && ( + + {question.difficulty} + + )} +
+ +

{question.question}

+ + {question.framework && ( +

Framework: {question.framework}

+ )} + +
+ +
+ + {selectedQuestion === index && ( +
+

Hints:

+
    + {question.hints.map((hint, i) => ( +
  • + • {hint} +
    • + ))} +
+
+ )} + + + + ))} +
+ + {/* Practice Tools */} + +

Practice Tools

+
+
+
⏱️
+

Timed Practice

+

+ Practice with real interview time constraints +

+
+
+
🎥
+

Video Recording

+

+ Record yourself to improve presentation skills +

+
+
+
📊
+

Progress Tracking

+

Track your improvement over time

+
+
+ + + ); +}; + +export default PracticeTab; diff --git a/src/pages/interview-prep/TechnicalTab.tsx b/src/pages/interview-prep/TechnicalTab.tsx new file mode 100644 index 00000000..ea8e3e6a --- /dev/null +++ b/src/pages/interview-prep/TechnicalTab.tsx @@ -0,0 +1,409 @@ +import React from "react"; +import { motion } from "framer-motion"; +import Link from "@docusaurus/Link"; + +interface Resource { + name: string; + url: string; +} +interface SubCategory { + title: string; + difficulty: string; + problems: number; + subtopics: string[]; + resources: Resource[]; +} +interface TechnicalCategory { + category: string; + description: string; + totalProblems: number; + subcategories: SubCategory[]; +} + +interface PracticePlatform { + name: string; + description: string; + problems: string; + difficulty: string[]; + url: string; + features: string[]; +} + +interface TechnicalTabProps { + technicalResources?: TechnicalCategory[]; + practicePlatforms?: PracticePlatform[]; + expandedCategories?: { [key: number]: boolean }; + toggleCategory: (index: number) => void; +} + +const fadeIn = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0, transition: { duration: 0.6 } } }; +const staggerContainer = { hidden: {}, visible: { transition: { staggerChildren: 0.2 } } }; + +const TechnicalTab: React.FC = ({ + technicalResources=[], + practicePlatforms=[], + expandedCategories=[], + toggleCategory, +}) => { + return ( + + +
+
+
+ + Technical Interview Mastery +
+

+ Master Technical Interviews +

+

+ Technical interviews are the cornerstone of software engineering hiring. They evaluate your + problem-solving abilities, coding skills, and understanding of computer science fundamentals. + Success requires consistent practice, pattern recognition, and the ability to communicate your + thought process clearly. +

+
+
+
+
+ 🧠 +
+

Problem Solving

+

+ Develop systematic approaches to break down complex problems into manageable components. +

+
+
+
+ ⚡ +
+

Pattern Recognition

+

+ Learn to identify common patterns and apply proven techniques to solve similar problems + efficiently. +

+
+
+
+ 💬 +
+

Communication

+

+ Master the art of explaining your approach, discussing trade-offs, and collaborating with + interviewers. +

+
+
+
+
+ 💡 +
+

Success Strategy

+

+ Focus on understanding patterns rather than memorizing solutions. Practice explaining your + thought process out loud, and always consider time/space complexity. Consistent daily practice + for 2-3 months typically yields the best results. +

+
+
+
+
+ + + + {/* Question Bank by Category - Collapsible */} + +

+ 📚 Question Bank by Category +

+
+ {technicalResources.map((category, categoryIndex) => { + const headerColors = [ + { gradient: "from-purple-500 to-pink-400", border: "border-purple-500 dark:border-purple-400" }, + { gradient: "from-blue-500 to-sky-400", border: "border-blue-500 dark:border-blue-400" }, + { gradient: "from-green-500 to-green-400", border: "border-green-500 dark:border-green-400" }, + { gradient: "from-orange-500 to-red-500", border: "border-orange-500 dark:border-orange-400" }, + { gradient: "from-pink-500 to-yellow-500", border: "border-pink-500 dark:border-pink-400" }, + { gradient: "from-cyan-500 to-blue-500", border: "border-cyan-500 dark:border-cyan-400" }, + ]; + const { gradient, border } = headerColors[categoryIndex % headerColors.length]; + const subtopicBorderClasses = [ + "question-bank-subtopic-purple", + "question-bank-subtopic-blue", + "question-bank-subtopic-green", + "question-bank-subtopic-orange", + "question-bank-subtopic-pink", + "question-bank-subtopic-cyan" + ]; + return ( +
+ {/* Outer header */} + + + {/* Collapsible Content */} + {expandedCategories[categoryIndex] && ( + +
+ {category.subcategories.map((subcategory, subIndex) => ( + +
+ {/* Subcategory Header */} +
+
+ {subcategory.title} +
+
+ + {subcategory.difficulty} + + + {subcategory.problems} + +
+
+ + {/* Subtopics */} +
+
+ Key Topics: +
+
+ {subcategory.subtopics.map((topic, topicIndex) => ( + + {topic} + + ))} +
+
+ + {/* Resources */} +
+
+ Practice Resources: +
+ {subcategory.resources.map((resource, resourceIndex) => ( + + 🔗 {resource.name} + + ))} +
+
+ ))} +
+ + )} +
+ ); + })} + +
+ + + + {/* Practice Platforms */} + +

+ 🎯 Recommended Practice Platforms +

+
+ {practicePlatforms.map((platform, index) => ( + +
+

{platform.name}

+

{platform.description}

+
{platform.problems}
+
Problems Available
+
+ +
+
+ {platform.difficulty.map((diff, diffIndex) => ( + + {diff} + + ))} +
+
+ +
+
Key Features:
+
    + {platform.features.map((feature, featureIndex) => ( +
  • + + {feature} +
    • + ))} +
+
+ + {/* Push button to bottom */} + + + ))} +
+ + + + {/* Tips & Best Practices */} + +

+ 💡 Pro Tips for Technical Interview Success +

+
+
+
+
+ 1 +
+
+

Start with Easy Problems

+

+ Build confidence and understand patterns before tackling harder challenges. +

+
+
+
+
+ 2 +
+
+

Practice Consistently

+

+ Solve 1-2 problems daily rather than cramming before interviews. +

+
+
+
+
+ 3 +
+
+

Focus on Patterns

+

+ Learn common problem-solving patterns like two pointers, sliding window, etc. +

+
+
+
+
+
+
+ 4 +
+
+

Time Yourself

+

+ Practice under time constraints to simulate real interview conditions. +

+
+
+
+
+ 5 +
+
+

Explain Your Thinking

+

+ Practice verbalizing your approach and reasoning process. +

+
+
+
+
+ 6 +
+
+

Review Solutions

+

+ Study optimal solutions and alternative approaches after solving problems. +

+
+
+
+
+ + + ); +}; + +export default TechnicalTab; diff --git a/src/pages/interview-prep/index.tsx b/src/pages/interview-prep/index.tsx index 46da6157..b746a4e4 100644 --- a/src/pages/interview-prep/index.tsx +++ b/src/pages/interview-prep/index.tsx @@ -2,8 +2,13 @@ import React from "react" import { useState } from "react" import Layout from "@theme/Layout" import Head from "@docusaurus/Head" -import { motion, AnimatePresence } from "framer-motion" +import { motion } from "framer-motion" import Link from "@docusaurus/Link" +import OverviewTab from "./OverviewTab" +import TechnicalTab from "./TechnicalTab"; +import BehavioralTab from "./BehavioralTab" +import CompaniesTab from "./CompaniesTab" +import PracticeTab from "./PracticeTab" // Animation variants const fadeIn = { @@ -20,439 +25,11 @@ const staggerContainer = { }, } -// Interview categories data -const interviewCategories = [ - { - id: "technical", - title: "Technical Interviews", - icon: "💻", - description: "Master coding challenges, system design, and technical concepts", - color: "#3b82f6", - topics: [ - "Data Structures & Algorithms", - "System Design", - "Database Design", - "API Design", - "Code Review", - "Problem Solving", - ], - }, - { - id: "behavioral", - title: "Behavioral Interviews", - icon: "🤝", - description: "Prepare for soft skills and situational questions", - color: "#10b981", - topics: [ - "Leadership Examples", - "Conflict Resolution", - "Team Collaboration", - "Project Management", - "Communication Skills", - "Cultural Fit", - ], - }, - { - id: "company-specific", - title: "Company-Specific", - icon: "🏢", - description: "Tailored preparation for top tech companies", - color: "#8b5cf6", - topics: ["Google/Alphabet", "Amazon/AWS", "Microsoft", "Meta/Facebook", "Apple", "Netflix"], - }, -] - -const technicalResources = [ - { - category: "📊 Data Structures & Algorithms", - description: "Master core algorithms and problem-solving patterns for interviews", - totalProblems: 220, - subcategories: [ - { - title: "Arrays & Strings", - difficulty: "Easy", - problems: 50, - subtopics: [ - "Two Pointers", "Sliding Window", "String Manipulation", "Prefix Sums", "Rotation & Reversal", - "Frequency Counting", "Hashing for Arrays", "Anagram Problems" - ], - resources: [ - { name: "LeetCode Arrays", url: "https://leetcode.com/tag/array/" }, - { name: "HackerRank Strings", url: "https://hackerrank.com/domains/algorithms?filters%5Bsubdomains%5D%5B%5D=strings" }, - { name: "NeetCode Array Playlist", url: "https://www.youtube.com/playlist?list=PLot-Xpze53lfOdF3KwpMSFEyfE77zIwiP" } - ], - }, - { - title: "Linked Lists", - difficulty: "Medium", - problems: 30, - subtopics: [ - "Traversal", "Reversal", "Cycle Detection", "Merge Operations", "Dummy Nodes", - "Doubly Linked List", "Skip Lists" - ], - resources: [ - { name: "LeetCode Linked List", url: "https://leetcode.com/tag/linked-list/" }, - { name: "GeeksforGeeks", url: "https://geeksforgeeks.org/data-structures/linked-list/" }, - { name: "FreeCodeCamp Linked List", url: "https://www.youtube.com/watch?v=Hj_rA0dhr2I" } - ], - }, - { - title: "Trees & Graphs", - difficulty: "Hard", - problems: 50, - subtopics: [ - "Binary Trees", "BST Operations", "Tree Traversals", "Graph Representations", "DFS & BFS", - "Shortest Path", "Topological Sort", "Union-Find", "Minimum Spanning Tree" - ], - resources: [ - { name: "LeetCode Tree", url: "https://leetcode.com/tag/tree/" }, - { name: "LeetCode Graph", url: "https://leetcode.com/tag/graph/" }, - { name: "WilliamFiset Graph Theory", url: "https://www.youtube.com/playlist?list=PLDV1Zeh2NRsB6SWUrDFW2RmDotAfPbeHu" } - ], - }, - { - title: "Dynamic Programming", - difficulty: "Hard", - problems: 50, - subtopics: [ - "1D DP", "2D DP", "Memoization", "Tabulation", "State Optimization", - "Knapsack Variants", "Subsequence Problems", "Game Theory DP" - ], - resources: [ - { name: "LeetCode DP", url: "https://leetcode.com/tag/dynamic-programming/" }, - { name: "DP Patterns", url: "https://leetcode.com/discuss/general-discussion/458695/dynamic-programming-patterns" }, - { name: "NeetCode DP Playlist", url: "https://www.youtube.com/playlist?list=PLot-Xpze53ldVwtstag2TL4HQhAnC8m4D" } - ], - }, - { - title: "Other Important Topics", - difficulty: "Medium", - problems: 40, - subtopics: [ - "Heaps", "Hash Tables", "Bit Manipulation", "Greedy Algorithms", "Backtracking", - "Math & Number Theory", "Sorting Algorithms", "Binary Search Variants" - ], - resources: [ - { name: "Heap Guide", url: "https://www.geeksforgeeks.org/heap-data-structure/" }, - { name: "Backtracking Patterns", url: "https://leetcode.com/tag/backtracking/" }, - { name: "Princeton Algorithms", url: "https://algs4.cs.princeton.edu/home/" } - ], - }, - ], - }, - { - category: "🏗️ System Design", - description: "Learn to design scalable, fault-tolerant systems", - totalProblems: 50, - subcategories: [ - { - title: "Core Concepts", - difficulty: "Medium", - problems: 15, - subtopics: [ - "Scalability", "Load Balancing", "Caching", "Database Sharding", "CAP Theorem", - "Consistency Models", "Fault Tolerance" - ], - resources: [ - { name: "System Design Primer", url: "https://github.com/donnemartin/system-design-primer" }, - { name: "High Scalability", url: "http://highscalability.com/" }, - { name: "ByteByteGo YouTube", url: "https://www.youtube.com/c/ByteByteGo" } - ], - }, - { - title: "Real-world Systems", - difficulty: "Hard", - problems: 20, - subtopics: [ - "URL Shortener", "Chat System", "News Feed", "Search Engine", "Video Streaming", - "Payment Gateway", "Social Media Platform" - ], - resources: [ - { name: "Grokking System Design", url: "https://educative.io/courses/grokking-the-system-design-interview" }, - { name: "System Design Interview", url: "https://bytebytego.com/" } - ], - }, - { - title: "Other Important Topics", - difficulty: "Medium", - problems: 15, - subtopics: [ - "Monitoring & Logging", "Event-driven Architecture", "Message Queues", "Content Delivery Networks", - "Security in System Design" - ], - resources: [ - { name: "Grafana Monitoring", url: "https://grafana.com/oss/grafana/" }, - { name: "Event-driven Design", url: "https://microservices.io/patterns/rel/async-messaging.html" } - ], - }, - ], - }, - { - category: "🗄️ Database Design", - description: "Learn relational & NoSQL databases for real-world applications", - totalProblems: 70, - subcategories: [ - { - title: "SQL Basics", - difficulty: "Easy", - problems: 20, - subtopics: [ - "SELECT Queries", "Joins", "Indexes", "Aggregate Functions", "Stored Procedures", - "Views", "Transactions" - ], - resources: [ - { name: "SQLBolt", url: "https://sqlbolt.com/" }, - { name: "LeetCode Database", url: "https://leetcode.com/problemset/database/" } - ], - }, - { - title: "NoSQL & Scaling", - difficulty: "Medium", - problems: 20, - subtopics: [ - "Document Stores", "Key-Value Stores", "Column Stores", "Graph Databases", - "Sharding", "Replication" - ], - resources: [ - { name: "MongoDB Basics", url: "https://www.mongodb.com/basics" }, - { name: "Cassandra Guide", url: "https://cassandra.apache.org/" } - ], - }, - { - title: "Advanced Design", - difficulty: "Hard", - problems: 15, - subtopics: [ - "Normalization", "Denormalization", "Indexing Strategies", "Partitioning", - "Data Warehousing", "Query Optimization" - ], - resources: [ - { name: "Database Normalization", url: "https://www.guru99.com/database-normalization.html" }, - { name: "AWS Data Warehousing", url: "https://aws.amazon.com/redshift/" } - ], - }, - { - title: "Other Important Topics", - difficulty: "Medium", - problems: 15, - subtopics: [ - "ACID Properties", "Database Security", "Backup & Recovery", "OLAP vs OLTP", - "Temporal Databases" - ], - resources: [ - { name: "Transactions in SQL", url: "https://www.postgresql.org/docs/current/tutorial-transactions.html" } - ], - }, - ], - }, - { - category: "🔌 API Design & Development", - description: "REST, GraphQL, and microservices for backend engineering", - totalProblems: 60, - subcategories: [ - { - title: "REST API Design", - difficulty: "Easy", - problems: 15, - subtopics: [ - "HTTP Methods", "CRUD Operations", "Error Handling", "Versioning", "Rate Limiting", - "Pagination", "CORS" - ], - resources: [ - { name: "RESTful API Tutorial", url: "https://restfulapi.net/" }, - { name: "Postman Learning Center", url: "https://learning.postman.com/" } - ], - }, - { - title: "GraphQL", - difficulty: "Medium", - problems: 15, - subtopics: [ - "Queries", "Mutations", "Subscriptions", "Schemas", "Resolvers", - "Apollo Server", "GraphQL Security" - ], - resources: [ - { name: "GraphQL Official Docs", url: "https://graphql.org/learn/" }, - { name: "Apollo GraphQL", url: "https://www.apollographql.com/docs/" } - ], - }, - { - title: "Microservices & Security", - difficulty: "Hard", - problems: 15, - subtopics: [ - "Service Discovery", "API Gateway", "Authentication", "Authorization", "JWT", - "OAuth2", "gRPC" - ], - resources: [ - { name: "Microservices Guide", url: "https://microservices.io/" }, - { name: "JWT Introduction", url: "https://jwt.io/introduction/" } - ], - }, - { - title: "Other Important Topics", - difficulty: "Medium", - problems: 15, - subtopics: [ - "API Testing", "OpenAPI/Swagger", "Async APIs", "WebSockets", "gRPC Streaming", - "API Performance Tuning" - ], - resources: [ - { name: "OpenAPI Specification", url: "https://swagger.io/specification/" }, - { name: "gRPC Basics", url: "https://grpc.io/docs/what-is-grpc/" } - ], - }, - ], - }, -]; - - - -const practicePlatforms = [ - { - name: "LeetCode", - description: "Most popular coding interview platform", - problems: "2000+", - difficulty: ["Easy", "Medium", "Hard"], - url: "https://leetcode.com/", - features: ["Mock Interviews", "Company Tags", "Discussion Forums", "Premium Content"], - }, - { - name: "HackerRank", - description: "Comprehensive coding challenges and assessments", - problems: "1000+", - difficulty: ["Easy", "Medium", "Hard"], - url: "https://hackerrank.com/", - features: ["Skill Assessments", "Certification", "Company Challenges", "Interview Prep"], - }, - { - name: "CodeChef", - description: "Competitive programming and contests platform", - problems: "3000+", - difficulty: ["Easy", "Medium", "Hard"], - url: "https://www.codechef.com/", - features: ["Monthly Contests", "Long Challenge", "Cook-Off", "Practice Problems"], - }, -]; - - -// Behavioral interview questions -const behavioralQuestions = [ - { - category: "Leadership", - questions: [ - "Tell me about a time you led a team through a difficult project", - "Describe a situation where you had to influence others without authority", - "How do you handle team conflicts?", - ], - }, - { - category: "Problem Solving", - questions: [ - "Describe the most challenging technical problem you've solved", - "Tell me about a time you failed and what you learned", - "How do you approach debugging complex issues?", - ], - }, - { - category: "Communication", - questions: [ - "Explain a complex technical concept to a non-technical person", - "Tell me about a time you had to give difficult feedback", - "How do you handle disagreements with stakeholders?", - ], - }, - { - category: "Growth & Learning", - questions: [ - "How do you stay updated with new technologies?", - "Tell me about a time you had to learn something completely new", - "What's the most important thing you've learned in your career?", - ], - }, -] - -// Company-specific interview tips -const companyTips = [ - { - company: "Google", - logo: "/icons/google.png", - focus: "Googleyness & Leadership", - tips: [ - "Focus on scalability and efficiency", - "Demonstrate analytical thinking", - "Show passion for technology", - "Prepare for system design questions", - ], - commonQuestions: [ - "How would you design Google Search?", - "Explain how you would handle billions of queries", - "What would you do if Gmail was slow?", - ], - }, - { - company: "Amazon", - logo: "/icons/amazon.png", - focus: "Leadership Principles", - tips: [ - "Know all 16 Leadership Principles", - "Use STAR method for behavioral questions", - "Focus on customer obsession", - "Demonstrate ownership mindset", - ], - commonQuestions: [ - "Tell me about a time you disagreed with your manager", - "Describe a time you had to make a decision with incomplete information", - "How do you handle tight deadlines?", - ], - }, - { - company: "Microsoft", - logo: "/icons/mircosoft.png", - focus: "Growth Mindset & Collaboration", - tips: [ - "Emphasize continuous learning", - "Show collaborative approach", - "Demonstrate inclusive thinking", - "Focus on impact and results", - ], - commonQuestions: [ - "How do you handle failure?", - "Tell me about a time you helped a colleague", - "What motivates you to learn new things?", - ], - }, -] - -// Mock interview simulator data -const mockInterviewQuestions = [ - { - type: "technical", - question: "Implement a function to reverse a linked list", - difficulty: "Medium", - hints: ["Think about iterative vs recursive approach", "Consider edge cases like empty list"], - }, - { - type: "behavioral", - question: "Tell me about a time you had to work with a difficult team member", - framework: "STAR Method", - hints: ["Situation", "Task", "Action", "Result"], - }, - { - type: "system-design", - question: "Design a URL shortener like bit.ly", - difficulty: "Hard", - hints: ["Consider scale", "Database design", "Caching strategy"], - }, -] - const InterviewPrepPage: React.FC = () => { const [activeTab, setActiveTab] = useState<"overview" | "technical" | "behavioral" | "companies" | "practice">( "overview", ) - const [selectedQuestion, setSelectedQuestion] = useState(null) const [expandedCategories, setExpandedCategories] = useState<{ [key: string]: boolean }>({}) - const toggleCategory = (categoryIndex: number) => { setExpandedCategories((prev) => ({ ...prev, @@ -476,6 +53,624 @@ const InterviewPrepPage: React.FC = () => { [index]: !prev[index], })) } + const behavioralQuestions = [ + { + category: "Leadership", + questions: [ + "Tell me about a time you led a team through a difficult project", + "Describe a situation where you had to influence others without authority", + "How do you handle team conflicts?", + ], + }, + { + category: "Problem Solving", + questions: [ + "Describe the most challenging technical problem you've solved", + "Tell me about a time you failed and what you learned", + "How do you approach debugging complex issues?", + ], + }, + { + category: "Communication", + questions: [ + "Explain a complex technical concept to a non-technical person", + "Tell me about a time you had to give difficult feedback", + "How do you handle disagreements with stakeholders?", + ], + }, + { + category: "Growth & Learning", + questions: [ + "How do you stay updated with new technologies?", + "Tell me about a time you had to learn something completely new", + "What's the most important thing you've learned in your career?", + ], + }, + ] + + const companyTips = [ + { + company: "Google", + logo: "/img/google.png", + focus: "Googleyness & Leadership", + industry: "Technology", + roleTypes: ["Software Engineer", "Product Manager", "Data Scientist", "Site Reliability Engineer"], + focusAreas: ["Scalability", "Problem-Solving", "Innovation", "Technical Excellence"], + tips: [ + "Focus on scalability and efficiency in your solutions", + "Demonstrate analytical thinking with data-driven approaches", + "Show passion for technology and continuous learning", + "Prepare for system design questions with real-world examples", + "Practice coding problems on platforms like LeetCode (focus on medium-hard)", + "Understand Google's products and their technical challenges", + "Be ready to discuss trade-offs in your technical decisions", + "Show how you've handled ambiguous problems", + ], + commonQuestions: [ + { + question: "How would you design Google Search?", + answer: + "Start with requirements gathering (billions of queries, sub-second response), then discuss web crawling architecture, inverted indexing, ranking algorithms like PageRank, distributed systems with load balancing, caching strategies at multiple levels, and real-time updates handling. Consider data freshness, personalization, and spam detection.", + category: "System Design", + }, + { + question: "Explain how you would handle billions of queries per day", + answer: + "Implement horizontal scaling with load balancers, use CDNs for static content, implement multi-level caching (browser, CDN, application, database), database sharding and replication, microservices architecture, auto-scaling based on traffic patterns, and comprehensive monitoring with circuit breakers.", + category: "System Design", + }, + { + question: "What would you do if Gmail was slow?", + answer: + "Systematic debugging approach: check monitoring dashboards, identify bottlenecks (database, network, application), analyze query performance, review caching hit rates, examine resource utilization, implement performance profiling, and deploy fixes like query optimization, caching improvements, or infrastructure scaling.", + category: "Problem Solving", + }, + { + question: "Tell me about a time you solved a complex technical problem", + answer: + "Use STAR method: Situation (complex distributed system issue), Task (restore service and prevent recurrence), Action (systematic debugging, root cause analysis, implemented monitoring), Result (99.9% uptime improvement, prevented similar issues). Focus on technical depth and problem-solving methodology.", + category: "Behavioral", + }, + { + question: "How do you stay updated with technology trends?", + answer: + "Demonstrate continuous learning: follow tech blogs, contribute to open source, attend conferences, experiment with new technologies, participate in tech communities, and apply learnings to solve real problems. Show specific examples.", + category: "Behavioral", + }, + ], + }, + { + company: "Amazon", + logo: "/img/amazon.png", + focus: "Leadership Principles", + industry: "E-commerce/Cloud", + roleTypes: ["Software Engineer", "Solutions Architect", "Product Manager", "DevOps Engineer"], + focusAreas: ["Leadership Principles", "Customer Obsession", "Ownership", "Bias for Action"], + tips: [ + "Master all 16 Leadership Principles with 2-3 specific examples each", + "Use STAR method for all behavioral questions", + "Focus on customer obsession in every answer", + "Demonstrate ownership mindset and long-term thinking", + "Prepare examples showing bias for action and delivering results", + "Show how you've simplified processes or invented solutions", + "Quantify your impact with specific metrics", + "Be ready to discuss failures and learnings", + ], + commonQuestions: [ + { + question: "Tell me about a time you disagreed with your manager", + answer: + "Use 'Have Backbone; Disagree and Commit' principle. Situation: disagreement on technical approach. Task: present alternative solution. Action: prepared data-driven analysis, respectfully presented concerns, listened to feedback. Result: adopted hybrid approach that improved performance by 40%. Committed fully once decision was made.", + category: "Behavioral", + }, + { + question: "Describe a time you had to make a decision with incomplete information", + answer: + "Demonstrate 'Bias for Action'. Situation: critical system outage with limited debugging info. Task: restore service quickly. Action: gathered available data, made calculated decision based on patterns, implemented fix with rollback plan. Result: restored service in 30 minutes, prevented $100K revenue loss.", + category: "Behavioral", + }, + { + question: "How do you handle tight deadlines?", + answer: + "Show 'Deliver Results' and 'Ownership'. Situation: product launch deadline at risk. Task: deliver core features on time. Action: prioritized ruthlessly, communicated trade-offs to stakeholders, worked with team to optimize scope. Result: launched on time with 95% of planned features, customer satisfaction remained high.", + category: "Behavioral", + }, + { + question: "Design a system like Amazon's recommendation engine", + answer: + "Requirements: real-time recommendations, handle millions of users, personalized results. Architecture: data ingestion pipeline, feature engineering, ML models (collaborative filtering, content-based, deep learning), real-time serving layer, A/B testing framework, feedback loop for continuous improvement.", + category: "System Design", + }, + { + question: "Tell me about a time you simplified a process", + answer: + "Use 'Invent and Simplify'. Situation: complex deployment process taking 4 hours. Task: reduce deployment time and errors. Action: automated manual steps, created CI/CD pipeline, added automated testing. Result: reduced deployment time to 30 minutes, decreased errors by 80%.", + category: "Behavioral", + }, + ], + }, + { + company: "Meta (Facebook)", + logo: "/img/meta.png", + focus: "Move Fast & Impact", + industry: "Social Media/VR", + roleTypes: ["Software Engineer", "Product Manager", "Data Scientist", "Research Scientist"], + focusAreas: ["Scale", "Impact", "Execution", "People Connection"], + tips: [ + "Focus on massive scale and global impact", + "Demonstrate ability to move fast and iterate", + "Show examples of connecting people or communities", + "Prepare for questions about handling billions of users", + "Understand Meta's products and their technical challenges", + "Be ready to discuss privacy and safety considerations", + "Show data-driven decision making", + "Demonstrate growth mindset and learning from failures", + ], + commonQuestions: [ + { + question: "How would you design Facebook's News Feed?", + answer: + "Requirements: personalized content, real-time updates, billions of users. Architecture: content ingestion, ranking algorithms (engagement prediction, relevance scoring), edge timeline generation, caching strategies, real-time updates with WebSockets, content moderation pipeline, and A/B testing framework.", + category: "System Design", + }, + { + question: "Tell me about a time you had to make a trade-off between speed and quality", + answer: + "Situation: urgent security fix needed. Task: balance quick deployment with thorough testing. Action: implemented fix with comprehensive monitoring, deployed to small percentage first, gradually rolled out. Result: fixed security issue within 24 hours while maintaining system stability.", + category: "Behavioral", + }, + { + question: "How would you handle a feature that's negatively impacting user engagement?", + answer: + "Data analysis approach: segment users, analyze metrics, identify root causes, A/B test solutions, gather qualitative feedback. Action: iterate quickly, measure impact, communicate with stakeholders. Focus on user value and long-term engagement over short-term metrics.", + category: "Product Sense", + }, + { + question: "Design a system to detect fake accounts", + answer: + "Multi-layered approach: behavioral analysis (login patterns, friend requests), content analysis (spam detection), graph analysis (suspicious connection patterns), machine learning models, real-time scoring system, human review workflow, and continuous model improvement.", + category: "System Design", + }, + { + question: "Tell me about a time you influenced without authority", + answer: + "Situation: cross-team project with conflicting priorities. Task: align teams on common goal. Action: built relationships, presented data showing mutual benefits, created shared success metrics. Result: successful project delivery, improved cross-team collaboration for future projects.", + category: "Behavioral", + }, + ], + }, + { + company: "Apple", + logo: "/img/apple.png", + focus: "Innovation & User Experience", + industry: "Consumer Electronics", + roleTypes: ["Software Engineer", "Hardware Engineer", "Product Manager", "Design Engineer"], + focusAreas: ["User Experience", "Innovation", "Quality", "Privacy"], + tips: [ + "Focus on user experience and design thinking", + "Demonstrate attention to detail and quality", + "Show passion for Apple products and ecosystem", + "Prepare examples of innovative solutions", + "Understand Apple's privacy-first approach", + "Be ready to discuss cross-functional collaboration", + "Show how you've delivered polished, user-friendly solutions", + "Demonstrate ability to work under high standards", + ], + commonQuestions: [ + { + question: "How would you improve Siri?", + answer: + "Focus on user experience: better natural language understanding, contextual awareness, privacy-preserving personalization, faster response times, expanded capabilities, seamless device integration, and accessibility improvements. Balance innovation with Apple's privacy principles.", + category: "Product Design", + }, + { + question: "Tell me about a time you had to meet very high quality standards", + answer: + "Situation: developing user-facing feature with strict quality requirements. Task: deliver bug-free, polished experience. Action: implemented comprehensive testing, code reviews, user testing, performance optimization. Result: zero critical bugs in production, positive user feedback.", + category: "Behavioral", + }, + { + question: "How would you design a privacy-focused messaging system?", + answer: + "End-to-end encryption, on-device processing, minimal data collection, secure key exchange, forward secrecy, metadata protection, secure deletion, and transparent privacy controls. Balance security with user experience and performance.", + category: "System Design", + }, + { + question: "Describe a time you had to innovate under constraints", + answer: + "Situation: limited resources for new feature. Task: deliver innovative solution within constraints. Action: creative problem-solving, leveraged existing technologies, focused on core user value. Result: delivered feature that exceeded expectations while staying within budget.", + category: "Behavioral", + }, + { + question: "How do you ensure your code is maintainable and scalable?", + answer: + "Clean code principles, comprehensive documentation, modular architecture, automated testing, code reviews, performance monitoring, and following established patterns. Focus on long-term maintainability and team collaboration.", + category: "Technical", + }, + ], + }, + { + company: "Netflix", + logo: "/img/netflix.png", + focus: "Freedom & Responsibility", + industry: "Streaming/Entertainment", + roleTypes: ["Software Engineer", "Data Engineer", "Product Manager", "ML Engineer"], + focusAreas: ["Scale", "Personalization", "Reliability", "Data-Driven"], + tips: [ + "Understand Netflix's culture of freedom and responsibility", + "Focus on high-performance culture and results", + "Demonstrate ability to work independently", + "Show examples of data-driven decision making", + "Prepare for questions about streaming at scale", + "Understand personalization and recommendation systems", + "Be ready to discuss A/B testing and experimentation", + "Show how you've handled ambiguous problems", + ], + commonQuestions: [ + { + question: "How would you design Netflix's recommendation system?", + answer: + "Multi-algorithm approach: collaborative filtering, content-based filtering, deep learning models, contextual bandits for exploration/exploitation, real-time personalization, A/B testing framework, and feedback loops. Handle cold start problem and diverse content catalog.", + category: "System Design", + }, + { + question: "Tell me about a time you took ownership of a problem", + answer: + "Situation: critical service degradation affecting user experience. Task: identify and fix root cause. Action: took full ownership, coordinated with multiple teams, implemented both immediate fix and long-term solution. Result: restored service, prevented future occurrences.", + category: "Behavioral", + }, + { + question: "How would you handle video streaming for millions of concurrent users?", + answer: + "CDN strategy, adaptive bitrate streaming, content pre-positioning, load balancing, caching at multiple levels, real-time monitoring, graceful degradation, and global infrastructure optimization. Consider peak traffic patterns and regional differences.", + category: "System Design", + }, + { + question: "Describe a time you had to make a decision with limited data", + answer: + "Situation: new feature launch decision with incomplete user research. Task: decide on launch strategy. Action: analyzed available data, made assumptions explicit, designed experiments to validate quickly. Result: successful launch with rapid iteration based on real user feedback.", + category: "Behavioral", + }, + ], + }, + { + company: "Microsoft", + logo: "/img/microsoft.png", + focus: "Growth Mindset & Collaboration", + industry: "Technology", + roleTypes: ["Software Engineer", "Program Manager", "Cloud Architect", "AI Engineer"], + focusAreas: ["Growth Mindset", "Collaboration", "Inclusive Design", "Cloud Computing"], + tips: [ + "Emphasize continuous learning and growth mindset", + "Show collaborative approach and inclusive thinking", + "Demonstrate how you've helped others succeed", + "Focus on impact, results, and customer value", + "Prepare examples of learning from failures", + "Understand Microsoft's mission and recent innovations", + "Show experience with cloud technologies", + "Demonstrate inclusive design thinking", + ], + commonQuestions: [ + { + question: "How do you handle failure?", + answer: + "Growth mindset approach: acknowledge failure quickly, analyze root causes, extract learnings, apply improvements, share knowledge with team. Example: failed project taught me better stakeholder communication, leading to 30% improvement in project success rate.", + category: "Behavioral", + }, + { + question: "Tell me about a time you helped a colleague", + answer: + "Situation: colleague struggling with complex technical problem. Task: help without taking over. Action: paired programming, knowledge sharing, mentoring approach. Result: colleague solved problem, gained new skills, became go-to person for similar issues.", + category: "Behavioral", + }, + { + question: "How would you design Microsoft Teams?", + answer: + "Requirements: real-time communication, enterprise scale, security, integration. Architecture: WebRTC for video/audio, WebSocket for messaging, microservices, Azure cloud infrastructure, Office 365 integration, security/compliance features, cross-platform support.", + category: "System Design", + }, + { + question: "What motivates you to learn new things?", + answer: + "Connect to growth mindset: curiosity about solving new problems, staying relevant in rapidly evolving tech landscape, helping customers achieve more, contributing to team success. Provide specific examples of recent learning and application.", + category: "Behavioral", + }, + ], + }, + ] + + const mockInterviewQuestions = [ + { + type: "technical", + question: "Implement a function to reverse a linked list", + difficulty: "Medium", + hints: ["Think about iterative vs recursive approach", "Consider edge cases like empty list"], + }, + { + type: "behavioral", + question: "Tell me about a time you had to work with a difficult team member", + framework: "STAR Method", + hints: ["Situation", "Task", "Action", "Result"], + }, + { + type: "system-design", + question: "Design a URL shortener like bit.ly", + difficulty: "Hard", + hints: ["Consider scale", "Database design", "Caching strategy"], + }, + ] + + const practicePlatforms = [ + { + name: "LeetCode", + description: "Most popular coding interview platform", + problems: "2000+", + difficulty: ["Easy", "Medium", "Hard"], + url: "https://leetcode.com/", + features: ["Mock Interviews", "Company Tags", "Discussion Forums", "Premium Content"], + }, + { + name: "HackerRank", + description: "Comprehensive coding challenges and assessments", + problems: "1000+", + difficulty: ["Easy", "Medium", "Hard"], + url: "https://hackerrank.com/", + features: ["Skill Assessments", "Certification", "Company Challenges", "Interview Prep"], + }, + { + name: "CodeChef", + description: "Competitive programming and contests platform", + problems: "3000+", + difficulty: ["Easy", "Medium", "Hard"], + url: "https://www.codechef.com/", + features: ["Monthly Contests", "Long Challenge", "Cook-Off", "Practice Problems"], + }, + ]; + + const technicalResources = [ + { + category: "📊 Data Structures & Algorithms", + description: "Master core algorithms and problem-solving patterns for interviews", + totalProblems: 220, + subcategories: [ + { + title: "Arrays & Strings", + difficulty: "Easy", + problems: 50, + subtopics: [ + "Two Pointers", "Sliding Window", "String Manipulation", "Prefix Sums", "Rotation & Reversal", + "Frequency Counting", "Hashing for Arrays", "Anagram Problems" + ], + resources: [ + { name: "LeetCode Arrays", url: "https://leetcode.com/tag/array/" }, + { name: "HackerRank Strings", url: "https://hackerrank.com/domains/algorithms?filters%5Bsubdomains%5D%5B%5D=strings" }, + { name: "NeetCode Array Playlist", url: "https://www.youtube.com/playlist?list=PLot-Xpze53lfOdF3KwpMSFEyfE77zIwiP" } + ], + }, + { + title: "Linked Lists", + difficulty: "Medium", + problems: 30, + subtopics: [ + "Traversal", "Reversal", "Cycle Detection", "Merge Operations", "Dummy Nodes", + "Doubly Linked List", "Skip Lists" + ], + resources: [ + { name: "LeetCode Linked List", url: "https://leetcode.com/tag/linked-list/" }, + { name: "GeeksforGeeks", url: "https://geeksforgeeks.org/data-structures/linked-list/" }, + { name: "FreeCodeCamp Linked List", url: "https://www.youtube.com/watch?v=Hj_rA0dhr2I" } + ], + }, + { + title: "Trees & Graphs", + difficulty: "Hard", + problems: 50, + subtopics: [ + "Binary Trees", "BST Operations", "Tree Traversals", "Graph Representations", "DFS & BFS", + "Shortest Path", "Topological Sort", "Union-Find", "Minimum Spanning Tree" + ], + resources: [ + { name: "LeetCode Tree", url: "https://leetcode.com/tag/tree/" }, + { name: "LeetCode Graph", url: "https://leetcode.com/tag/graph/" }, + { name: "WilliamFiset Graph Theory", url: "https://www.youtube.com/playlist?list=PLDV1Zeh2NRsB6SWUrDFW2RmDotAfPbeHu" } + ], + }, + { + title: "Dynamic Programming", + difficulty: "Hard", + problems: 50, + subtopics: [ + "1D DP", "2D DP", "Memoization", "Tabulation", "State Optimization", + "Knapsack Variants", "Subsequence Problems", "Game Theory DP" + ], + resources: [ + { name: "LeetCode DP", url: "https://leetcode.com/tag/dynamic-programming/" }, + { name: "DP Patterns", url: "https://leetcode.com/discuss/general-discussion/458695/dynamic-programming-patterns" }, + { name: "NeetCode DP Playlist", url: "https://www.youtube.com/playlist?list=PLot-Xpze53ldVwtstag2TL4HQhAnC8m4D" } + ], + }, + { + title: "Other Important Topics", + difficulty: "Medium", + problems: 40, + subtopics: [ + "Heaps", "Hash Tables", "Bit Manipulation", "Greedy Algorithms", "Backtracking", + "Math & Number Theory", "Sorting Algorithms", "Binary Search Variants" + ], + resources: [ + { name: "Heap Guide", url: "https://www.geeksforgeeks.org/heap-data-structure/" }, + { name: "Backtracking Patterns", url: "https://leetcode.com/tag/backtracking/" }, + { name: "Princeton Algorithms", url: "https://algs4.cs.princeton.edu/home/" } + ], + }, + ], + }, + { + category: "🏗️ System Design", + description: "Learn to design scalable, fault-tolerant systems", + totalProblems: 50, + subcategories: [ + { + title: "Core Concepts", + difficulty: "Medium", + problems: 15, + subtopics: [ + "Scalability", "Load Balancing", "Caching", "Database Sharding", "CAP Theorem", + "Consistency Models", "Fault Tolerance" + ], + resources: [ + { name: "System Design Primer", url: "https://github.com/donnemartin/system-design-primer" }, + { name: "High Scalability", url: "http://highscalability.com/" }, + { name: "ByteByteGo YouTube", url: "https://www.youtube.com/c/ByteByteGo" } + ], + }, + { + title: "Real-world Systems", + difficulty: "Hard", + problems: 20, + subtopics: [ + "URL Shortener", "Chat System", "News Feed", "Search Engine", "Video Streaming", + "Payment Gateway", "Social Media Platform" + ], + resources: [ + { name: "Grokking System Design", url: "https://educative.io/courses/grokking-the-system-design-interview" }, + { name: "System Design Interview", url: "https://bytebytego.com/" } + ], + }, + { + title: "Other Important Topics", + difficulty: "Medium", + problems: 15, + subtopics: [ + "Monitoring & Logging", "Event-driven Architecture", "Message Queues", "Content Delivery Networks", + "Security in System Design" + ], + resources: [ + { name: "Grafana Monitoring", url: "https://grafana.com/oss/grafana/" }, + { name: "Event-driven Design", url: "https://microservices.io/patterns/rel/async-messaging.html" } + ], + }, + ], + }, + { + category: "🗄️ Database Design", + description: "Learn relational & NoSQL databases for real-world applications", + totalProblems: 70, + subcategories: [ + { + title: "SQL Basics", + difficulty: "Easy", + problems: 20, + subtopics: [ + "SELECT Queries", "Joins", "Indexes", "Aggregate Functions", "Stored Procedures", + "Views", "Transactions" + ], + resources: [ + { name: "SQLBolt", url: "https://sqlbolt.com/" }, + { name: "LeetCode Database", url: "https://leetcode.com/problemset/database/" } + ], + }, + { + title: "NoSQL & Scaling", + difficulty: "Medium", + problems: 20, + subtopics: [ + "Document Stores", "Key-Value Stores", "Column Stores", "Graph Databases", + "Sharding", "Replication" + ], + resources: [ + { name: "MongoDB Basics", url: "https://www.mongodb.com/basics" }, + { name: "Cassandra Guide", url: "https://cassandra.apache.org/" } + ], + }, + { + title: "Advanced Design", + difficulty: "Hard", + problems: 15, + subtopics: [ + "Normalization", "Denormalization", "Indexing Strategies", "Partitioning", + "Data Warehousing", "Query Optimization" + ], + resources: [ + { name: "Database Normalization", url: "https://www.guru99.com/database-normalization.html" }, + { name: "AWS Data Warehousing", url: "https://aws.amazon.com/redshift/" } + ], + }, + { + title: "Other Important Topics", + difficulty: "Medium", + problems: 15, + subtopics: [ + "ACID Properties", "Database Security", "Backup & Recovery", "OLAP vs OLTP", + "Temporal Databases" + ], + resources: [ + { name: "Transactions in SQL", url: "https://www.postgresql.org/docs/current/tutorial-transactions.html" } + ], + }, + ], + }, + { + category: "🔌 API Design & Development", + description: "REST, GraphQL, and microservices for backend engineering", + totalProblems: 60, + subcategories: [ + { + title: "REST API Design", + difficulty: "Easy", + problems: 15, + subtopics: [ + "HTTP Methods", "CRUD Operations", "Error Handling", "Versioning", "Rate Limiting", + "Pagination", "CORS" + ], + resources: [ + { name: "RESTful API Tutorial", url: "https://restfulapi.net/" }, + { name: "Postman Learning Center", url: "https://learning.postman.com/" } + ], + }, + { + title: "GraphQL", + difficulty: "Medium", + problems: 15, + subtopics: [ + "Queries", "Mutations", "Subscriptions", "Schemas", "Resolvers", + "Apollo Server", "GraphQL Security" + ], + resources: [ + { name: "GraphQL Official Docs", url: "https://graphql.org/learn/" }, + { name: "Apollo GraphQL", url: "https://www.apollographql.com/docs/" } + ], + }, + { + title: "Microservices & Security", + difficulty: "Hard", + problems: 15, + subtopics: [ + "Service Discovery", "API Gateway", "Authentication", "Authorization", "JWT", + "OAuth2", "gRPC" + ], + resources: [ + { name: "Microservices Guide", url: "https://microservices.io/" }, + { name: "JWT Introduction", url: "https://jwt.io/introduction/" } + ], + }, + { + title: "Other Important Topics", + difficulty: "Medium", + problems: 15, + subtopics: [ + "API Testing", "OpenAPI/Swagger", "Async APIs", "WebSockets", "gRPC Streaming", + "API Performance Tuning" + ], + resources: [ + { name: "OpenAPI Specification", url: "https://swagger.io/specification/" }, + { name: "gRPC Basics", url: "https://grpc.io/docs/what-is-grpc/" } + ], + }, + ], + }, + ]; + return ( {
{/* Overview Tab */} {activeTab === "overview" && ( - - -
-
-
- - Your Complete Interview Success Guide -
-

- What Our Interview Prep Section Covers -

-
- -
-
-

- - 📚 - - Comprehensive Coverage -

-
    -
  • - - - Technical Mastery: 500+ coding problems, algorithms, data structures, and - system design challenges - -
    • -
  • - - - Behavioral Excellence: STAR method framework, leadership scenarios, and - communication skills - -
    • -
  • - - - Company Intelligence: FAANG-specific strategies, culture insights, and - insider tips - -
    • -
  • - - - Mock Practice: Real-time simulations with feedback and performance tracking - -
    • -
-
- -
-

- - ⚡ - - Why Both Technical & Behavioral Matter -

-
-
-

- Technical Skills (60% Weight) -

-

- Prove you can solve complex problems, write clean code, and design scalable systems. - Technical competence is your entry ticket. -

-
-
-

- Behavioral Skills (40% Weight) -

-

- Demonstrate leadership, collaboration, and cultural fit. Many technically strong candidates - fail here due to poor communication or team dynamics. -

-
-
-
-

- 💡 Key Insight: Top companies hire for both technical excellence AND cultural - alignment. Neglecting either aspect significantly reduces your success rate. -

-
-
-
-
- - - -
-

Interview Process Journey

-

- Navigate each stage strategically with our comprehensive roadmap -

-
- -
- {/* Background pattern */} -
-
-
- - {/* Diagonal flowchart */} -
- {[ - { - step: "01", - title: "Resume Optimization", - subtitle: "Foundation Building Phase", - icon: "📄", - description: - "Craft a compelling resume that showcases your achievements, aligns with job requirements, and passes ATS screening systems", - color: "from-blue-500 to-blue-600", - bgColor: "bg-blue-500", - duration: "Ongoing preparation", - difficulty: "Medium", - keyFocus: "Professional Presentation & ATS Optimization", - tips: [ - "Tailor resume for each specific role and company", - "Use action verbs and quantify achievements with metrics", - "Optimize for ATS with relevant keywords from job description", - "Keep format clean, consistent, and easy to scan", - "Include relevant projects, certifications, and technical skills", - ], - commonQuestions: [ - "Walk me through your resume", - "Tell me about this project on your resume", - "Why did you choose this career path?", - ], - }, - { - step: "02", - title: "Technical Assessment", - subtitle: "Core Competency Evaluation", - icon: "💻", - description: - "Deep dive into coding abilities, algorithmic thinking, system design knowledge, and technical problem-solving approach", - color: "from-green-500 to-green-600", - bgColor: "bg-green-500", - duration: "60-120 minutes", - difficulty: "Hard", - keyFocus: "Problem Solving & Code Quality", - tips: [ - "Practice coding on whiteboard/shared editor daily", - "Think out loud - explain your thought process clearly", - "Ask clarifying questions before jumping into code", - "Test your solution with edge cases and optimize", - "Know time/space complexity of your solutions", - ], - commonQuestions: [ - "Implement [data structure/algorithm]", - "Design a system for [specific use case]", - "Optimize this code for better performance", - ], - }, - { - step: "03", - title: "Behavioral Deep-Dive", - subtitle: "Leadership & Culture Assessment", - icon: "🤝", - description: - "Comprehensive evaluation of soft skills, leadership potential, conflict resolution abilities, and team collaboration style", - color: "from-purple-500 to-purple-600", - bgColor: "bg-purple-500", - duration: "45-75 minutes", - difficulty: "Medium", - keyFocus: "Leadership & Collaboration", - tips: [ - "Master the STAR method (Situation, Task, Action, Result)", - "Prepare 5-7 detailed stories covering different competencies", - "Show growth mindset - discuss lessons learned from failures", - "Demonstrate impact with specific metrics and outcomes", - "Practice active listening and ask follow-up questions", - ], - commonQuestions: [ - "Tell me about a time you led a difficult project", - "Describe a conflict with a teammate and resolution", - "Share an example of when you failed and what you learned", - ], - }, - { - step: "04", - title: "Final Alignment", - subtitle: "Mutual Fit Confirmation", - icon: "🎯", - description: - "Final evaluation covering compensation expectations, role clarity, team dynamics, and long-term career alignment", - color: "from-orange-500 to-red-500", - bgColor: "bg-orange-500", - duration: "30-60 minutes", - difficulty: "Medium", - keyFocus: "Mutual Fit & Expectations", - tips: [ - "Research industry salary benchmarks thoroughly", - "Prepare thoughtful questions about team and growth", - "Show genuine enthusiasm for the role and company", - "Discuss career goals and how role aligns with them", - "Be ready to negotiate professionally and respectfully", - ], - commonQuestions: [ - "What are your career goals for the next 2-3 years?", - "How do you handle work-life balance?", - "What questions do you have for us?", - ], - }, - ].map((stage, index) => { - return ( - - {index < 3 && ( -
-
- -
- - - - - -
- )} - -
- - -
- - {stage.step} -
- - {stage.icon} - - - - -
-
-
- -
-
-
-

- {stage.title} -

-

- {stage.subtitle} -

-
-
- - {stage.difficulty} - - - {stage.duration} - -
-
- -

- {stage.description} -

- -
-

- - Key Focus: {stage.keyFocus} -

-
- -
- - - {showTips[index] && ( - -
    - {stage.tips.map((tip, tipIndex) => ( - - - {tip} - - ))} -
- - )} - -
- -
- - - {showQuestions[index] && ( - -
- {stage.commonQuestions.map((question, qIndex) => ( - -

"{question}"

- - ))} -
- - )} - -
-
- -
- - ) - })} -
-
- - - -
-

Preparation Strategy

-
-
-
-
-
- 🧠 -
-

Problem-Solving Mastery

-

- Build strong algorithmic thinking through consistent practice. Focus on understanding patterns - rather than memorizing solutions. -

-
-
-
- 💬 -
-

Communication Excellence

-

- Practice explaining complex concepts clearly. Develop your ability to think out loud and - collaborate effectively. -

-
-
-
- 🎭 -
-

Behavioral Readiness

-

- Prepare compelling stories using the STAR method. Showcase leadership, growth mindset, and - cultural alignment. -

-
-
- -
-
- 💡 - Pro Tip: Balance Your Preparation -
-

- Allocate 60% of your time to technical skills, 30% to behavioral preparation, and 10% to company - research. This balance ensures you're well-rounded and confident in all interview stages. -

-
-
- - - -

- Quick Access to Resources -

-
- {[ - { - id: "technical", - title: "Technical Prep", - icon: "💻", - description: "Coding challenges, algorithms, system design", - color: "from-blue-500 to-blue-600", - items: ["500+ Problems", "System Design", "Code Review"], - }, - { - id: "behavioral", - title: "Behavioral Prep", - icon: "🤝", - description: "STAR method, leadership stories, soft skills", - color: "from-green-500 to-green-600", - items: ["STAR Framework", "Leadership", "Communication"], - }, - { - id: "companies", - title: "Company Guides", - icon: "🏢", - description: "Company-specific tips and strategies", - color: "from-purple-500 to-purple-600", - items: ["FAANG Tips", "Culture Fit", "Specific Questions"], - }, - { - id: "practice", - title: "Mock Practice", - icon: "🎯", - description: "Simulate real interview conditions", - color: "from-orange-500 to-orange-600", - items: ["Live Practice", "Feedback", "Time Management"], - }, - ].map((section) => ( - setActiveTab(section.id as any)} - whileHover={{ y: -5 }} - > -
-
{section.icon}
-

{section.title}

-
-
-

{section.description}

-
- {section.items.map((item, i) => ( -
- - {item} -
- ))} -
-
- - Explore Section → - -
-
- - ))} -
- - {/* Quick Stats */} - -
-
-
500+
-
Practice Questions
-
-
-
50+
-
System Design Topics
-
-
-
20+
-
Company Guides
-
-
-
95%
-
Success Rate
-
-
- - + )} {/* Technical Tab */} {activeTab === "technical" && ( - - -
-
-
- - Technical Interview Mastery -
-

- Master Technical Interviews -

-

- Technical interviews are the cornerstone of software engineering hiring. They evaluate your - problem-solving abilities, coding skills, and understanding of computer science fundamentals. - Success requires consistent practice, pattern recognition, and the ability to communicate your - thought process clearly. -

-
-
-
-
- 🧠 -
-

Problem Solving

-

- Develop systematic approaches to break down complex problems into manageable components. -

-
-
-
- ⚡ -
-

Pattern Recognition

-

- Learn to identify common patterns and apply proven techniques to solve similar problems - efficiently. -

-
-
-
- 💬 -
-

Communication

-

- Master the art of explaining your approach, discussing trade-offs, and collaborating with - interviewers. -

-
-
-
-
- 💡 -
-

Success Strategy

-

- Focus on understanding patterns rather than memorizing solutions. Practice explaining your - thought process out loud, and always consider time/space complexity. Consistent daily practice - for 2-3 months typically yields the best results. -

-
-
-
-
- - - - {/* Question Bank by Category - Collapsible */} - -

- 📚 Question Bank by Category -

-
- {technicalResources.map((category, categoryIndex) => { - const headerColors = [ - { gradient: "from-purple-500 to-pink-400", border: "border-purple-500 dark:border-purple-400" }, - { gradient: "from-blue-500 to-sky-400", border: "border-blue-500 dark:border-blue-400" }, - { gradient: "from-green-500 to-green-400", border: "border-green-500 dark:border-green-400" }, - { gradient: "from-orange-500 to-red-500", border: "border-orange-500 dark:border-orange-400" }, - { gradient: "from-pink-500 to-yellow-500", border: "border-pink-500 dark:border-pink-400" }, - { gradient: "from-cyan-500 to-blue-500", border: "border-cyan-500 dark:border-cyan-400" }, - ]; - const { gradient, border } = headerColors[categoryIndex % headerColors.length]; - const subtopicBorderClasses = [ - "question-bank-subtopic-purple", - "question-bank-subtopic-blue", - "question-bank-subtopic-green", - "question-bank-subtopic-orange", - "question-bank-subtopic-pink", - "question-bank-subtopic-cyan" - ]; - return ( -
- {/* Outer header */} - - - {/* Collapsible Content */} - {expandedCategories[categoryIndex] && ( - -
- {category.subcategories.map((subcategory, subIndex) => ( - -
- {/* Subcategory Header */} -
-
- {subcategory.title} -
-
- - {subcategory.difficulty} - - - {subcategory.problems} - -
-
- - {/* Subtopics */} -
-
- Key Topics: -
-
- {subcategory.subtopics.map((topic, topicIndex) => ( - - {topic} - - ))} -
-
- - {/* Resources */} -
-
- Practice Resources: -
- {subcategory.resources.map((resource, resourceIndex) => ( - - 🔗 {resource.name} - - ))} -
-
- ))} -
- - )} -
- ); - })} - -
- - - - {/* Practice Platforms */} - -

- 🎯 Recommended Practice Platforms -

-
- {practicePlatforms.map((platform, index) => ( - -
-

{platform.name}

-

{platform.description}

-
{platform.problems}
-
Problems Available
-
- -
-
- {platform.difficulty.map((diff, diffIndex) => ( - - {diff} - - ))} -
-
- -
-
Key Features:
-
    - {platform.features.map((feature, featureIndex) => ( -
  • - - {feature} -
    • - ))} -
-
- - {/* Push button to bottom */} - - - ))} -
- - - - {/* Tips & Best Practices */} - -

- 💡 Pro Tips for Technical Interview Success -

-
-
-
-
- 1 -
-
-

Start with Easy Problems

-

- Build confidence and understand patterns before tackling harder challenges. -

-
-
-
-
- 2 -
-
-

Practice Consistently

-

- Solve 1-2 problems daily rather than cramming before interviews. -

-
-
-
-
- 3 -
-
-

Focus on Patterns

-

- Learn common problem-solving patterns like two pointers, sliding window, etc. -

-
-
-
-
-
-
- 4 -
-
-

Time Yourself

-

- Practice under time constraints to simulate real interview conditions. -

-
-
-
-
- 5 -
-
-

Explain Your Thinking

-

- Practice verbalizing your approach and reasoning process. -

-
-
-
-
- 6 -
-
-

Review Solutions

-

- Study optimal solutions and alternative approaches after solving problems. -

-
-
-
-
- - + )} {/* Behavioral Tab */} {activeTab === "behavioral" && ( - - {/* Introduction Section */} - -

Behavioral Interview Preparation

-

- Master the art of storytelling and showcase your soft skills with confidence -

- - - {/* What are Behavioral Interviews */} - -
-

- 🤝 - What are Behavioral Interviews? -

-
-
-

- Behavioral interviews focus on how you've handled situations in the past to predict your future - performance. These questions typically start with phrases like "Tell me about a time when..." or - "Describe a situation where..." -

-

- Unlike technical interviews that test your coding skills, behavioral interviews evaluate your - soft skills, cultural fit, and ability to work in a team environment. -

-
-
-

Why They Matter

-
    -
  • - - - 70% of hiring decisions are based on cultural fit - -
    • -
  • - - - Assess leadership and communication skills - -
    • -
  • - - Evaluate problem-solving approach -
    • -
  • - - Determine team collaboration ability -
    • -
-
-
-
- - - {/* STAR Method Guide */} - -

- The STAR Method Framework -

-
- {[ - { - letter: "S", - word: "Situation", - desc: "Set the context and background of your story", - color: "bg-red-500", - }, - { - letter: "T", - word: "Task", - desc: "Describe your responsibility or goal", - color: "bg-yellow-500", - }, - { - letter: "A", - word: "Action", - desc: "Explain the specific steps you took", - color: "bg-green-500", - }, - { - letter: "R", - word: "Result", - desc: "Share the outcome and what you learned", - color: "bg-blue-500", - }, - ].map((item, i) => ( -
-
- {item.letter} -
-

{item.word}

-

{item.desc}

-
- ))} -
- - {/* STAR Method Examples */} -
-
-

- 💡 - Example 1: Leadership Challenge -

-
-
- Situation: -

- "During my internship, our team was behind schedule on a critical project with only 2 weeks - left before the deadline." -

-
-
- Task: -

- "As the junior developer, I needed to help coordinate efforts and find ways to accelerate our - progress." -

-
-
- Action: -

- "I organized daily stand-ups, created a shared task board, and volunteered to work extra hours - on critical features." -

-
-
- Result: -

- "We delivered the project on time, and my manager praised my initiative. I learned the - importance of proactive communication." -

-
-
-
- -
-

- 🔧 - Example 2: Problem Solving -

-
-
- Situation: -

- "Our main application was experiencing frequent crashes affecting 30% of users during peak - hours." -

-
-
- Task: -

- "I was assigned to identify the root cause and implement a solution within 48 hours." -

-
-
- Action: -

- "I analyzed logs, reproduced the issue, and discovered a memory leak in our caching system. I - implemented a fix and added monitoring." -

-
-
- Result: -

- "Crashes reduced by 95%, user satisfaction improved, and we prevented similar issues with - better monitoring." -

-
-
-
-
- - - {/* Common Behavioral Questions - Collapsible */} - -

- Common Behavioral Questions by Category -

-
- {[ - { - category: "Leadership & Initiative", - icon: "👑", - color: "from-purple-500 to-pink-500", - questions: [ - "Tell me about yourself", - "Tell me about a time you led a team through a difficult project", - "Describe a situation where you had to influence others without authority", - "How do you handle team conflicts?", - "Give an example of when you took initiative on a project", - ], - }, - { - category: "Problem Solving & Challenges", - icon: "🧩", - color: "from-blue-500 to-cyan-500", - questions: [ - "Describe a challenging situation you faced and how you handled it", - "Tell me about the most challenging technical problem you've solved", - "Describe a time you failed and what you learned", - "How do you approach debugging complex issues?", - "Tell me about a time you had to make a decision with incomplete information", - ], - }, - { - category: "Teamwork & Communication", - icon: "🤝", - color: "from-green-500 to-teal-500", - questions: [ - "How do you handle conflict with team members?", - "Explain a complex technical concept to a non-technical person", - "Tell me about a time you had to give difficult feedback", - "Describe a time you disagreed with your manager", - "How do you handle disagreements with stakeholders?", - ], - }, - { - category: "Growth & Learning", - icon: "📚", - color: "from-orange-500 to-red-500", - questions: [ - "How do you stay updated with new technologies?", - "Tell me about a time you had to learn something completely new", - "What's the most important thing you've learned in your career?", - "Describe a time you received constructive criticism", - "How do you handle tight deadlines and pressure?", - ], - }, - ].map((section, index) => ( -
- - - {expandedCategories[index] && ( - -
- {section.questions.map((question, i) => ( -
-

"{question}"

-
- ))} -
- - )} -
- ))} -
- - - {/* Do's and Don'ts */} - -

- Do's and Don'ts for Behavioral Interviews -

-
- {/* Do's */} -
-

- ✅ - Do's -

-
- {[ - "Practice with real scenarios from your experience", - "Be concise and specific in your answers", - "Show enthusiasm and passion for your work", - "Use the STAR method to structure responses", - "Prepare 5-7 strong examples beforehand", - "Focus on your individual contributions", - "Quantify results whenever possible", - "Show what you learned from each experience", - ].map((item, i) => ( -
- - {item} -
- ))} -
-
- - {/* Don'ts */} -
-

- ❌ - Don'ts -

-
- {[ - "Memorize robotic, scripted answers", - "Be vague or over-explain situations", - "Appear disinterested or unenthusiastic", - "Speak negatively about previous employers", - "Make up stories or exaggerate experiences", - "Focus only on team achievements without your role", - "Give answers without clear structure", - "Forget to mention the results or outcomes", - ].map((item, i) => ( -
- - {item} -
- ))} -
-
-
- - - {/* Video Resources */} - -

- 🎥 - Video Resources & Learning Materials -

-
- {[ - { - title: "Behavioral Interview Masterclass", - channel: "CareerVidz", - duration: "25 min", - description: "Complete guide to behavioral interviews with real examples", - url: "https://www.youtube.com/watch?v=PJKYqLP6MRE", - thumbnail: "../../img/Behavioural_Interviews1.png", - }, - { - title: "STAR Method Explained", - channel: "Interview Success", - duration: "15 min", - description: "Step-by-step breakdown of the STAR method with practice", - url: "https://www.youtube.com/watch?v=V0jktOX8Jog", - thumbnail: "../../img/Behavioural_Interviews2.png", - }, - { - title: "Mock Behavioral Interview", - channel: "Tech Interview Pro", - duration: "30 min", - description: "Real behavioral interview simulation with feedback", - url: "https://www.youtube.com/watch?v=1qw5ITr3k9E", - thumbnail: "../../img/Behavioural_Interviews3.png", - }, - ].map((video, i) => ( -
- {video.title} -
-

{video.title}

-

{video.description}

-
- {video.channel} - {video.duration} -
- - ▶️ - Watch Video - -
-
- ))} -
- - {/* Additional Resources */} -
-

Additional Learning Resources

-
-
-
📚 Recommended Books
-
    -
  • • "Cracking the Coding Interview" by Gayle McDowell
    • -
  • • "The Behavioral Interview Handbook" by Lewis Lin
    • -
  • • "What Color Is Your Parachute?" by Richard N. Bolles
    • -
-
-
-
🌐 Online Platforms
-
    -
  • • Pramp - Free mock interviews
    • -
  • • InterviewBit - Behavioral question bank
    • -
  • • Glassdoor - Company-specific questions
    • -
-
-
-
- - - {/* Contributor Note */} - -
-

- 🤝 - Join Our Community & Contribute -

-

- Help make this resource better for everyone in the RecodeHive community -

-
- -
-
-
💬
-

Share Your Experience

-

- Share your behavioral interview experiences, both successes and challenges -

-
-
-
📝
-

Suggest Resources

-

- Recommend helpful videos, articles, or tools you've found useful -

-
-
-
🔧
-

Improve Content

-

- Help us add more examples, questions, or improve existing content -

-
-
- -
-

How to Contribute

-
-
-
🚀 Quick Ways to Help
-
    -
  • - - - Join our Discord community and share tips - -
    • -
  • - - - Submit interview questions you've encountered - -
    • -
  • - - - Review and suggest improvements to examples - -
    • -
  • - - - Share company-specific behavioral interview tips - -
    • -
-
-
-
📋 Getting Started
-
- - Join Discord Community - - - Contributing Guide - -
-
-
-
- - + )} {/* Companies Tab */} {activeTab === "companies" && ( - - -

Company-Specific Preparation

-

Tailored strategies for top tech companies

- - -
- {companyTips.map((company, index) => ( - -
- {company.company} -
-

{company.company}

-

Focus: {company.focus}

-
-
- -
-
-

Key Tips

-
    - {company.tips.map((tip, i) => ( -
  • - - {tip} -
    • - ))} -
-
-
-

Common Questions

-
    - {company.commonQuestions.map((question, i) => ( -
  • - "{question}" -
    • - ))} -
-
-
- - ))} -
- + )} {/* Practice Tab */} {activeTab === "practice" && ( - - -

Mock Interview Practice

-

Practice with real interview questions

- - -
- {mockInterviewQuestions.map((question, index) => ( - -
- - {question.type.charAt(0).toUpperCase() + question.type.slice(1)} - - {question.difficulty && ( - - {question.difficulty} - - )} -
- -

{question.question}

- - {question.framework && ( -

Framework: {question.framework}

- )} - -
- -
- - {selectedQuestion === index && ( -
-

Hints:

-
    - {question.hints.map((hint, i) => ( -
  • - • {hint} -
    • - ))} -
-
- )} - - - - ))} -
- - {/* Practice Tools */} - -

Practice Tools

-
-
-
⏱️
-

Timed Practice

-

- Practice with real interview time constraints -

-
-
-
🎥
-

Video Recording

-

- Record yourself to improve presentation skills -

-
-
-
📊
-

Progress Tracking

-

Track your improvement over time

-
-
- - + )}
diff --git a/static/img/amazon.png b/static/img/amazon.png new file mode 100644 index 00000000..7c052952 Binary files /dev/null and b/static/img/amazon.png differ diff --git a/static/img/apple.png b/static/img/apple.png new file mode 100644 index 00000000..7dc25e0a Binary files /dev/null and b/static/img/apple.png differ diff --git a/static/img/google.png b/static/img/google.png new file mode 100644 index 00000000..418072ae Binary files /dev/null and b/static/img/google.png differ diff --git a/static/img/meta.png b/static/img/meta.png new file mode 100644 index 00000000..639fca90 Binary files /dev/null and b/static/img/meta.png differ diff --git a/static/img/microsoft.png b/static/img/microsoft.png new file mode 100644 index 00000000..e62ded75 Binary files /dev/null and b/static/img/microsoft.png differ diff --git a/static/img/netflix.png b/static/img/netflix.png new file mode 100644 index 00000000..31ecb206 Binary files /dev/null and b/static/img/netflix.png differ