From 84736143c6d9cab1ec86b9aac3b139c11b863e70 Mon Sep 17 00:00:00 2001 From: cherylpinto Date: Fri, 15 Aug 2025 17:47:31 +0530 Subject: [PATCH] Added Structured Content for Technical Tab --- src/css/custom.css | 74 ++++ src/pages/interview-prep/index.tsx | 682 ++++++++++++++++++++++++++--- 2 files changed, 688 insertions(+), 68 deletions(-) diff --git a/src/css/custom.css b/src/css/custom.css index 5d1e02ee..faf5c725 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -1701,6 +1701,10 @@ html { .interview-prep-discord-btn{ color:white; +} +.interview-prep-discord-btn:hover{ + color:white; + } [data-theme='dark'] .overview-sidebar-blue{ @@ -1716,5 +1720,75 @@ html { border-color: #a855f7 } +[data-theme='dark'] .technical-outer{ + border-color: #3b82f6 + +} +[data-theme='dark'] .technical-inner{ + border-color: #374151 + +} +[data-theme='dark'] .technical-inner-success{ + border-color: #92400e +} + +[data-theme='dark'] .question-bank-purple{ + border-color: #a855f7 +} +[data-theme='dark'] .question-bank-blue{ + border-color: #3b82f6 +} +[data-theme='dark'] .question-bank-green{ + border-color: #22c55e +} +[data-theme='dark'] .question-bank-orange{ + border-color: v +} +.technical-btn{ + color: white; +} + +.technical-btn:hover{ + color:white; +} +/* Dark mode border overrides for Technical tab subtopic cards */ +/* Purple */ +[data-theme='dark'] .question-bank-subtopic-purple { + border-color: #a855f7 !important; /* purple-500 */ +} + +/* Blue */ +[data-theme='dark'] .question-bank-subtopic-blue { + border-color: #3b82f6 !important; /* blue-500 */ +} + +/* Green */ +[data-theme='dark'] .question-bank-subtopic-green { + border-color: #22c55e !important; /* green-500 */ +} + +/* Orange */ +[data-theme='dark'] .question-bank-subtopic-orange { + border-color: #f97316 !important; /* orange-500 */ +} + +/* Pink */ +[data-theme='dark'] .question-bank-subtopic-pink { + border-color: #ec4899 !important; /* pink-500 */ +} + +/* Cyan */ +[data-theme='dark'] .question-bank-subtopic-cyan { + border-color: #06b6d4 !important; /* cyan-500 */ +} + + +.explore-btn{ + color:white; +} + +.explore-btn:hover{ + color:white; +} \ No newline at end of file diff --git a/src/pages/interview-prep/index.tsx b/src/pages/interview-prep/index.tsx index 5dfec89a..46da6157 100644 --- a/src/pages/interview-prep/index.tsx +++ b/src/pages/interview-prep/index.tsx @@ -62,41 +62,279 @@ const interviewCategories = [ }, ] -// Technical interview resources const technicalResources = [ { - title: "Data Structures & Algorithms", - difficulty: "Beginner to Advanced", - problems: 150, - description: "Master arrays, linked lists, trees, graphs, and dynamic programming", - link: "/docs/category/technical", - tags: ["Arrays", "Trees", "Graphs", "DP"], + 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/" } + ], + }, + ], }, { - title: "System Design", - difficulty: "Intermediate to Advanced", - problems: 25, - description: "Learn to design scalable systems and distributed architectures", - link: "/docs/category/technical", - tags: ["Scalability", "Databases", "Caching", "Load Balancing"], + 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" } + ], + }, + ], }, { - title: "Database Design", - difficulty: "Beginner to Intermediate", - problems: 40, - description: "SQL queries, database optimization, and schema design", - link: "/docs/category/sql", - tags: ["SQL", "NoSQL", "Indexing", "Normalization"], + 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" } + ], + }, + ], }, { - title: "API Design & Development", - difficulty: "Intermediate", - problems: 30, - description: "RESTful APIs, GraphQL, and microservices architecture", - link: "/docs/category/technical", - tags: ["REST", "GraphQL", "Microservices", "Authentication"], + 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 = [ @@ -923,53 +1161,361 @@ const InterviewPrepPage: React.FC = () => { {/* Technical Tab */} {activeTab === "technical" && ( - -

- Technical Interview Preparation -

-

- Master coding challenges and technical concepts -

+ +
+
+
+ + 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. +

+
+
+
+
-
- {technicalResources.map((resource, index) => ( - -
-

{resource.title}

- - {resource.problems} problems - + + {/* 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. +

+
-

{resource.description}

-
- - Difficulty: {resource.difficulty} - +
+
+ 2 +
+
+

Practice Consistently

+

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

+
-
- {resource.tags.map((tag, i) => ( - - {tag} - - ))} +
+
+ 3 +
+
+

Focus on Patterns

+

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

+
- - Start Learning - - - ))} -
+
+
+
+
+ 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. +

+
+
+
+
+ )}