https://code-editor-using-sandpack-nextjs.vercel.app/interview

1<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" href="/_next/static/media/569ce4b8f30dc480-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/93f479601ee12b01-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="stylesheet" href="/_next/static/css/2c8f7b0f474a06ad.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-eaf102db2fa6d4ae.js"/>

1<script src="/_next/static/chunks/4bd1b696-acf712819770d95d.js" async=""></script>

1<script src="/_next/static/chunks/684-39fe090689e89744.js" async=""></script>

1<script src="/_next/static/chunks/main-app-d9794b1200c643e4.js" async=""></script>

1<script src="/_next/static/chunks/363642f4-df8e60c305398800.js" async=""></script>

1<script src="/_next/static/chunks/e58a7f8f-3d276c7ab8c0ee09.js" async=""></script>

1<script src="/_next/static/chunks/57-69d338de3226d977.js" async=""></script>

1<script src="/_next/static/chunks/874-d8020d8ed6197cbb.js" async=""></script>

1<script src="/_next/static/chunks/124-5ab83568f1c1c10e.js" async=""></script>

1<script src="/_next/static/chunks/app/interview/page-201689f053511f52.js" async=""></script>

1<meta name="next-size-adjust" content=""/><title>Code Editor</title><meta name="description" content="Code Editor"/><link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="16x16"/>

1<script>document.querySelectorAll('body link[rel="icon"], body link[rel="apple-touch-icon"]').forEach(el => document.head.appendChild(el))</script>

1<script src="/_next/static/chunks/polyfills-42372ed130431b0a.js" noModule=""></script>

1</head><body class="__variable_5cfdac __variable_9a8899 antialiased"><div class="min-h-screen bg-gray-900 text-white"><header class="bg-gray-800 p-4 border-b border-gray-700"><div class="container mx-auto max-w-5xl flex justify-between items-center"><a class="text-blue-400 hover:underline flex items-center" href="/"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-left w-4 h-4 mr-1" aria-hidden="true"><path d="m15 18-6-6 6-6"></path></svg>Back to Home</a><h1 class="text-xl font-bold">Coding Interview Practice</h1><div class="w-24"></div> </div></header><div class="container mx-auto px-4 py-8 max-w-5xl"><h1 class="text-3xl font-bold mb-8 text-center">Coding Interview Questions</h1><div class="grid gap-6"><div class="bg-gray-800 border border-gray-700 rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow"><div class="p-6"><div class="flex justify-between items-start mb-3"><h2 class="text-xl font-bold">Create a Counter Component</h2><div class="flex items-center space-x-2"><span class="px-3 py-1 rounded text-xs font-medium bg-green-800 text-green-200">Easy</span><span class="px-3 py-1 rounded bg-blue-800 text-blue-200 text-xs font-medium">React</span></div></div><p class="text-gray-300 mb-4">Create a React component that increments a counter when a button is clicked.</p><div class="flex justify-between items-center"><div class="flex items-center space-x-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-code w-4 h-4" aria-hidden="true"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg><span class="text-sm text-gray-400">React</span></div><button class="px-4 py-2 rounded bg-blue-600 hover:bg-blue-700  ">Start</button></div></div></div><div class="bg-gray-800 border border-gray-700 rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow"><div class="p-6"><div class="flex justify-between items-start mb-3"><h2 class="text-xl font-bold">Fetch and Display Data</h2><div class="flex items-center space-x-2"><span class="px-3 py-1 rounded text-xs font-medium bg-yellow-800 text-yellow-200">Medium</span><span class="px-3 py-1 rounded bg-blue-800 text-blue-200 text-xs font-medium">API Integration</span></div></div><p class="text-gray-300 mb-4">Create a component that fetches data from an API and displays it.</p><div class="flex justify-between items-center"><div class="flex items-center space-x-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-code w-4 h-4" aria-hidden="true"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg><span class="text-sm text-gray-400">React</span></div><button class="px-4 py-2 rounded bg-blue-600 hover:bg-blue-700  ">Start</button></div></div></div><div class="bg-gray-800 border border-gray-700 rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow"><div class="p-6"><div class="flex justify-between items-start mb-3"><h2 class="text-xl font-bold">Todo List Application</h2><div class="flex items-center space-x-2"><span class="px-3 py-1 rounded text-xs font-medium bg-yellow-800 text-yellow-200">Medium</span><span class="px-3 py-1 rounded bg-blue-800 text-blue-200 text-xs font-medium">Application Development</span></div></div><p class="text-gray-300 mb-4">Create a simple Todo List application with add, toggle, and delete functionality.</p><div class="flex justify-between items-center"><div class="flex items-center space-x-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-code w-4 h-4" aria-hidden="true"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg><span class="text-sm text-gray-400">React TypeScript</span></div><button class="px-4 py-2 rounded bg-blue-600 hover:bg-blue-700  ">Start</button></div></div></div><div class="bg-gray-800 border border-gray-700 rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow"><div class="p-6"><div class="flex justify-between items-start mb-3"><h2 class="text-xl font-bold">State Management with Context API</h2><div class="flex items-center space-x-2"><span class="px-3 py-1 rounded text-xs font-medium bg-red-800 text-red-200">Hard</span><span class="px-3 py-1 rounded bg-blue-800 text-blue-200 text-xs font-medium">React</span></div></div><p class="text-gray-300 mb-4">Create a theme switcher using React&#x27;s Context API.</p><div class="flex justify-between items-center"><div class="flex items-center space-x-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-code w-4 h-4" aria-hidden="true"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg><span class="text-sm text-gray-400">React TypeScript</span></div><button class="px-4 py-2 rounded bg-blue-600 hover:bg-blue-700  ">Start</button></div></div></div></div></div></div><!--$--><!--/$--><!--$--><!--/$-->

1<script src="/_next/static/chunks/webpack-eaf102db2fa6d4ae.js" async=""></script>

1<script>(self.__next_f=self.__next_f||[]).push([0])</script>

1<script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[7555,[],\"\"]\n3:I[1295,[],\"\"]\n4:I[894,[],\"ClientPageRoot\"]\n5:I[3919,[\"79\",\"static/chunks/363642f4-df8e60c305398800.js\",\"193\",\"static/chunks/e58a7f8f-3d276c7ab8c0ee09.js\",\"57\",\"static/chunks/57-69d338de3226d977.js\",\"874\",\"static/chunks/874-d8020d8ed6197cbb.js\",\"124\",\"static/chunks/124-5ab83568f1c1c10e.js\",\"66\",\"static/chunks/app/interview/page-201689f053511f52.js\"],\"default\"]\n8:I[9665,[],\"MetadataBoundary\"]\na:I[9665,[],\"OutletBoundary\"]\nd:I[4911,[],\"AsyncMetadataOutlet\"]\nf:I[9665,[],\"ViewportBoundary\"]\n11:I[6614,[],\"\"]\n:HL[\"/_next/static/media/569ce4b8f30dc480-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/93f479601ee12b01-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/css/2c8f7b0f474a06ad.css\",\"style\"]\n"])</script>

1<script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"Okk-Ofa09gKiR1dHfhS-0\",\"p\":\"\",\"c\":[\"\",\"interview\"],\"i\":false,\"f\":[[[\"\",{\"children\":[\"interview\",{\"children\":[\"__PAGE__\",{}]}]},\"$undefined\",\"$undefined\",true],[\"\",[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/2c8f7b0f474a06ad.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"__variable_5cfdac __variable_9a8899 antialiased\",\"children\":[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":404}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}]}]]}],{\"children\":[\"interview\",[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[\"__PAGE__\",[\"$\",\"$1\",\"c\",{\"children\":[[\"$\",\"$L4\",null,{\"Component\":\"$5\",\"searchParams\":{},\"params\":{},\"promises\":[\"$@6\",\"$@7\"]}],[\"$\",\"$L8\",null,{\"children\":\"$L9\"}],null,[\"$\",\"$La\",null,{\"children\":[\"$Lb\",\"$Lc\",[\"$\",\"$Ld\",null,{\"promise\":\"$@e\"}]]}]]}],{},null,false]},null,false]},null,false],[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$1\",\"CMEaGz6xMdszzwO2WolyO\",{\"children\":[[\"$\",\"$Lf\",null,{\"children\":\"$L10\"}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}],null]}],false]],\"m\":\"$undefined\",\"G\":[\"$11\",\"$undefined\"],\"s\":false,\"S\":true}\n"])</script>

1<script>self.__next_f.push([1,"12:\"$Sreact.suspense\"\n13:I[4911,[],\"AsyncMetadata\"]\n6:{}\n7:{}\n9:[\"$\",\"$12\",null,{\"fallback\":null,\"children\":[\"$\",\"$L13\",null,{\"promise\":\"$@14\"}]}]\n"])</script>

1<script>self.__next_f.push([1,"c:null\n"])</script>

1<script>self.__next_f.push([1,"10:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\nb:null\n"])</script>

1<script>self.__next_f.push([1,"14:{\"metadata\":[[\"$\",\"title\",\"0\",{\"children\":\"Code Editor\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Code Editor\"}],[\"$\",\"link\",\"2\",{\"rel\":\"icon\",\"href\":\"/favicon.ico\",\"type\":\"image/x-icon\",\"sizes\":\"16x16\"}]],\"error\":null,\"digest\":\"$undefined\"}\ne:{\"metadata\":\"$14:metadata\",\"error\":null,\"digest\":\"$undefined\"}\n"])</script>

1</body></html>