├── .eslintrc.json
├── .gitignore
├── LICENSE
├── README.md
├── components.json
├── next.config.mjs
├── package-lock.json
├── package.json
├── postcss.config.mjs
├── public
    ├── og-image.png
    └── upstash-logo.png
├── src
    ├── app
    │   ├── (root)
    │   │   ├── _components
    │   │   │   ├── Benefits.tsx
    │   │   │   ├── ChallengeCards.tsx
    │   │   │   ├── FeatureCards.tsx
    │   │   │   └── Testimonials.tsx
    │   │   └── page.tsx
    │   ├── favicon.ico
    │   ├── globals.css
    │   ├── layout.tsx
    │   ├── learn-upstash
    │   │   ├── [slug]
    │   │   │   └── page.tsx
    │   │   └── page.tsx
    │   ├── not-found.tsx
    │   ├── redis-basics
    │   │   └── page.tsx
    │   └── redis-data-structures
    │   │   ├── [slug]
    │   │       └── page.tsx
    │   │   └── page.tsx
    ├── components
    │   ├── ChallengeSection.tsx
    │   ├── CommandsTab.tsx
    │   ├── Congrats.tsx
    │   ├── Footer.tsx
    │   ├── Header.tsx
    │   ├── LearningSection.tsx
    │   ├── OverviewTab.tsx
    │   ├── ProgressBar.tsx
    │   ├── RedisCli.tsx
    │   ├── UpstashRedisLearningPlatform.tsx
    │   ├── UseCaseTab.tsx
    │   ├── decorators
    │   │   ├── RotatedText.tsx
    │   │   └── UnderlinedText.tsx
    │   ├── providers
    │   │   └── ThemeProvider.tsx
    │   └── ui
    │   │   ├── accordion.tsx
    │   │   ├── button.tsx
    │   │   ├── card.tsx
    │   │   ├── dialog.tsx
    │   │   ├── progress.tsx
    │   │   ├── resizable.tsx
    │   │   ├── scroll-area.tsx
    │   │   ├── slider.tsx
    │   │   ├── tabs.tsx
    │   │   ├── toast.tsx
    │   │   ├── toaster.tsx
    │   │   └── use-toast.ts
    ├── lib
    │   └── utils.ts
    └── utils
    │   ├── constants.ts
    │   └── problems.ts
├── tailwind.config.ts
└── tsconfig.json


/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | 	"extends": "next/core-web-vitals",
3 | 	"rules": {
4 | 		"react/no-unescaped-entities": "off"
5 | 	}
6 | }
7 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | .yarn/install-state.gz
 8 | 
 9 | # testing
10 | /coverage
11 | 
12 | # next.js
13 | /.next/
14 | /out/
15 | 
16 | # production
17 | /build
18 | 
19 | # misc
20 | .DS_Store
21 | *.pem
22 | 
23 | # debug
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 | 
28 | # local env files
29 | .env*.local
30 | 
31 | # vercel
32 | .vercel
33 | 
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2024 Burak
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 2 | 
 3 | ## Getting Started
 4 | 
 5 | First, run the development server:
 6 | 
 7 | ```bash
 8 | npm run dev
 9 | # or
10 | yarn dev
11 | # or
12 | pnpm dev
13 | # or
14 | bun dev
15 | ```
16 | 
17 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
18 | 
19 | You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
20 | 
21 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
22 | 
23 | ## Learn More
24 | 
25 | To learn more about Next.js, take a look at the following resources:
26 | 
27 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
28 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
29 | 
30 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
31 | 
32 | ## Deploy on Vercel
33 | 
34 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
35 | 
36 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
37 | 


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://ui.shadcn.com/schema.json",
 3 |   "style": "new-york",
 4 |   "rsc": true,
 5 |   "tsx": true,
 6 |   "tailwind": {
 7 |     "config": "tailwind.config.ts",
 8 |     "css": "src/app/globals.css",
 9 |     "baseColor": "zinc",
10 |     "cssVariables": true,
11 |     "prefix": ""
12 |   },
13 |   "aliases": {
14 |     "components": "@/components",
15 |     "utils": "@/lib/utils"
16 |   }
17 | }


--------------------------------------------------------------------------------
/next.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {};
3 | 
4 | export default nextConfig;
5 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "upstash-playground",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@auth/mongodb-adapter": "^3.4.1",
13 |     "@codemirror/lang-javascript": "^6.2.2",
14 |     "@radix-ui/react-accordion": "^1.2.0",
15 |     "@radix-ui/react-dialog": "^1.1.1",
16 |     "@radix-ui/react-icons": "^1.3.0",
17 |     "@radix-ui/react-progress": "^1.1.0",
18 |     "@radix-ui/react-scroll-area": "^1.1.0",
19 |     "@radix-ui/react-slider": "^1.2.0",
20 |     "@radix-ui/react-slot": "^1.1.0",
21 |     "@radix-ui/react-tabs": "^1.1.0",
22 |     "@radix-ui/react-toast": "^1.2.1",
23 |     "@tanstack/react-query": "^5.51.15",
24 |     "@uiw/codemirror-theme-dracula": "^4.23.0",
25 |     "@uiw/react-codemirror": "^4.23.0",
26 |     "class-variance-authority": "^0.7.0",
27 |     "clsx": "^2.1.1",
28 |     "framer-motion": "^11.3.8",
29 |     "lucide-react": "^0.412.0",
30 |     "mongodb": "^6.8.0",
31 |     "mongoose": "^8.5.1",
32 |     "next": "14.2.5",
33 |     "next-auth": "^4.24.7",
34 |     "next-themes": "^0.3.0",
35 |     "react": "^18",
36 |     "react-confetti": "^6.1.0",
37 |     "react-dom": "^18",
38 |     "react-markdown": "^9.0.1",
39 |     "react-resizable-panels": "^2.0.22",
40 |     "react-syntax-highlighter": "^15.5.0",
41 |     "tailwind-merge": "^2.4.0",
42 |     "tailwindcss-animate": "^1.0.7"
43 |   },
44 |   "devDependencies": {
45 |     "@types/node": "^20",
46 |     "@types/react": "^18",
47 |     "@types/react-dom": "^18",
48 |     "@types/react-syntax-highlighter": "^15.5.13",
49 |     "eslint": "^8",
50 |     "eslint-config-next": "14.2.5",
51 |     "postcss": "^8",
52 |     "tailwindcss": "^3.4.1",
53 |     "typescript": "^5"
54 |   }
55 | }
56 | 


--------------------------------------------------------------------------------
/postcss.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('postcss-load-config').Config} */
2 | const config = {
3 |   plugins: {
4 |     tailwindcss: {},
5 |   },
6 | };
7 | 
8 | export default config;
9 | 


--------------------------------------------------------------------------------
/public/og-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/burakorkmez/redis-rush/99a734cade26173a49b7235300c791ed092b21e1/public/og-image.png


--------------------------------------------------------------------------------
/public/upstash-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/burakorkmez/redis-rush/99a734cade26173a49b7235300c791ed092b21e1/public/upstash-logo.png


--------------------------------------------------------------------------------
/src/app/(root)/_components/Benefits.tsx:
--------------------------------------------------------------------------------
 1 | import { benefits } from "@/utils/constants";
 2 | import { motion } from "framer-motion";
 3 | 
 4 | const Benefits = () => {
 5 | 	return (
 6 | 		<>
 7 | 			<motion.div
 8 | 				initial={{ opacity: 0, y: 20 }}
 9 | 				animate={{ opacity: 1, y: 0 }}
10 | 				transition={{ duration: 0.5, delay: 0.8 }}
11 | 				className='mb-20'
12 | 			>
13 | 				<h2 className='text-4xl font-bold text-center mb-10 text-gray-100'>
14 | 					Why Choose{" "}
15 | 					<span className='bg-gradient-to-r from-green-400 to-teal-400 bg-clip-text text-transparent font-bold'>
16 | 						Rush?
17 | 					</span>{" "}
18 | 				</h2>
19 | 				<div className='grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto'>
20 | 					{benefits.map((benefit, index) => (
21 | 						<div key={index} className='flex items-center'>
22 | 							<div className='flex-shrink-0 mr-4'>
23 | 								<div className='w-16 h-16 rounded-full bg-gradient-to-br from-green-400 to-teal-500 flex items-center justify-center'>
24 | 									<benefit.icon className='w-8 h-8 text-white' />
25 | 								</div>
26 | 							</div>
27 | 							<div>
28 | 								<h3 className='text-xl font-semibold mb-1 text-gray-100'>{benefit.title}</h3>
29 | 								<p className='text-gray-300 text-sm'>{benefit.description}</p>
30 | 							</div>
31 | 						</div>
32 | 					))}
33 | 				</div>
34 | 			</motion.div>
35 | 			<div
36 | 				className='absolute inset-0 bg-gradient-to-b from-transparent via-green-500/10 to-transparent blur-3xl -z-10'
37 | 				aria-hidden='true'
38 | 			/>
39 | 		</>
40 | 	);
41 | };
42 | export default Benefits;
43 | 


--------------------------------------------------------------------------------
/src/app/(root)/_components/ChallengeCards.tsx:
--------------------------------------------------------------------------------
 1 | import { challenges } from "@/utils/constants";
 2 | import { motion } from "framer-motion";
 3 | import { useState } from "react";
 4 | 
 5 | import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card";
 6 | import { Button } from "@/components/ui/button";
 7 | import Link from "next/link";
 8 | 
 9 | const MotionCard = motion(Card);
10 | 
11 | const ChallengeCards = () => {
12 | 	const [hoveredChallenge, setHoveredChallenge] = useState<number | null>(null);
13 | 
14 | 	return (
15 | 		<>
16 | 			<motion.h2
17 | 				initial={{ opacity: 0, y: 20 }}
18 | 				animate={{ opacity: 1, y: 0 }}
19 | 				transition={{ duration: 0.5, delay: 1.2 }}
20 | 				className='text-4xl font-bold text-center mb-10 text-gray-100 bg-clip-text text-transparent bg-gradient-to-r from-green-400 via-emerald-500 to-teal-600'
21 | 			>
22 | 				Choose Your Path
23 | 			</motion.h2>
24 | 			<div className='grid grid-cols-1 md:grid-cols-3 gap-8'>
25 | 				{challenges.map((challenge, index) => (
26 | 					<MotionCard
27 | 						key={challenge.id}
28 | 						initial={{ opacity: 0, y: 20 }}
29 | 						animate={{ opacity: 1, y: 0 }}
30 | 						transition={{ duration: 0.5, delay: index * 0.1 + 1.4 }}
31 | 						className={`overflow-hidden bg-gray-800 border-gray-700 transition-all duration-300 transform hover:-translate-y-2 hover:border-teal-500`}
32 | 						onMouseEnter={() => setHoveredChallenge(challenge?.id)}
33 | 						onMouseLeave={() => setHoveredChallenge(null)}
34 | 					>
35 | 						<CardHeader className='pb-4'>
36 | 							<motion.div
37 | 								className={`w-16 h-16 rounded-full bg-gradient-to-br ${challenge.color} flex items-center justify-center mb-4`}
38 | 								animate={{
39 | 									scale: hoveredChallenge === challenge.id ? 1.1 : 1,
40 | 									rotate: hoveredChallenge === challenge.id ? 360 : 0,
41 | 								}}
42 | 								transition={{ duration: 0.3 }}
43 | 							>
44 | 								<challenge.icon className='w-8 h-8 text-white' />
45 | 							</motion.div>
46 | 							<CardTitle className='text-2xl font-bold text-gray-100'>{challenge.title}</CardTitle>
47 | 							<CardDescription className='text-gray-400'>{challenge.description}</CardDescription>
48 | 						</CardHeader>
49 | 						<CardContent>
50 | 							<Button
51 | 								asChild
52 | 								className={`w-full bg-gradient-to-r ${challenge.color} hover:opacity-90 text-white border-0 transition-all duration-300 transform hover:scale-105`}
53 | 							>
54 | 								<Link href={challenge.href} className='flex items-center justify-center'>
55 | 									Start Challenge
56 | 								</Link>
57 | 							</Button>
58 | 						</CardContent>
59 | 					</MotionCard>
60 | 				))}
61 | 			</div>
62 | 		</>
63 | 	);
64 | };
65 | export default ChallengeCards;
66 | 


--------------------------------------------------------------------------------
/src/app/(root)/_components/FeatureCards.tsx:
--------------------------------------------------------------------------------
 1 | import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 2 | import { featureCards } from "@/utils/constants";
 3 | import { motion } from "framer-motion";
 4 | import Image from "next/image";
 5 | 
 6 | const FeatureCards = () => {
 7 | 	return (
 8 | 		<motion.div
 9 | 			initial={{ opacity: 0, y: 20 }}
10 | 			animate={{ opacity: 1, y: 0 }}
11 | 			transition={{ duration: 0.5, delay: 0.6 }}
12 | 			className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-20'
13 | 		>
14 | 			{featureCards.map((card, index) => (
15 | 				<Card
16 | 					key={index}
17 | 					className={`bg-gray-800 border-gray-700 hover:border-${card.color}-500 transition-all duration-300 transform hover:-translate-y-1`}
18 | 				>
19 | 					<CardHeader>
20 | 						<CardTitle className={`flex items-center text-${card.color}-400 text-xl`}>
21 | 							{card.icon && <card.icon className='w-6 h-6 mr-2' />}
22 | 							{card.img && (
23 | 								<Image src={card.img} alt='Upstash logo' className='mr-2' width={24} height={24} />
24 | 							)}
25 | 							{card.title}
26 | 						</CardTitle>
27 | 					</CardHeader>
28 | 					<CardContent>
29 | 						<p className='text-lg text-gray-300'>{card.description}</p>
30 | 					</CardContent>
31 | 				</Card>
32 | 			))}
33 | 		</motion.div>
34 | 	);
35 | };
36 | export default FeatureCards;
37 | 


--------------------------------------------------------------------------------
/src/app/(root)/_components/Testimonials.tsx:
--------------------------------------------------------------------------------
 1 | import { testimonials } from "@/utils/constants";
 2 | import { motion } from "framer-motion";
 3 | import { Card, CardContent } from "@/components/ui/card";
 4 | import { Star, Quote } from "lucide-react";
 5 | 
 6 | const Testimonials = () => {
 7 | 	return (
 8 | 		<motion.div
 9 | 			initial={{ opacity: 0, y: 20 }}
10 | 			animate={{ opacity: 1, y: 0 }}
11 | 			transition={{ duration: 0.5, delay: 0.2 }}
12 | 			className='mb-20 relative'
13 | 		>
14 | 			<h2 className='text-5xl font-bold text-center text-gray-100 mb-4'>
15 | 				What Is Our{" "}
16 | 				<span className='text-transparent bg-clip-text bg-gradient-to-r from-green-400 to-teal-500'>Goal</span>?
17 | 			</h2>
18 | 			<p className='text-gray-300 text-center max-w-2xl mx-auto mt-2 mb-12 text-lg'>
19 | 				(To hear these from you soon! 🙌)
20 | 			</p>
21 | 			<div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-7xl mx-auto px-4'>
22 | 				{testimonials.map((testimonial, index) => (
23 | 					<motion.div
24 | 						key={index}
25 | 						initial={{ opacity: 0, y: 20 }}
26 | 						animate={{ opacity: 1, y: 0 }}
27 | 						transition={{ duration: 0.5, delay: index * 0.1 }}
28 | 					>
29 | 						<Card className='bg-gray-800/50 border-gray-700 backdrop-blur-sm hover:bg-gray-800/80 transition-all duration-300 h-full'>
30 | 							<CardContent className='pt-6 relative h-full flex flex-col'>
31 | 								<Quote className='absolute top-4 right-4 w-10 h-10 text-green-500/20' />
32 | 								<div className='flex items-center mb-4'>
33 | 									{[...Array(5)].map((_, i) => (
34 | 										<Star key={i} className='w-5 h-5 text-yellow-400 fill-current' />
35 | 									))}
36 | 								</div>
37 | 								<p className='text-gray-300 mb-6 italic flex-grow'>"{testimonial.quote}"</p>
38 | 								<div className='flex items-center mt-4'>
39 | 									<div className='w-12 h-12 rounded-full bg-gradient-to-r from-green-400 to-teal-500 flex items-center justify-center text-white font-bold text-lg'>
40 | 										{testimonial.name.charAt(0)}
41 | 									</div>
42 | 									<div className='ml-4'>
43 | 										<p className='text-gray-200 font-semibold'>{testimonial.name}</p>
44 | 										<p className='text-gray-400 text-sm'>{testimonial.role}</p>
45 | 									</div>
46 | 								</div>
47 | 							</CardContent>
48 | 						</Card>
49 | 					</motion.div>
50 | 				))}
51 | 			</div>
52 | 		</motion.div>
53 | 	);
54 | };
55 | 
56 | export default Testimonials;
57 | 


--------------------------------------------------------------------------------
/src/app/(root)/page.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | import Link from "next/link";
 3 | import { motion } from "framer-motion";
 4 | import { Button } from "@/components/ui/button";
 5 | import { ChevronRight } from "lucide-react";
 6 | import ChallengeCards from "./_components/ChallengeCards";
 7 | import FeatureCards from "./_components/FeatureCards";
 8 | import Benefits from "./_components/Benefits";
 9 | import Testimonials from "./_components/Testimonials";
10 | import RotatedText from "@/components/decorators/RotatedText";
11 | 
12 | // hover:border-emerald-500 hover:border-green-500 hover:border-teal-500
13 | // text-emerald-400 text-green-400 text-teal-400
14 | 
15 | const GridBackground = () => (
16 | 	<div className='absolute inset-0 bg-gray-900'>
17 | 		<div className='absolute inset-0 bg-[linear-gradient(to_right,#4f4f4f2e_1px,transparent_1px),linear-gradient(to_bottom,#4f4f4f2e_1px,transparent_1px)] bg-[size:14px_24px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)]' />
18 | 	</div>
19 | );
20 | 
21 | export default function Home() {
22 | 	return (
23 | 		<div className='min-h-screen bg-gray-900 text-gray-100 relative overflow-hidden'>
24 | 			<GridBackground />
25 | 
26 | 			<div className='relative z-10'>
27 | 				<main className='container mx-auto px-4 py-16 max-w-7xl'>
28 | 					{/* Hero Section */}
29 | 					<div className='text-center mb-20'>
30 | 						<motion.h1
31 | 							className='text-6xl font-extrabold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-green-400 via-emerald-500 to-teal-600'
32 | 							initial={{ opacity: 0, y: -20 }}
33 | 							animate={{ opacity: 1, y: 0 }}
34 | 							transition={{ duration: 0.8 }}
35 | 						>
36 | 							Redis Rush
37 | 						</motion.h1>
38 | 						<motion.p
39 | 							className='text-2xl text-gray-300 max-w-2xl mx-auto mb-8 leading-relaxed'
40 | 							initial={{ opacity: 0, y: 20 }}
41 | 							animate={{ opacity: 1, y: 0 }}
42 | 							transition={{ duration: 0.8, delay: 0.2 }}
43 | 						>
44 | 							<span className='underline decoration-wavy text-2xl decoration-green-400 text-green-400 font-bold underline-offset-4'>
45 | 								Rush
46 | 							</span>{" "}
47 | 							brings you a comprehensive{" "}
48 | 							<span className='bg-gradient-to-r from-green-400 to-teal-400 bg-clip-text text-transparent font-bold'>
49 | 								Redis
50 | 							</span>{" "}
51 | 							learning experience with interactive,{" "}
52 | 							<RotatedText className={"bg-teal-600"}>hands-on</RotatedText> challenges
53 | 						</motion.p>
54 | 						<motion.div
55 | 							initial={{ opacity: 0, y: 20 }}
56 | 							animate={{ opacity: 1, y: 0 }}
57 | 							transition={{ duration: 0.8, delay: 0.4 }}
58 | 						>
59 | 							<Button
60 | 								asChild
61 | 								size='lg'
62 | 								className='bg-gradient-to-r from-green-500 to-teal-500 hover:from-green-600 hover:to-teal-600 text-white'
63 | 							>
64 | 								<Link href='/redis-basics'>
65 | 									Get Started <ChevronRight className='ml-2' />
66 | 								</Link>
67 | 							</Button>
68 | 						</motion.div>
69 | 					</div>
70 | 
71 | 					<FeatureCards />
72 | 					<Benefits />
73 | 
74 | 					<Testimonials />
75 | 					<ChallengeCards />
76 | 				</main>
77 | 			</div>
78 | 		</div>
79 | 	);
80 | }
81 | 


--------------------------------------------------------------------------------
/src/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/burakorkmez/redis-rush/99a734cade26173a49b7235300c791ed092b21e1/src/app/favicon.ico


--------------------------------------------------------------------------------
/src/app/globals.css:
--------------------------------------------------------------------------------
  1 | @tailwind base;
  2 | @tailwind components;
  3 | @tailwind utilities;
  4 | 
  5 | @layer base {
  6 | 	:root {
  7 | 		--background: 0 0% 100%;
  8 | 		--foreground: 240 10% 3.9%;
  9 | 		--card: 0 0% 100%;
 10 | 		--card-foreground: 240 10% 3.9%;
 11 | 		--popover: 0 0% 100%;
 12 | 		--popover-foreground: 240 10% 3.9%;
 13 | 		--primary: 240 5.9% 10%;
 14 | 		--primary-foreground: 0 0% 98%;
 15 | 		--secondary: 240 4.8% 95.9%;
 16 | 		--secondary-foreground: 240 5.9% 10%;
 17 | 		--muted: 240 4.8% 95.9%;
 18 | 		--muted-foreground: 240 3.8% 46.1%;
 19 | 		--accent: 240 4.8% 95.9%;
 20 | 		--accent-foreground: 240 5.9% 10%;
 21 | 		--destructive: 0 84.2% 60.2%;
 22 | 		--destructive-foreground: 0 0% 98%;
 23 | 		--border: 240 5.9% 90%;
 24 | 		--input: 240 5.9% 90%;
 25 | 		--ring: 240 10% 3.9%;
 26 | 		--radius: 0.5rem;
 27 | 		--chart-1: 12 76% 61%;
 28 | 		--chart-2: 173 58% 39%;
 29 | 		--chart-3: 197 37% 24%;
 30 | 		--chart-4: 43 74% 66%;
 31 | 		--chart-5: 27 87% 67%;
 32 | 	}
 33 | 
 34 | 	.dark {
 35 | 		--background: 240 10% 3.9%;
 36 | 		--foreground: 0 0% 98%;
 37 | 		--card: 240 10% 3.9%;
 38 | 		--card-foreground: 0 0% 98%;
 39 | 		--popover: 240 10% 3.9%;
 40 | 		--popover-foreground: 0 0% 98%;
 41 | 		--primary: 0 0% 98%;
 42 | 		--primary-foreground: 240 5.9% 10%;
 43 | 		--secondary: 240 3.7% 15.9%;
 44 | 		--secondary-foreground: 0 0% 98%;
 45 | 		--muted: 240 3.7% 15.9%;
 46 | 		--muted-foreground: 240 5% 64.9%;
 47 | 		--accent: 240 3.7% 15.9%;
 48 | 		--accent-foreground: 0 0% 98%;
 49 | 		--destructive: 0 62.8% 30.6%;
 50 | 		--destructive-foreground: 0 0% 98%;
 51 | 		--border: 240 3.7% 15.9%;
 52 | 		--input: 240 3.7% 15.9%;
 53 | 		--ring: 240 4.9% 83.9%;
 54 | 		--chart-1: 220 70% 50%;
 55 | 		--chart-2: 160 60% 45%;
 56 | 		--chart-3: 30 80% 55%;
 57 | 		--chart-4: 280 65% 60%;
 58 | 		--chart-5: 340 75% 55%;
 59 | 	}
 60 | }
 61 | 
 62 | @layer base {
 63 | 	* {
 64 | 		@apply border-border;
 65 | 	}
 66 | 	body {
 67 | 		@apply bg-background text-foreground;
 68 | 	}
 69 | }
 70 | 
 71 | /* Basic green selection color */
 72 | ::selection {
 73 | 	background-color: #4ade80;
 74 | 	color: #ffffff;
 75 | }
 76 | 
 77 | /* For Firefox */
 78 | ::-moz-selection {
 79 | 	background-color: #4ade80;
 80 | 	color: #ffffff;
 81 | }
 82 | 
 83 | /* cool looking, rounded  dark mode-theme scrollbar */
 84 | 
 85 | ::-webkit-scrollbar {
 86 | 	width: 12px;
 87 | }
 88 | 
 89 | ::-webkit-scrollbar-track {
 90 | 	background: #1f2937; /* dark gray background */
 91 | }
 92 | 
 93 | ::-webkit-scrollbar-thumb {
 94 | 	background: #4b5563; /* lighter gray thumb */
 95 | }
 96 | 
 97 | /* For Firefox */
 98 | * {
 99 | 	scrollbar-width: thin;
100 | 	scrollbar-color: #4b5563 #1f2937;
101 | }
102 | 


--------------------------------------------------------------------------------
/src/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import Footer from "@/components/Footer";
 2 | import Header from "@/components/Header";
 3 | import { ThemeProvider } from "@/components/providers/ThemeProvider";
 4 | import { Toaster } from "@/components/ui/toaster";
 5 | import type { Metadata } from "next";
 6 | import { Inter } from "next/font/google";
 7 | import "./globals.css";
 8 | 
 9 | const inter = Inter({ subsets: ["latin"] });
10 | 
11 | export const metadata: Metadata = {
12 | 	metadataBase: new URL(process.env.NEXT_PUBLIC_BASE_URL || "http://localhost:3000"),
13 | 	title: "Redis Rush",
14 | 	description:
15 | 		"Redis Rush brings you a comprehensive Redis learning experience with interactive, hands-on challenges designed to take you from beginner to expert",
16 | 	openGraph: {
17 | 		title: "Redis Rush | Practice Redis",
18 | 		description:
19 | 			"Master Redis through hands-on challenges. Learn, practice, and excel with real-world scenarios using cutting-edge serverless technology.",
20 | 		url: "https://redisrush.com",
21 | 		siteName: "Redis Rush",
22 | 		images: [
23 | 			{
24 | 				url: "/og-image.png",
25 | 				width: 1200,
26 | 				height: 630,
27 | 				alt: "Redis Rush - Interactive Redis Learning",
28 | 			},
29 | 		],
30 | 		locale: "en_US",
31 | 		type: "website",
32 | 	},
33 | 	twitter: {
34 | 		card: "summary_large_image",
35 | 		title: "Redis Rush | Master Redis Interactively",
36 | 		description:
37 | 			"Level up your Redis skills with hands-on challenges and real-world scenarios. Learn, practice, excel!",
38 | 		images: ["https://redisrush.com/og-image.png"],
39 | 		creator: "@asaprogrammer_",
40 | 	},
41 | 	robots: {
42 | 		index: true,
43 | 		follow: true,
44 | 		googleBot: {
45 | 			index: true,
46 | 			follow: true,
47 | 			"max-video-preview": -1,
48 | 			"max-image-preview": "large",
49 | 			"max-snippet": -1,
50 | 		},
51 | 	},
52 | };
53 | 
54 | export default function RootLayout({
55 | 	children,
56 | }: Readonly<{
57 | 	children: React.ReactNode;
58 | }>) {
59 | 	return (
60 | 		<html lang='en'>
61 | 			<body className={inter.className}>
62 | 				<ThemeProvider attribute='class' defaultTheme='system' enableSystem disableTransitionOnChange>
63 | 					<div className='min-h-screen flex flex-col'>
64 | 						<Header />
65 | 						<main className='pt-16'>{children}</main>
66 | 						<Footer />
67 | 					</div>
68 | 				</ThemeProvider>
69 | 				<Toaster />
70 | 			</body>
71 | 		</html>
72 | 	);
73 | }
74 | 


--------------------------------------------------------------------------------
/src/app/learn-upstash/[slug]/page.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { useParams, useRouter } from "next/navigation";
 4 | import Link from "next/link";
 5 | import { getProblemBySlug, getNextProblemSlug, getPreviousProblemSlug } from "@/utils/problems";
 6 | import UpstashRedisLearningPlatform from "@/components/UpstashRedisLearningPlatform";
 7 | import { AlertCircle, Home } from "lucide-react";
 8 | import { Button } from "@/components/ui/button";
 9 | 
10 | const ProblemNotFound = () => (
11 | 	<div className='flex flex-col items-center justify-center min-h-[60vh] text-center px-4'>
12 | 		<AlertCircle className='w-16 h-16 text-emerald-500 mb-4' />
13 | 		<h1 className='text-3xl font-bold mb-2'>Oops! Problem Not Found</h1>
14 | 		<p className='text-gray-500 mb-8 max-w-md'>
15 | 			We couldn't find the problem you're looking for. It might have been moved or doesn't exist.
16 | 		</p>
17 | 		<div className='flex flex-col sm:flex-row gap-4'>
18 | 			<Button asChild variant='outline'>
19 | 				<Link href='/learn-upstash'>
20 | 					<Home className='mr-2 h-4 w-4' /> Back to Challenges
21 | 				</Link>
22 | 			</Button>
23 | 		</div>
24 | 	</div>
25 | );
26 | 
27 | export default function ProblemPage() {
28 | 	const params = useParams();
29 | 	const router = useRouter();
30 | 	const slug = params.slug as string;
31 | 
32 | 	const problem = getProblemBySlug(slug);
33 | 	const nextProblemSlug = getNextProblemSlug(slug);
34 | 	const previousProblemSlug = getPreviousProblemSlug(slug);
35 | 
36 | 	if (!problem) {
37 | 		return <ProblemNotFound />;
38 | 	}
39 | 
40 | 	const handleNextProblem = () => {
41 | 		if (nextProblemSlug) {
42 | 			router.push(`/learn-upstash/${nextProblemSlug}`);
43 | 		}
44 | 	};
45 | 
46 | 	const handlePreviousProblem = () => {
47 | 		if (previousProblemSlug) {
48 | 			router.push(`/learn-upstash/${previousProblemSlug}`);
49 | 		}
50 | 	};
51 | 
52 | 	return (
53 | 		<UpstashRedisLearningPlatform
54 | 			problem={problem}
55 | 			onNextProblem={handleNextProblem}
56 | 			onPreviousProblem={handlePreviousProblem}
57 | 			hasNextProblem={!!nextProblemSlug}
58 | 			hasPreviousProblem={!!previousProblemSlug}
59 | 		/>
60 | 	);
61 | }
62 | 


--------------------------------------------------------------------------------
/src/app/learn-upstash/page.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { ReactNode, useEffect, useState } from "react";
  4 | import { motion } from "framer-motion";
  5 | import { useRouter } from "next/navigation";
  6 | import { Card, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
  7 | import { problems } from "@/utils/problems";
  8 | import {
  9 | 	ChevronRight,
 10 | 	Lock,
 11 | 	Database,
 12 | 	List,
 13 | 	Hash,
 14 | 	Layers,
 15 | 	BarChart3,
 16 | 	ExternalLink,
 17 | 	Cloud,
 18 | 	DollarSign,
 19 | 	Zap,
 20 | 	Info,
 21 | } from "lucide-react";
 22 | import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
 23 | 
 24 | const ChallengePage = () => {
 25 | 	const router = useRouter();
 26 | 	const [showUpstashInfo, setShowUpstashInfo] = useState(false);
 27 | 
 28 | 	useEffect(() => {
 29 | 		const handleKeyPress = (event: KeyboardEvent) => {
 30 | 			if (event.key === "h" || event.key === "H") {
 31 | 				setShowUpstashInfo(true);
 32 | 			}
 33 | 		};
 34 | 
 35 | 		window.addEventListener("keydown", handleKeyPress);
 36 | 
 37 | 		return () => {
 38 | 			window.removeEventListener("keydown", handleKeyPress);
 39 | 		};
 40 | 	}, []);
 41 | 
 42 | 	const cardVariants = {
 43 | 		hidden: { opacity: 0, y: 20 },
 44 | 		visible: (i: number) => ({
 45 | 			opacity: 1,
 46 | 			y: 0,
 47 | 			transition: {
 48 | 				delay: i * 0.1,
 49 | 				duration: 0.5,
 50 | 			},
 51 | 		}),
 52 | 	};
 53 | 
 54 | 	const iconVariants = {
 55 | 		hover: { scale: 1.1, transition: { duration: 0.2 } },
 56 | 	};
 57 | 
 58 | 	const problemIcons: Record<string, React.FC<React.SVGProps<SVGSVGElement>>> = {
 59 | 		"basic-caching": Database,
 60 | 		"list-operations": List,
 61 | 		"hash-operations": Hash,
 62 | 		"set-operations": Layers,
 63 | 		"sorted-set-operations": BarChart3,
 64 | 	};
 65 | 
 66 | 	const getDifficultyColor = (difficulty: string) => {
 67 | 		switch (difficulty.toLowerCase()) {
 68 | 			case "easy":
 69 | 				return "bg-green-400 text-black";
 70 | 			case "medium":
 71 | 				return "bg-yellow-400 text-black";
 72 | 			case "hard":
 73 | 				return "bg-red-400 text-black";
 74 | 			default:
 75 | 				return "bg-gray-400 text-black";
 76 | 		}
 77 | 	};
 78 | 
 79 | 	const getIconColor = (difficulty: string) => {
 80 | 		switch (difficulty.toLowerCase()) {
 81 | 			case "easy":
 82 | 				return "text-green-400";
 83 | 			case "medium":
 84 | 				return "text-yellow-400";
 85 | 			case "hard":
 86 | 				return "text-red-400";
 87 | 			default:
 88 | 				return "text-gray-400";
 89 | 		}
 90 | 	};
 91 | 
 92 | 	return (
 93 | 		<div className='min-h-screen bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 text-gray-100 p-8'>
 94 | 			<motion.div
 95 | 				initial={{ opacity: 0, y: -10 }}
 96 | 				animate={{ opacity: 1, y: 0 }}
 97 | 				transition={{ delay: 0.5, duration: 0.5 }}
 98 | 				className='fixed z-10 top-20 right-4 flex items-center space-x-2 bg-gray-800/80 backdrop-blur-sm rounded-full px-4 py-2 shadow-lg border border-gray-700'
 99 | 			>
100 | 				<Info className='w-4 h-4 text-emerald-400' />
101 | 				<p className='text-gray-300 text-sm'>Press</p>
102 | 				<kbd className='px-2 py-1 text-xs font-semibold text-gray-800 bg-gray-200 rounded-md shadow'>H</kbd>
103 | 				<p className='text-gray-300 text-sm'>
104 | 					to learn about
105 | 					<span className='text-emerald-400 font-bold'> Upstash</span>
106 | 				</p>
107 | 			</motion.div>
108 | 
109 | 			<motion.div
110 | 				initial={{ opacity: 0, y: -20 }}
111 | 				animate={{ opacity: 1, y: 0 }}
112 | 				transition={{ duration: 0.5 }}
113 | 				className='max-w-6xl mx-auto mt-5'
114 | 			>
115 | 				<h1 className='text-5xl font-bold mb-2 text-center text-transparent bg-gradient-to-r from-green-400 to-teal-400 bg-clip-text'>
116 | 					Upstash Redis Challenges
117 | 				</h1>
118 | 				<p className='text-xl text-center text-gray-400 mb-12'>Master Redis with hands-on exercises</p>
119 | 
120 | 				<Dialog open={showUpstashInfo} onOpenChange={setShowUpstashInfo}>
121 | 					<DialogContent className='bg-gradient-to-br from-gray-900 to-gray-800 text-gray-100 border-gray-700 shadow-xl max-w-2xl'>
122 | 						<DialogHeader>
123 | 							<DialogTitle className='text-3xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-green-400 to-teal-400'>
124 | 								What is Upstash?
125 | 							</DialogTitle>
126 | 						</DialogHeader>
127 | 						<DialogDescription className='text-gray-300'>
128 | 							<p className='mb-6 text-lg'>
129 | 								Upstash is the serverless Redis solution that you want to learn. Here's why it's the
130 | 								perfect fit:
131 | 							</p>
132 | 							<div className='grid grid-cols-2 gap-6'>
133 | 								<FeatureCard icon={<Cloud className='w-6 h-6 text-blue-400' />} title='Serverless'>
134 | 									True serverless architecture for modern development
135 | 								</FeatureCard>
136 | 								<FeatureCard
137 | 									icon={<DollarSign className='w-6 h-6 text-green-400' />}
138 | 									title='Cost-Effective'
139 | 								>
140 | 									Pay-per-use model optimized for varying workloads
141 | 								</FeatureCard>
142 | 								<FeatureCard icon={<Zap className='w-6 h-6 text-yellow-400' />} title='Low Latency'>
143 | 									Blazing fast response times for our challenges
144 | 								</FeatureCard>
145 | 								<FeatureCard
146 | 									icon={<Layers className='w-6 h-6 text-purple-400' />}
147 | 									title='Redis Compatible'
148 | 								>
149 | 									Supports standard Redis commands and data structures
150 | 								</FeatureCard>
151 | 							</div>
152 | 							<p className='mt-6 text-lg'>
153 | 								With Upstash, you're learning Redis in a cutting-edge, cloud-native environment that's
154 | 								built for the future of web development.
155 | 							</p>
156 | 							<motion.a
157 | 								href='https://upstash.com'
158 | 								target='_blank'
159 | 								rel='noopener noreferrer'
160 | 								className='inline-flex items-center mt-4 text-blue-400 hover:text-blue-300 transition-colors'
161 | 								whileHover={{ x: 5 }}
162 | 							>
163 | 								Learn more about Upstash <ExternalLink className='ml-2 w-4 h-4' />
164 | 							</motion.a>
165 | 						</DialogDescription>
166 | 					</DialogContent>
167 | 				</Dialog>
168 | 
169 | 				<div className='grid gap-6 md:grid-cols-2 lg:grid-cols-3'>
170 | 					{problems.map((problem, index) => {
171 | 						const IconComponent = problemIcons[problem.slug] || Database;
172 | 						const iconColor = getIconColor(problem.difficulty);
173 | 						return (
174 | 							<motion.div
175 | 								key={problem.slug}
176 | 								variants={cardVariants}
177 | 								initial='hidden'
178 | 								animate='visible'
179 | 								custom={index}
180 | 								whileHover='hover'
181 | 							>
182 | 								<Card
183 | 									className='bg-gray-800/50 backdrop-blur-sm border-gray-700 cursor-pointer hover:bg-gray-700/50 transition-all duration-300 shadow-lg hover:shadow-xl 
184 | 									h-full '
185 | 									onClick={() => router.push(`/learn-upstash/${problem.slug}`)}
186 | 								>
187 | 									<CardHeader>
188 | 										<div className='flex items-center justify-between'>
189 | 											<div className='flex items-center'>
190 | 												<motion.div
191 | 													variants={iconVariants}
192 | 													className={`mr-3 p-2 bg-${
193 | 														iconColor.split("-")[1]
194 | 													}-500/10 rounded-full`}
195 | 												>
196 | 													<IconComponent className={`w-6 h-6 ${iconColor}`} />
197 | 												</motion.div>
198 | 												<span className='text-gray-100'>{problem.title}</span>
199 | 											</div>
200 | 											<div className='flex items-center space-x-2'>
201 | 												<span
202 | 													className={`text-xs font-semibold py-1 px-2 rounded-full ${getDifficultyColor(
203 | 														problem.difficulty
204 | 													)}`}
205 | 												>
206 | 													{problem.difficulty}
207 | 												</span>
208 | 												<ChevronRight className='w-5 h-5 text-gray-400' />
209 | 											</div>
210 | 										</div>
211 | 									</CardHeader>
212 | 								</Card>
213 | 							</motion.div>
214 | 						);
215 | 					})}
216 | 				</div>
217 | 
218 | 				<motion.div
219 | 					initial={{ opacity: 0 }}
220 | 					animate={{ opacity: 1 }}
221 | 					transition={{ delay: 0.5, duration: 0.5 }}
222 | 					className='mt-16 text-center'
223 | 				>
224 | 					<h2 className='text-3xl font-semibold mb-6 text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 to-teal-400'>
225 | 						More Challenges Coming Soon!
226 | 					</h2>
227 | 					<div className='grid gap-6 md:grid-cols-3'>
228 | 						{[1, 2, 3].map((_, index) => (
229 | 							<Card key={index} className='bg-gray-800/30 backdrop-blur-sm border-gray-700'>
230 | 								<CardHeader>
231 | 									<CardTitle className='flex justify-between items-center text-gray-400'>
232 | 										<span className='flex items-center'>
233 | 											<motion.div
234 | 												whileHover={{ rotate: 360 }}
235 | 												transition={{ duration: 0.3 }}
236 | 												className='mr-3 p-2 bg-emerald-500/10 rounded-full'
237 | 											>
238 | 												<Lock className='w-5 h-5 text-emerald-400' />
239 | 											</motion.div>
240 | 											Coming Soon
241 | 										</span>
242 | 									</CardTitle>
243 | 									<CardDescription className='text-gray-500 mt-2'>
244 | 										New exciting challenge on its way...
245 | 									</CardDescription>
246 | 								</CardHeader>
247 | 							</Card>
248 | 						))}
249 | 					</div>
250 | 				</motion.div>
251 | 			</motion.div>
252 | 		</div>
253 | 	);
254 | };
255 | 
256 | export default ChallengePage;
257 | 
258 | const FeatureCard = ({ icon, title, children }: { icon: ReactNode; title: string; children: ReactNode }) => (
259 | 	<div className='bg-gray-800/50 p-4 rounded-lg border border-gray-700'>
260 | 		<div className='flex items-center mb-2'>
261 | 			{icon}
262 | 			<h3 className='ml-2 text-lg font-semibold'>{title}</h3>
263 | 		</div>
264 | 		<p className='text-gray-400'>{children}</p>
265 | 	</div>
266 | );
267 | 


--------------------------------------------------------------------------------
/src/app/not-found.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | import Link from "next/link";
 3 | import { motion } from "framer-motion";
 4 | import { Home, BookOpen } from "lucide-react";
 5 | import { Button } from "@/components/ui/button";
 6 | 
 7 | const CustomNotFoundPage = () => {
 8 | 	return (
 9 | 		<div className='min-h-screen bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 flex items-center justify-center px-4'>
10 | 			<motion.div
11 | 				className='text-center'
12 | 				initial={{ opacity: 0, y: -20 }}
13 | 				animate={{ opacity: 1, y: 0 }}
14 | 				transition={{ duration: 0.5 }}
15 | 			>
16 | 				<h1 className='text-6xl font-bold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-emerald-500 to-teal-500'>
17 | 					404
18 | 				</h1>
19 | 				<p className='text-3xl font-semibold mb-6 text-gray-300'>Oops! Page Not Found</p>
20 | 				<div className='max-w-md mx-auto'>
21 | 					<p className='text-gray-400 mb-8'>
22 | 						Looks like this page got lost in the Redis cache. Don't worry, even the fastest databases have
23 | 						their moments!
24 | 					</p>
25 | 				</div>
26 | 				<div className='flex flex-col sm:flex-row justify-center gap-4 mb-12'>
27 | 					<Button
28 | 						asChild
29 | 						variant='default'
30 | 						className='bg-gradient-to-r from-emerald-500 to-teal-500 hover:from-emerald-400 hover:to-teal-400'
31 | 					>
32 | 						<Link href='/'>
33 | 							<Home className='mr-2 h-4 w-4' /> Go Home
34 | 						</Link>
35 | 					</Button>
36 | 					<Button asChild variant='outline' className='text-gray-300 border-gray-700 hover:bg-gray-800'>
37 | 						<Link href='/learn-upstash'>
38 | 							<BookOpen className='mr-2 h-4 w-4' /> Explore Challenges
39 | 						</Link>
40 | 					</Button>
41 | 				</div>
42 | 			</motion.div>
43 | 		</div>
44 | 	);
45 | };
46 | 
47 | export default CustomNotFoundPage;
48 | 


--------------------------------------------------------------------------------
/src/app/redis-basics/page.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { Suspense, useState } from "react";
  4 | import { motion } from "framer-motion";
  5 | import { Card, CardHeader, CardContent } from "@/components/ui/card";
  6 | import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
  7 | import ChallengeSection from "@/components/ChallengeSection";
  8 | import LearningSection from "@/components/LearningSection";
  9 | import Congrats from "@/components/Congrats";
 10 | import ProgressBar from "@/components/ProgressBar";
 11 | import { redisBasicsContent } from "@/utils/constants";
 12 | 
 13 | export default function RedisBasics() {
 14 | 	const [currentSection, setCurrentSection] = useState(0);
 15 | 	const [currentChallenge, setCurrentChallenge] = useState(0);
 16 | 	const [activeTab, setActiveTab] = useState("learn");
 17 | 	const [showCongrats, setShowCongrats] = useState(false);
 18 | 
 19 | 	const isLastChallenge = currentChallenge === redisBasicsContent.challenges.length - 1;
 20 | 
 21 | 	const handleNext = () => {
 22 | 		if (activeTab === "learn") {
 23 | 			setActiveTab("challenge");
 24 | 		} else {
 25 | 			if (currentChallenge < redisBasicsContent.challenges.length - 1) {
 26 | 				setCurrentChallenge(currentChallenge + 1);
 27 | 			} else {
 28 | 				setShowCongrats(true);
 29 | 			}
 30 | 		}
 31 | 	};
 32 | 
 33 | 	const handlePrevious = () => {
 34 | 		if (activeTab === "challenge" && currentChallenge === 0) {
 35 | 			setActiveTab("learn");
 36 | 		} else if (currentChallenge > 0) {
 37 | 			setCurrentChallenge(currentChallenge - 1);
 38 | 		} else if (currentSection > 0) {
 39 | 			setCurrentSection(currentSection - 1);
 40 | 			setCurrentChallenge(redisBasicsContent.challenges.length - 1);
 41 | 			setActiveTab("challenge");
 42 | 		}
 43 | 	};
 44 | 
 45 | 	return (
 46 | 		<Suspense>
 47 | 			<div className='min-h-screen bg-gray-900 text-gray-100 relative overflow-hidden'>
 48 | 				{/* Blurry radial gradient */}
 49 | 				<div className='absolute top-0 left-0 w-full h-full overflow-hidden z-0'>
 50 | 					<div className='absolute top-1/4 left-1/4 w-1/2 h-1/2 bg-green-500 rounded-full filter blur-[150px] opacity-20 ' />
 51 | 				</div>
 52 | 
 53 | 				<div className='relative z-10'>
 54 | 					<main className='container mx-auto px-4 py-16 max-w-4xl'>
 55 | 						<motion.div
 56 | 							initial={{ opacity: 0, y: 20 }}
 57 | 							animate={{ opacity: 1, y: 0 }}
 58 | 							transition={{ duration: 0.5 }}
 59 | 							className='text-center mb-12'
 60 | 						>
 61 | 							<h1 className='text-4xl font-extrabold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-green-400 via-emerald-500 to-teal-600'>
 62 | 								Redis Basics
 63 | 							</h1>
 64 | 							<p className='text-xl text-gray-300 mb-4'>
 65 | 								Challenge {currentChallenge + 1} of {redisBasicsContent.challenges.length}
 66 | 							</p>
 67 | 							<ProgressBar
 68 | 								currentSection={currentSection}
 69 | 								totalSections={1}
 70 | 								currentChallenge={currentChallenge}
 71 | 								totalChallenges={redisBasicsContent.challenges.length}
 72 | 								isLastChallenge={isLastChallenge}
 73 | 							/>
 74 | 						</motion.div>
 75 | 
 76 | 						<Card className='bg-gray-800 border-gray-700'>
 77 | 							<CardHeader />
 78 | 							<CardContent>
 79 | 								<Tabs value={activeTab} onValueChange={setActiveTab} className='w-full'>
 80 | 									<TabsList className='grid w-full grid-cols-2 bg-gray-700/50 p-1 rounded-lg'>
 81 | 										<TabsTrigger
 82 | 											value='learn'
 83 | 											className='relative text-gray-300 transition-all data-[state=active]:text-green-400'
 84 | 										>
 85 | 											Learn
 86 | 										</TabsTrigger>
 87 | 										<TabsTrigger
 88 | 											value='challenge'
 89 | 											className='relative text-gray-300 transition-all data-[state=active]:text-green-400'
 90 | 										>
 91 | 											Challenge
 92 | 										</TabsTrigger>
 93 | 									</TabsList>
 94 | 									<TabsContent value='learn'>
 95 | 										<LearningSection section={redisBasicsContent} onNext={handleNext} />
 96 | 									</TabsContent>
 97 | 									<TabsContent value='challenge'>
 98 | 										<ChallengeSection
 99 | 											challenge={redisBasicsContent.challenges[currentChallenge]}
100 | 											onNext={handleNext}
101 | 											onPrevious={handlePrevious}
102 | 										/>
103 | 									</TabsContent>
104 | 								</Tabs>
105 | 							</CardContent>
106 | 						</Card>
107 | 					</main>
108 | 				</div>
109 | 				{showCongrats && <Congrats onClose={() => setShowCongrats(false)} />}
110 | 			</div>
111 | 		</Suspense>
112 | 	);
113 | }
114 | 


--------------------------------------------------------------------------------
/src/app/redis-data-structures/[slug]/page.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { useState, useEffect } from "react";
  4 | import { useParams, useRouter } from "next/navigation";
  5 | import { motion } from "framer-motion";
  6 | import { Card, CardContent } from "@/components/ui/card";
  7 | import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
  8 | import ProgressBar from "@/components/ProgressBar";
  9 | import LearningSection from "@/components/LearningSection";
 10 | import ChallengeSection from "@/components/ChallengeSection";
 11 | import Congrats from "@/components/Congrats";
 12 | import { dataStructuresContent } from "@/utils/constants";
 13 | 
 14 | export default function DataStructurePage() {
 15 | 	const router = useRouter();
 16 | 	const { slug } = useParams();
 17 | 	const [content, setContent] = useState<any>(null);
 18 | 	const [currentChallenge, setCurrentChallenge] = useState(0);
 19 | 	const [activeTab, setActiveTab] = useState("learn");
 20 | 	const [showCongrats, setShowCongrats] = useState(false);
 21 | 
 22 | 	useEffect(() => {
 23 | 		const structureContent = dataStructuresContent.find((s) => s.slug === slug);
 24 | 		if (structureContent) {
 25 | 			setContent(structureContent);
 26 | 		} else {
 27 | 			router.push("/redis-data-structures");
 28 | 		}
 29 | 	}, [slug, router]);
 30 | 
 31 | 	if (!content) {
 32 | 		return null;
 33 | 	}
 34 | 
 35 | 	const isLastChallenge = currentChallenge === content.challenges.length - 1;
 36 | 
 37 | 	const handleNext = () => {
 38 | 		if (activeTab === "learn") {
 39 | 			setActiveTab("challenge");
 40 | 		} else if (currentChallenge < content.challenges.length - 1) {
 41 | 			setCurrentChallenge(currentChallenge + 1);
 42 | 		} else {
 43 | 			setShowCongrats(true);
 44 | 		}
 45 | 	};
 46 | 
 47 | 	const handlePrevious = () => {
 48 | 		if (activeTab === "challenge" && currentChallenge === 0) {
 49 | 			setActiveTab("learn");
 50 | 		} else if (currentChallenge > 0) {
 51 | 			setCurrentChallenge(currentChallenge - 1);
 52 | 		}
 53 | 	};
 54 | 
 55 | 	return (
 56 | 		<div className='min-h-screen bg-gradient-to-b from-gray-900 to-gray-800 text-gray-100'>
 57 | 			<main className='container mx-auto px-4 py-16 max-w-4xl'>
 58 | 				<motion.div
 59 | 					initial={{ opacity: 0, y: 20 }}
 60 | 					animate={{ opacity: 1, y: 0 }}
 61 | 					transition={{ duration: 0.5 }}
 62 | 					className='text-center mb-12'
 63 | 				>
 64 | 					<h1 className='text-5xl font-extrabold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-green-400 to-emerald-600'>
 65 | 						{content.title}
 66 | 					</h1>
 67 | 					<p className='text-xl text-gray-300 mb-4'>Master the power of {content.title}</p>
 68 | 					<ProgressBar
 69 | 						currentSection={dataStructuresContent.findIndex((s) => s.slug === slug)}
 70 | 						totalSections={dataStructuresContent.length}
 71 | 						currentChallenge={currentChallenge}
 72 | 						totalChallenges={dataStructuresContent.find((s) => s.slug === slug)!.challenges.length}
 73 | 						isLastChallenge={isLastChallenge}
 74 | 					/>
 75 | 				</motion.div>
 76 | 
 77 | 				<Card className='bg-gray-800 border-gray-700 shadow-lg'>
 78 | 					<CardContent className='p-6'>
 79 | 						<Tabs value={activeTab} onValueChange={setActiveTab} className='w-full'>
 80 | 							<TabsList className='grid w-full grid-cols-2'>
 81 | 								<TabsTrigger value='learn'>Learn</TabsTrigger>
 82 | 								<TabsTrigger value='challenge'>Challenge</TabsTrigger>
 83 | 							</TabsList>
 84 | 							<TabsContent value='learn'>
 85 | 								<LearningSection section={content} onNext={handleNext} />
 86 | 							</TabsContent>
 87 | 							<TabsContent value='challenge'>
 88 | 								<ChallengeSection
 89 | 									challenge={content.challenges[currentChallenge]}
 90 | 									onNext={handleNext}
 91 | 									onPrevious={handlePrevious}
 92 | 								/>
 93 | 							</TabsContent>
 94 | 						</Tabs>
 95 | 					</CardContent>
 96 | 				</Card>
 97 | 			</main>
 98 | 			{showCongrats && <Congrats onClose={() => setShowCongrats(false)} />}
 99 | 		</div>
100 | 	);
101 | }
102 | 


--------------------------------------------------------------------------------
/src/app/redis-data-structures/page.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import React from "react";
 4 | import Link from "next/link";
 5 | import { motion } from "framer-motion";
 6 | import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
 7 | import { List, Hash, LayoutGrid, BarChart3 } from "lucide-react";
 8 | import { dataStructuresContent } from "@/utils/constants";
 9 | 
10 | const icons: Record<string, React.ComponentType<any>> = {
11 | 	lists: List,
12 | 	sets: LayoutGrid,
13 | 	hashes: Hash,
14 | 	"sorted-sets": BarChart3,
15 | };
16 | 
17 | const colors: Record<string, Record<string, string>> = {
18 | 	lists: { bg: "from-blue-500 to-blue-700", text: "text-blue-400", border: "border-blue-400/30" },
19 | 	sets: { bg: "from-green-500 to-green-700", text: "text-green-400", border: "border-green-400/30" },
20 | 	hashes: { bg: "from-purple-500 to-purple-700", text: "text-purple-400", border: "border-purple-400/30" },
21 | 	"sorted-sets": { bg: "from-red-500 to-red-700", text: "text-red-400", border: "border-red-400/30" },
22 | };
23 | 
24 | export default function RedisDataStructures() {
25 | 	return (
26 | 		<div className='min-h-screen bg-gradient-to-b from-gray-900 to-gray-800 text-gray-100'>
27 | 			<main className='container mx-auto px-4 py-16 max-w-6xl'>
28 | 				<motion.div
29 | 					initial={{ opacity: 0, y: 20 }}
30 | 					animate={{ opacity: 1, y: 0 }}
31 | 					transition={{ duration: 0.5 }}
32 | 					className='text-center mb-12'
33 | 				>
34 | 					<h1 className='text-5xl font-extrabold mb-4 text-transparent bg-gradient-to-r from-green-400 to-teal-400 bg-clip-text'>
35 | 						Redis Data Structures
36 | 					</h1>
37 | 					<p className='text-xl text-gray-300 mb-8'>Master the powerful data structures in Redis</p>
38 | 				</motion.div>
39 | 
40 | 				<div className='grid grid-cols-1 md:grid-cols-2 gap-8'>
41 | 					{dataStructuresContent.map((structure, index) => {
42 | 						if (!structure.slug) return null;
43 | 						const Icon = icons[structure.slug];
44 | 						const color = colors[structure.slug];
45 | 
46 | 						return (
47 | 							<motion.div
48 | 								key={structure.slug}
49 | 								initial={{ opacity: 0, y: 20 }}
50 | 								animate={{ opacity: 1, y: 0 }}
51 | 								transition={{ duration: 0.5, delay: index * 0.1 }}
52 | 							>
53 | 								<Link href={`/redis-data-structures/${structure.slug}`}>
54 | 									<Card
55 | 										className={`bg-gray-800/50 backdrop-blur-sm hover:bg-gray-800/70 transition-all duration-300 cursor-pointer h-full relative overflow-hidden group
56 |                                     border ${color.border} shadow-lg hover:shadow-xl`}
57 | 									>
58 | 										<CardHeader className='pb-2'>
59 | 											<div className='flex items-center'>
60 | 												<div
61 | 													className={`w-10 h-10 rounded-full ${color.text} bg-opacity-10 flex items-center justify-center mr-4 group-hover:scale-110 transition-transform duration-300`}
62 | 												>
63 | 													<span className='text-xl font-bold'>{index + 1}</span>
64 | 												</div>
65 | 												<CardTitle className='flex items-center text-2xl font-bold text-gray-100'>
66 | 													<Icon className={`mr-2 h-6 w-6 ${color.text}`} />
67 | 													{structure.title}
68 | 												</CardTitle>
69 | 											</div>
70 | 										</CardHeader>
71 | 										<CardContent>
72 | 											<div
73 | 												className={`w-full h-1 bg-gradient-to-r ${color.bg} rounded-full transform origin-left scale-x-0 group-hover:scale-x-100 transition-transform duration-300`}
74 | 											/>
75 | 										</CardContent>
76 | 									</Card>
77 | 								</Link>
78 | 							</motion.div>
79 | 						);
80 | 					})}
81 | 				</div>
82 | 			</main>
83 | 		</div>
84 | 	);
85 | }
86 | 


--------------------------------------------------------------------------------
/src/components/ChallengeSection.tsx:
--------------------------------------------------------------------------------
  1 | import { useState, useEffect } from "react";
  2 | import { CardHeader, CardTitle, CardContent } from "@/components/ui/card";
  3 | import { Button } from "@/components/ui/button";
  4 | import { Terminal, CheckCircle2, AlertCircle, Eye, EyeOff } from "lucide-react";
  5 | import RedisCLI from "./RedisCli";
  6 | 
  7 | type ChallengeSectionProps = {
  8 | 	challenge: {
  9 | 		id: number;
 10 | 		prompt: string;
 11 | 		answer: string;
 12 | 	};
 13 | 	onNext: () => void;
 14 | 	onPrevious: () => void;
 15 | };
 16 | 
 17 | const ChallengeSection = ({ challenge, onNext, onPrevious }: ChallengeSectionProps) => {
 18 | 	const [feedback, setFeedback] = useState("");
 19 | 	const [isChallengeCompleted, setIsChallengeCompleted] = useState(false);
 20 | 	const [showSolution, setShowSolution] = useState(false);
 21 | 	const [isTransitioning, setIsTransitioning] = useState(false);
 22 | 
 23 | 	useEffect(() => {
 24 | 		if (isChallengeCompleted) {
 25 | 			const timer = setTimeout(() => {
 26 | 				setIsTransitioning(true);
 27 | 				setTimeout(() => {
 28 | 					setFeedback("");
 29 | 					setIsChallengeCompleted(false);
 30 | 					setIsTransitioning(false);
 31 | 				}, 300);
 32 | 			}, 2000);
 33 | 			return () => clearTimeout(timer);
 34 | 		}
 35 | 	}, [isChallengeCompleted]);
 36 | 
 37 | 	const handleSubmit = async (input: string) => {
 38 | 		if (input.toLowerCase().trim() === challenge.answer.toLowerCase()) {
 39 | 			setFeedback("Correct! Great job!");
 40 | 			setIsChallengeCompleted(true);
 41 | 			setShowSolution(false);
 42 | 			onNext();
 43 | 		} else {
 44 | 			setFeedback("Not quite. Try again!");
 45 | 			setIsChallengeCompleted(false);
 46 | 		}
 47 | 	};
 48 | 
 49 | 	return (
 50 | 		<>
 51 | 			<CardHeader>
 52 | 				<CardTitle className='text-2xl font-bold text-gray-100'>Challenge</CardTitle>
 53 | 			</CardHeader>
 54 | 			<CardContent>
 55 | 				<p className='text-gray-300 mb-4'>
 56 | 					<Terminal className='w-6 h-6 inline-block mr-2 text-green-400' />
 57 | 					{challenge.prompt}
 58 | 				</p>
 59 | 				<RedisCLI onSubmit={handleSubmit} />
 60 | 				{feedback && (
 61 | 					<p
 62 | 						className={`mt-4 p-2 rounded text-white transition-opacity duration-300 ${
 63 | 							isTransitioning ? "opacity-0" : "opacity-100"
 64 | 						}`}
 65 | 						style={{
 66 | 							backgroundColor: isChallengeCompleted ? "rgba(34, 197, 94, 0.2)" : "rgba(239, 68, 68, 0.2)",
 67 | 							borderColor: isChallengeCompleted ? "rgb(34, 197, 94)" : "rgb(239, 68, 68)",
 68 | 							borderWidth: 1,
 69 | 						}}
 70 | 					>
 71 | 						{isChallengeCompleted ? (
 72 | 							<CheckCircle2 className='w-5 h-5 inline-block mr-2' />
 73 | 						) : (
 74 | 							<AlertCircle className='w-5 h-5 inline-block mr-2' />
 75 | 						)}
 76 | 						{feedback}
 77 | 					</p>
 78 | 				)}
 79 | 				{showSolution && (
 80 | 					<div className='mt-4 p-4 rounded border border-gray-600 bg-gray-800'>
 81 | 						<p className='text-gray-300'>
 82 | 							<strong>Solution:</strong> {challenge.answer}
 83 | 						</p>
 84 | 					</div>
 85 | 				)}
 86 | 				<div className='flex justify-between mt-6'>
 87 | 					<Button
 88 | 						onClick={onPrevious}
 89 | 						variant='outline'
 90 | 						className='text-gray-300 border-gray-600 hover:bg-gray-700'
 91 | 					>
 92 | 						Previous
 93 | 					</Button>
 94 | 					<Button
 95 | 						onClick={() => setShowSolution(!showSolution)}
 96 | 						className='bg-gradient-to-r from-green-400 to-teal-500 text-white'
 97 | 					>
 98 | 						{showSolution ? (
 99 | 							<>
100 | 								<EyeOff className='w-4 h-4 mr-2' /> Hide Solution
101 | 							</>
102 | 						) : (
103 | 							<>
104 | 								<Eye className='w-4 h-4 mr-2' /> Reveal Solution
105 | 							</>
106 | 						)}
107 | 					</Button>
108 | 				</div>
109 | 			</CardContent>
110 | 		</>
111 | 	);
112 | };
113 | 
114 | export default ChallengeSection;
115 | 


--------------------------------------------------------------------------------
/src/components/CommandsTab.tsx:
--------------------------------------------------------------------------------
 1 | import { Card, CardContent } from "@/components/ui/card";
 2 | import SyntaxHighlighter from "react-syntax-highlighter";
 3 | import { atomOneDark } from "react-syntax-highlighter/dist/esm/styles/hljs";
 4 | 
 5 | const CommandsTab = ({ keyCommands }: { keyCommands: { name: string; description: string }[] }) => {
 6 | 	return (
 7 | 		<Card className='bg-gray-800/50 border-gray-700'>
 8 | 			<CardContent className='p-4'>
 9 | 				<div className='grid grid-cols-1 md:grid-cols-2 gap-4'>
10 | 					{keyCommands?.map((command, index) => {
11 | 						const { name, description } = command;
12 | 						return (
13 | 							<div
14 | 								key={index}
15 | 								className='bg-gray-700/50 rounded-lg p-4 hover:bg-gray-700/70 transition-colors'
16 | 							>
17 | 								<h3 className='text-yellow-400 font-mono mb-2'>
18 | 									{index + 1}. {name.trim()}
19 | 								</h3>
20 | 								<p className='text-gray-300 mb-2 text-sm'>{description.trim()}</p>
21 | 								<SyntaxHighlighter
22 | 									language='redis'
23 | 									style={atomOneDark}
24 | 									customStyle={{ background: "transparent" }}
25 | 								>
26 | 									{name.trim()}
27 | 								</SyntaxHighlighter>
28 | 							</div>
29 | 						);
30 | 					})}
31 | 				</div>
32 | 			</CardContent>
33 | 		</Card>
34 | 	);
35 | };
36 | export default CommandsTab;
37 | 


--------------------------------------------------------------------------------
/src/components/Congrats.tsx:
--------------------------------------------------------------------------------
 1 | import { useState, useEffect } from "react";
 2 | import Confetti from "react-confetti";
 3 | import { motion } from "framer-motion";
 4 | import { Button } from "@/components/ui/button";
 5 | import Link from "next/link";
 6 | 
 7 | interface CongratsProps {
 8 | 	onClose: () => void;
 9 | }
10 | 
11 | const Congrats: React.FC<CongratsProps> = ({ onClose }) => {
12 | 	const [windowDimension, setWindowDimension] = useState({ width: 0, height: 0 });
13 | 
14 | 	useEffect(() => {
15 | 		setWindowDimension({ width: window.innerWidth, height: window.innerHeight });
16 | 	}, []);
17 | 
18 | 	return (
19 | 		<div className='fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50'>
20 | 			<Confetti
21 | 				width={windowDimension.width}
22 | 				height={windowDimension.height}
23 | 				recycle={false}
24 | 				numberOfPieces={500}
25 | 			/>
26 | 			<motion.div
27 | 				initial={{ scale: 0.8, opacity: 0 }}
28 | 				animate={{ scale: 1, opacity: 1 }}
29 | 				transition={{ duration: 0.5 }}
30 | 				className='bg-gray-800 p-8 rounded-lg text-center max-w-md'
31 | 			>
32 | 				<h2 className='text-3xl font-bold mb-4 text-green-400'>Congratulations!</h2>
33 | 				<p className='text-gray-300 mb-6'>
34 | 					You've completed all the challenges on this section. Let's move on to the next one.
35 | 				</p>
36 | 				<Button asChild onClick={onClose} className='bg-green-500 hover:bg-green-600 text-white'>
37 | 					<Link href='/redis-data-structures'>Continue Learning</Link>
38 | 				</Button>
39 | 			</motion.div>
40 | 		</div>
41 | 	);
42 | };
43 | 
44 | export default Congrats;
45 | 


--------------------------------------------------------------------------------
/src/components/Footer.tsx:
--------------------------------------------------------------------------------
 1 | import { Zap, Twitter, Github, Youtube } from "lucide-react";
 2 | import Link from "next/link";
 3 | 
 4 | const Footer = () => {
 5 | 	const socialLinks = [
 6 | 		{ href: "https://x.com/asaprogrammer_", icon: Twitter, label: "Twitter" },
 7 | 		{ href: "https://github.com/burakorkmez/redis-rush", icon: Github, label: "GitHub" },
 8 | 		{ href: "https://www.youtube.com/@asaprogrammer_", icon: Youtube, label: "YouTube" },
 9 | 	];
10 | 
11 | 	return (
12 | 		<footer className='bg-gray-900 text-gray-300 py-12 px-4 border-t border-gray-800 mt-auto'>
13 | 			<div className='max-w-6xl mx-auto'>
14 | 				<div className='flex flex-col md:flex-row justify-between items-center gap-8'>
15 | 					<div className='text-center md:text-left'>
16 | 						<Link
17 | 							href='/'
18 | 							className='text-2xl font-bold text-white flex items-center max-w-fit mx-auto md:mx-0'
19 | 						>
20 | 							<span className='bg-clip-text text-transparent bg-gradient-to-r from-green-400 via-emerald-500 to-teal-600'>
21 | 								rush
22 | 							</span>
23 | 							<Zap className='size-6 ml-1 text-teal-500' />
24 | 						</Link>
25 | 						<p className='text-sm text-gray-400 mt-2'>Learn Redis with interactive challenges</p>
26 | 					</div>
27 | 					<div className='flex gap-4'>
28 | 						{socialLinks.map((link) => (
29 | 							<a
30 | 								key={link.label}
31 | 								href={link.href}
32 | 								target='_blank'
33 | 								rel='noopener noreferrer'
34 | 								className='text-gray-400 hover:text-white transition-colors duration-300'
35 | 								aria-label={link.label}
36 | 							>
37 | 								<link.icon className='size-6' />
38 | 							</a>
39 | 						))}
40 | 					</div>
41 | 				</div>
42 | 
43 | 				<div className='mt-12 pt-8 border-t border-gray-800 max-w-4xl mx-auto'>
44 | 					<div className='space-y-4 text-xs text-gray-500 text-center'>
45 | 						<p>
46 | 							* Redis is a trademark of Redis Ltd. Any rights therein are reserved to Redis Ltd. Any use
47 | 							by Redis Rush is for referential purposes only and does not indicate any sponsorship,
48 | 							endorsement or affiliation between Redis and Redis Rush.
49 | 						</p>
50 | 						<p>
51 | 							** Upstash and the Upstash logo are trademarks and/or registered trademarks of Upstash, Inc.
52 | 							in the United States and other jurisdictions.
53 | 						</p>
54 | 					</div>
55 | 				</div>
56 | 			</div>
57 | 		</footer>
58 | 	);
59 | };
60 | 
61 | export default Footer;
62 | 


--------------------------------------------------------------------------------
/src/components/Header.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | import { useState } from "react";
  3 | import Link from "next/link";
  4 | import { motion } from "framer-motion";
  5 | import { Button } from "@/components/ui/button";
  6 | import { Zap, Menu, X, Github, Star } from "lucide-react";
  7 | 
  8 | const Header = () => {
  9 | 	const [isMenuOpen, setIsMenuOpen] = useState(false);
 10 | 
 11 | 	const toggleMenu = () => setIsMenuOpen(!isMenuOpen);
 12 | 
 13 | 	const navItems = [
 14 | 		{ href: "/redis-basics", label: "Basics" },
 15 | 		{ href: "/redis-data-structures", label: "Data Structures" },
 16 | 		{ href: "/learn-upstash", label: "Upstash" },
 17 | 	];
 18 | 
 19 | 	return (
 20 | 		<header className='fixed top-0 left-0 right-0 z-50 py-4 bg-gray-800/70 backdrop-blur-md border-b border-green-500/20 shadow-lg'>
 21 | 			<div className='container mx-auto px-4 max-w-6xl flex flex-wrap justify-between items-center'>
 22 | 				<Link href='/' className='text-2xl font-bold text-white flex items-center'>
 23 | 					<span className='bg-clip-text text-transparent bg-gradient-to-r from-green-400 via-emerald-500 to-teal-600'>
 24 | 						rush
 25 | 					</span>
 26 | 					<Zap className='size-6 ml-1 text-teal-500' />
 27 | 					<span className='text-xs bg-teal-500 text-white px-1 ml-2'>BETA</span>
 28 | 				</Link>
 29 | 
 30 | 				{/* Hamburger menu for mobile */}
 31 | 				<button className='md:hidden text-gray-300 hover:text-white focus:outline-none' onClick={toggleMenu}>
 32 | 					{isMenuOpen ? <X className='h-6 w-6' /> : <Menu className='h-6 w-6' />}
 33 | 				</button>
 34 | 
 35 | 				{/* Navigation for larger screens */}
 36 | 				<nav className='hidden md:flex items-center gap-4'>
 37 | 					{navItems.map((item) => (
 38 | 						<Button
 39 | 							key={item.href}
 40 | 							variant='ghost'
 41 | 							asChild
 42 | 							className='text-gray-300 hover:text-white hover:bg-green-500/10'
 43 | 						>
 44 | 							<Link href={item.href}>{item.label}</Link>
 45 | 						</Button>
 46 | 					))}
 47 | 					<GithubStarButton />
 48 | 				</nav>
 49 | 			</div>
 50 | 
 51 | 			{/* Mobile menu */}
 52 | 			{isMenuOpen && (
 53 | 				<div className='md:hidden mt-4 pb-4 px-4 bg-gray-800/90 backdrop-blur-md'>
 54 | 					<nav className='flex flex-col gap-2'>
 55 | 						{navItems.map((item) => (
 56 | 							<Button
 57 | 								key={item.href}
 58 | 								variant='ghost'
 59 | 								asChild
 60 | 								className='text-gray-300 hover:text-white hover:bg-green-500/10 w-full justify-start'
 61 | 								onClick={toggleMenu}
 62 | 							>
 63 | 								<Link href={item.href}>{item.label}</Link>
 64 | 							</Button>
 65 | 						))}
 66 | 						<GithubStarButton />
 67 | 					</nav>
 68 | 				</div>
 69 | 			)}
 70 | 		</header>
 71 | 	);
 72 | };
 73 | 
 74 | export default Header;
 75 | 
 76 | const GithubStarButton = () => {
 77 | 	return (
 78 | 		<motion.a
 79 | 			href='https://github.com/burakorkmez/redis-rush'
 80 | 			target='_blank'
 81 | 			rel='noopener noreferrer'
 82 | 			className='inline-flex items-center px-2 py-2 bg-gradient-to-r from-green-400 to-teal-500 text-white rounded-md shadow-md hover:from-green-500 hover:to-teal-600 transition-all duration-300 ease-in-out overflow-hidden sm:w-auto max-w-fit'
 83 | 			whileHover='hover'
 84 | 			initial='initial'
 85 | 		>
 86 | 			<Github className='mr-2 h-4 w-4' />
 87 | 			<span className='mr-2'>Star us</span>
 88 | 			<motion.div
 89 | 				className='flex items-center bg-white/20 rounded-full px-2 py-1'
 90 | 				variants={{
 91 | 					initial: { opacity: 0, x: 50 },
 92 | 					hover: { opacity: 1, x: 0 },
 93 | 				}}
 94 | 				transition={{ type: "spring", stiffness: 300, damping: 20 }}
 95 | 			>
 96 | 				<Star className='h-3 w-3 mr-1 text-yellow-300' />
 97 | 				<span className='text-xs font-semibold'>:)</span>
 98 | 			</motion.div>
 99 | 		</motion.a>
100 | 	);
101 | };
102 | 


--------------------------------------------------------------------------------
/src/components/LearningSection.tsx:
--------------------------------------------------------------------------------
  1 | import { useEffect, useState } from "react";
  2 | import { motion } from "framer-motion";
  3 | import { Button } from "@/components/ui/button";
  4 | import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
  5 | import { ArrowRight, Book, Code, Lightbulb } from "lucide-react";
  6 | 
  7 | import UseCaseTab from "./UseCaseTab";
  8 | import { useRouter, useSearchParams } from "next/navigation";
  9 | import OverviewTab from "./OverviewTab";
 10 | import CommandsTab from "./CommandsTab";
 11 | import { Section } from "@/utils/constants";
 12 | 
 13 | interface LearningSectionProps {
 14 | 	section: Section;
 15 | 	onNext: () => void;
 16 | }
 17 | 
 18 | const LearningSection = ({ section, onNext }: LearningSectionProps) => {
 19 | 	const router = useRouter();
 20 | 	const searchParams = useSearchParams();
 21 | 	const [activeTab, setActiveTab] = useState("overview");
 22 | 
 23 | 	useEffect(() => {
 24 | 		const tab = searchParams.get("tab");
 25 | 		if (tab && ["overview", "commands", "usecase"].includes(tab)) {
 26 | 			setActiveTab(tab);
 27 | 		}
 28 | 	}, [searchParams]);
 29 | 
 30 | 	const overview = section.content.overview;
 31 | 	const keyCommands = section.content.keyCommands;
 32 | 	const useCase = section.content.useCase;
 33 | 
 34 | 	const handleTabChange = (value: string) => {
 35 | 		setActiveTab(value);
 36 | 		const params = new URLSearchParams(searchParams);
 37 | 		params.set("tab", value);
 38 | 		router.push(`?${params.toString()}`, { scroll: false });
 39 | 	};
 40 | 
 41 | 	return (
 42 | 		<div className='space-y-6 bg-gradient-to-br from-gray-900 to-gray-800 text-gray-100 p-6 rounded-xl shadow-2xl'>
 43 | 			<h2 className='text-2xl font-extrabold bg-clip-text text-transparent bg-gradient-to-r from-green-400 to-blue-500'>
 44 | 				First Learn, Then Practice
 45 | 			</h2>
 46 | 
 47 | 			<Tabs value={activeTab} onValueChange={handleTabChange}>
 48 | 				<TabsList className='grid grid-cols-3 gap-4 bg-gray-800/50 p-1 rounded-lg'>
 49 | 					{["overview", "commands", "usecase"].map((tab) => (
 50 | 						<TabsTrigger
 51 | 							key={tab}
 52 | 							value={tab}
 53 | 							className='relative  text-gray-300 transition-all data-[state=active]:text-green-400'
 54 | 						>
 55 | 							<span className='flex items-center justify-center'>
 56 | 								{tab === "overview" && <Book className='mr-2 h-4 w-4' />}
 57 | 								{tab === "commands" && <Code className='mr-2 h-4 w-4' />}
 58 | 								{tab === "usecase" && <Lightbulb className='mr-2 h-4 w-4' />}
 59 | 								{tab.charAt(0).toUpperCase() + tab.slice(1)}
 60 | 							</span>
 61 | 						</TabsTrigger>
 62 | 					))}
 63 | 				</TabsList>
 64 | 
 65 | 				<motion.div
 66 | 					key={activeTab}
 67 | 					initial={{ opacity: 0, y: 20 }}
 68 | 					animate={{ opacity: 1, y: 0 }}
 69 | 					exit={{ opacity: 0, y: -20 }}
 70 | 					transition={{ duration: 0.3 }}
 71 | 				>
 72 | 					{/* OVERVIEW TAB */}
 73 | 					<TabsContent value='overview' className='mt-4'>
 74 | 						<OverviewTab overview={overview} title={section.title} />
 75 | 					</TabsContent>
 76 | 
 77 | 					{/* COMMANDS TAB */}
 78 | 					<TabsContent value='commands' className='mt-4'>
 79 | 						<CommandsTab keyCommands={keyCommands} />
 80 | 					</TabsContent>
 81 | 
 82 | 					{/* USE-CASE TAB */}
 83 | 					<TabsContent value='usecase' className='mt-4'>
 84 | 						<UseCaseTab useCase={useCase} />
 85 | 					</TabsContent>
 86 | 				</motion.div>
 87 | 			</Tabs>
 88 | 
 89 | 			<div className='flex justify-end mt-6'>
 90 | 				<Button
 91 | 					onClick={() => {
 92 | 						onNext();
 93 | 					}}
 94 | 					className={`bg-gradient-to-r from-green-500 to-emerald-800 text-white px-6 py-3 rounded-full font-semibold transition-all 
 95 |              opacity-100 hover:shadow-lg `}
 96 | 				>
 97 | 					I'm Ready for the Challenge <ArrowRight className='ml-2 h-5 w-5' />
 98 | 				</Button>
 99 | 			</div>
100 | 		</div>
101 | 	);
102 | };
103 | 
104 | export default LearningSection;
105 | 


--------------------------------------------------------------------------------
/src/components/OverviewTab.tsx:
--------------------------------------------------------------------------------
 1 | import { Card, CardContent } from "./ui/card";
 2 | 
 3 | const OverviewTab = ({ overview, title }: { overview: string; title: string }) => {
 4 | 	const formatOverview = (text: string) => {
 5 | 		const lines = text.split("\n").filter((line) => line.trim() !== "");
 6 | 		const formattedLines = lines.map((line, index) => {
 7 | 			if (line.match(/^\d+\./)) {
 8 | 				return (
 9 | 					<li key={index} className='mb-2'>
10 | 						<span className='font-semibold text-green-400'>{line.split(".")[0]}.</span>
11 | 						{line.split(".").slice(1).join(".")}
12 | 					</li>
13 | 				);
14 | 			}
15 | 			return (
16 | 				<p key={index} className='mb-2'>
17 | 					{line}
18 | 				</p>
19 | 			);
20 | 		});
21 | 		return formattedLines;
22 | 	};
23 | 
24 | 	return (
25 | 		<Card className='bg-gray-800/50 border-gray-700'>
26 | 			<CardContent className='p-6'>
27 | 				<div className='text-gray-300 leading-relaxed space-y-4'>
28 | 					<h3 className='text-xl font-semibold text-green-400 mb-3'>{title}</h3>
29 | 					{formatOverview(overview)}
30 | 				</div>
31 | 			</CardContent>
32 | 		</Card>
33 | 	);
34 | };
35 | export default OverviewTab;
36 | 


--------------------------------------------------------------------------------
/src/components/ProgressBar.tsx:
--------------------------------------------------------------------------------
 1 | import { Progress } from "@/components/ui/progress";
 2 | 
 3 | interface ProgressBarProps {
 4 | 	currentSection: number;
 5 | 	totalSections: number;
 6 | 	currentChallenge: number;
 7 | 	totalChallenges: number;
 8 | 	isLastChallenge: boolean;
 9 | }
10 | 
11 | const ProgressBar: React.FC<ProgressBarProps> = ({
12 | 	currentSection,
13 | 	totalSections,
14 | 	currentChallenge,
15 | 	totalChallenges,
16 | 	isLastChallenge,
17 | }) => {
18 | 	const sectionProgress = (currentSection / totalSections) * 100;
19 | 	const challengeProgress = (currentChallenge / totalChallenges) * (100 / totalSections);
20 | 	const totalProgress = isLastChallenge ? 100 : Math.min(sectionProgress + challengeProgress, 99);
21 | 
22 | 	return <Progress value={totalProgress} className='w-full [&>*]:bg-emerald-600' />;
23 | };
24 | 
25 | export default ProgressBar;
26 | 


--------------------------------------------------------------------------------
/src/components/RedisCli.tsx:
--------------------------------------------------------------------------------
 1 | import { useState, useRef, useEffect } from "react";
 2 | 
 3 | type RedisCLIProps = {
 4 | 	onSubmit: (input: string) => void;
 5 | };
 6 | 
 7 | const RedisCLI = ({ onSubmit }: RedisCLIProps) => {
 8 | 	const [inputValue, setInputValue] = useState("");
 9 | 	const [commandHistory, setCommandHistory] = useState<string[]>([]);
10 | 	const [historyIndex, setHistoryIndex] = useState(-1);
11 | 	const inputRef = useRef<HTMLInputElement>(null);
12 | 	const [cursorPosition, setCursorPosition] = useState(0);
13 | 
14 | 	useEffect(() => {
15 | 		// without setTimeout, the focus doesn't work. One more reason to hate react or js...
16 | 		setTimeout(() => {
17 | 			if (inputRef.current) {
18 | 				console.log("run if");
19 | 				inputRef.current.focus();
20 | 			}
21 | 		}, 100);
22 | 	});
23 | 
24 | 	const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
25 | 		if (e.key === "Enter") {
26 | 			e.preventDefault();
27 | 			handleSubmit();
28 | 		} else if (e.key === "ArrowUp") {
29 | 			e.preventDefault();
30 | 			if (historyIndex < commandHistory.length - 1) {
31 | 				let newIndex = historyIndex + 1;
32 | 				setHistoryIndex(newIndex);
33 | 				setInputValue(commandHistory[commandHistory.length - 1 - newIndex]);
34 | 				setCursorPosition(commandHistory[commandHistory.length - 1 - newIndex].length);
35 | 			}
36 | 		} else if (e.key === "ArrowDown") {
37 | 			e.preventDefault();
38 | 			if (historyIndex > 0) {
39 | 				const newIndex = historyIndex - 1;
40 | 				setHistoryIndex(newIndex);
41 | 				setInputValue(commandHistory[commandHistory.length - 1 - newIndex]);
42 | 				setCursorPosition(commandHistory[commandHistory.length - 1 - newIndex].length);
43 | 			} else if (historyIndex === 0) {
44 | 				setHistoryIndex(-1);
45 | 				setInputValue("");
46 | 				setCursorPosition(0);
47 | 			}
48 | 		}
49 | 	};
50 | 
51 | 	const handleSubmit = () => {
52 | 		if (inputValue.trim()) {
53 | 			setCommandHistory([...commandHistory, inputValue]);
54 | 			onSubmit(inputValue);
55 | 			setInputValue("");
56 | 			setHistoryIndex(-1);
57 | 			setCursorPosition(0);
58 | 		}
59 | 	};
60 | 
61 | 	useEffect(() => {
62 | 		if (inputRef.current) {
63 | 			inputRef.current.value = inputValue;
64 | 			inputRef.current.setSelectionRange(cursorPosition, cursorPosition);
65 | 		}
66 | 	}, [inputValue, cursorPosition]);
67 | 
68 | 	return (
69 | 		<div className='bg-black p-4 rounded-md font-mono text-sm'>
70 | 			{/* <div className='mb-2'>
71 | 				{commandHistory.map((cmd, index) => (
72 | 					<div key={index} className='text-gray-500'>
73 | 						$ {cmd}
74 | 					</div>
75 | 				))}
76 | 			</div> */}
77 | 			<div className='flex items-center'>
78 | 				<span className='text-green-500 mr-2'>$</span>
79 | 				<input
80 | 					ref={inputRef}
81 | 					type='text'
82 | 					value={inputValue}
83 | 					onChange={(e) => {
84 | 						setInputValue(e.target.value);
85 | 						setCursorPosition(e.target.selectionStart || 0);
86 | 					}}
87 | 					onKeyDown={handleKeyDown}
88 | 					className='bg-transparent text-white outline-none flex-grow'
89 | 					placeholder='Enter Redis command...'
90 | 				/>
91 | 			</div>
92 | 		</div>
93 | 	);
94 | };
95 | 
96 | export default RedisCLI;
97 | 


--------------------------------------------------------------------------------
/src/components/UpstashRedisLearningPlatform.tsx:
--------------------------------------------------------------------------------
  1 | import { useCallback, useState } from "react";
  2 | import { motion } from "framer-motion";
  3 | import CodeMirror from "@uiw/react-codemirror";
  4 | import { javascript } from "@codemirror/lang-javascript";
  5 | import { Card, CardContent } from "@/components/ui/card";
  6 | import { Button } from "@/components/ui/button";
  7 | import { Slider } from "@/components/ui/slider";
  8 | import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
  9 | import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 10 | import { Play, Code, Type, Eye, ChevronLeft, ChevronRight } from "lucide-react";
 11 | import dynamic from "next/dynamic";
 12 | import { Problem } from "../utils/problems";
 13 | import { useToast } from "@/components/ui/use-toast";
 14 | 
 15 | import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 16 | import { vscDarkPlus } from "react-syntax-highlighter/dist/esm/styles/prism";
 17 | 
 18 | const ReactConfetti = dynamic(() => import("react-confetti"), { ssr: false });
 19 | 
 20 | interface UpstashRedisLearningPlatformProps {
 21 | 	problem: Problem;
 22 | 	onNextProblem: () => void;
 23 | 	onPreviousProblem: () => void;
 24 | 	hasNextProblem: boolean;
 25 | 	hasPreviousProblem: boolean;
 26 | }
 27 | 
 28 | // TODO: should be in a separate file
 29 | class MockRedis {
 30 | 	private storage: { [key: string]: any } = {};
 31 | 
 32 | 	async set(key: string, value: any, options?: { ex?: number }) {
 33 | 		this.storage[key] = { value, expiry: options?.ex ? Date.now() + options.ex * 1000 : null };
 34 | 		return "OK";
 35 | 	}
 36 | 
 37 | 	async get(key: string) {
 38 | 		const item = this.storage[key];
 39 | 		if (item && (!item.expiry || item.expiry > Date.now())) {
 40 | 			return item.value;
 41 | 		}
 42 | 		return null;
 43 | 	}
 44 | 
 45 | 	async rpush(key: string, value: any) {
 46 | 		if (!Array.isArray(this.storage[key])) {
 47 | 			this.storage[key] = [];
 48 | 		}
 49 | 		this.storage[key].push(value);
 50 | 		return this.storage[key].length;
 51 | 	}
 52 | 
 53 | 	async lpop(key: string) {
 54 | 		if (Array.isArray(this.storage[key]) && this.storage[key].length > 0) {
 55 | 			return this.storage[key].shift();
 56 | 		}
 57 | 		return null;
 58 | 	}
 59 | 
 60 | 	async hset(key: string, field: string, value: any) {
 61 | 		if (typeof this.storage[key] !== "object" || this.storage[key] === null) {
 62 | 			this.storage[key] = {};
 63 | 		}
 64 | 		this.storage[key][field] = value;
 65 | 		return 1;
 66 | 	}
 67 | 
 68 | 	async hgetall(key: string) {
 69 | 		return this.storage[key] || null;
 70 | 	}
 71 | 
 72 | 	async incr(key: string) {
 73 | 		if (typeof this.storage[key] !== "number") {
 74 | 			this.storage[key] = 0;
 75 | 		}
 76 | 		this.storage[key]++;
 77 | 		return this.storage[key];
 78 | 	}
 79 | 
 80 | 	async setnx(key: string, value: any) {
 81 | 		if (this.storage[key] === undefined) {
 82 | 			this.storage[key] = value;
 83 | 			return 1;
 84 | 		}
 85 | 		return 0;
 86 | 	}
 87 | 
 88 | 	async del(key: string) {
 89 | 		const existed = key in this.storage;
 90 | 		delete this.storage[key];
 91 | 		return existed ? 1 : 0;
 92 | 	}
 93 | 
 94 | 	async exists(key: string) {
 95 | 		return key in this.storage ? 1 : 0;
 96 | 	}
 97 | 
 98 | 	async sadd(key: string, value: any) {
 99 | 		if (!Array.isArray(this.storage[key])) {
100 | 			this.storage[key] = [];
101 | 		}
102 | 		if (!this.storage[key].includes(value)) {
103 | 			this.storage[key].push(value);
104 | 			return 1;
105 | 		}
106 | 		return 0;
107 | 	}
108 | 
109 | 	async smembers(key: string) {
110 | 		return Array.isArray(this.storage[key]) ? this.storage[key] : [];
111 | 	}
112 | 
113 | 	async publish(channel: string, message: string) {
114 | 		console.log(`Published to ${channel}: ${message}`);
115 | 		return 0; // returns 0  bc we don't have actual subscribers in this mock
116 | 	}
117 | }
118 | 
119 | const UpstashRedisLearningPlatform = ({
120 | 	problem,
121 | 	onNextProblem,
122 | 	onPreviousProblem,
123 | 	hasNextProblem,
124 | 	hasPreviousProblem,
125 | }: UpstashRedisLearningPlatformProps) => {
126 | 	const [code, setCode] = useState(problem.initialCode);
127 | 	const [fontSize, setFontSize] = useState(14);
128 | 	const [showConfetti, setShowConfetti] = useState(false);
129 | 	const { toast } = useToast();
130 | 
131 | 	const highlightText = (hint: string) => {
132 | 		return hint.split(/(`[^`]+`)/g).map((part, index) => {
133 | 			if (part.startsWith("`") && part.endsWith("`")) {
134 | 				return (
135 | 					<span key={index} className='bg-gray-700 text-gray-200 px-1 rounded'>
136 | 						{part.slice(1, -1)}
137 | 					</span>
138 | 				);
139 | 			}
140 | 			return part;
141 | 		});
142 | 	};
143 | 
144 | 	const runTests = useCallback(async () => {
145 | 		const results = [];
146 | 		const client = new MockRedis();
147 | 
148 | 		try {
149 | 			// Strip out the "do not modify" section
150 | 			const userCode = code.split("/* DO NOT MODIFY THE CODE ABOVE */")[1];
151 | 
152 | 			const userCodeFunction = new Function(
153 | 				"client",
154 | 				`
155 | 				${userCode}
156 | 				return {
157 | 					${userCode
158 | 						.match(/async function (\w+)/g)
159 | 						?.map((match) => match.split(" ")[2])
160 | 						.join(", ")}
161 | 				};
162 | 			`
163 | 			);
164 | 
165 | 			const userFunctions = userCodeFunction(client);
166 | 
167 | 			for (const testCase of problem.testCases) {
168 | 				try {
169 | 					const passed = await testCase.run(userFunctions);
170 | 					results.push({
171 | 						name: testCase.name,
172 | 						passed,
173 | 						message: passed ? "Passed" : "Failed",
174 | 					});
175 | 				} catch (error: any) {
176 | 					results.push({
177 | 						name: testCase.name,
178 | 						passed: false,
179 | 						message: `Error: ${error.message}`,
180 | 					});
181 | 				}
182 | 			}
183 | 		} catch (error: any) {
184 | 			results.push({
185 | 				name: "Code Execution",
186 | 				passed: false,
187 | 				message: `Error: ${error.message}`,
188 | 			});
189 | 		}
190 | 
191 | 		const allPassed = results.every((result) => result.passed);
192 | 		if (allPassed) {
193 | 			setShowConfetti(true);
194 | 			toast({
195 | 				title: "Congratulations!",
196 | 				description: "All tests passed successfully!",
197 | 			});
198 | 		} else {
199 | 			toast({
200 | 				title: "Tests Failed",
201 | 				description: "Some tests did not pass. Check the results for details.",
202 | 				variant: "destructive",
203 | 			});
204 | 		}
205 | 	}, [code, problem.testCases, toast]);
206 | 
207 | 	return (
208 | 		<>
209 | 			<div className='min-h-screen bg-gradient-to-br from-gray-900 to-gray-800 text-gray-100 p-4 sm:p-8 overflow-hidden'>
210 | 				<motion.div
211 | 					initial={{ opacity: 0, y: 20 }}
212 | 					animate={{ opacity: 1, y: 0 }}
213 | 					transition={{ duration: 0.5 }}
214 | 					className='max-w-screen-2xl mx-auto flex flex-col'
215 | 				>
216 | 					<ResizablePanelGroup direction='horizontal' className='flex-1 gap-1'>
217 | 						<ResizablePanel defaultSize={50}>
218 | 							<Tabs defaultValue='description' className='h-full flex flex-col'>
219 | 								<TabsList className='grid w-full grid-cols-2'>
220 | 									<TabsTrigger value='description'>Description</TabsTrigger>
221 | 									<TabsTrigger value='hints'>Hints</TabsTrigger>
222 | 								</TabsList>
223 | 								<TabsContent value='description' className='flex-1 overflow-auto'>
224 | 									<Card className='bg-gray-800/50 backdrop-blur-sm border-gray-700 h-full overflow-auto'>
225 | 										<CardContent className='p-6'>
226 | 											<div className='flex items-center justify-between mb-4'>
227 | 												<h1
228 | 													className={`text-3xl sm:text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r ${
229 | 														problem.difficulty === "easy"
230 | 															? "from-green-400 to-green-500"
231 | 															: problem.difficulty === "medium"
232 | 															? "from-yellow-400 to-yellow-500"
233 | 															: "from-red-400 to-red-500"
234 | 													} mb-4 sm:mb-0`}
235 | 												>
236 | 													{problem.title}
237 | 												</h1>
238 | 												<span
239 | 													className={`px-2 py-1 rounded-full text-sm font-medium ${
240 | 														problem.difficulty === "easy"
241 | 															? "bg-green-500 text-green-100"
242 | 															: problem.difficulty === "medium"
243 | 															? "bg-yellow-500 text-yellow-100"
244 | 															: "bg-red-500 text-red-100"
245 | 													}`}
246 | 												>
247 | 													{problem.difficulty}
248 | 												</span>
249 | 											</div>
250 | 											<p className='mb-4 text-gray-300'>{highlightText(problem.description)}</p>
251 | 
252 | 											<h3 className='text-xl font-semibold my-4 flex items-center'>
253 | 												Example Usage
254 | 											</h3>
255 | 											<SyntaxHighlighter
256 | 												language='javascript'
257 | 												style={vscDarkPlus}
258 | 												customStyle={{
259 | 													backgroundColor: "#282C34",
260 | 													padding: "1rem",
261 | 													borderRadius: "0.5rem",
262 | 													fontSize: "1.1em",
263 | 												}}
264 | 												codeTagProps={{}}
265 | 											>
266 | 												{problem.exampleUsage}
267 | 											</SyntaxHighlighter>
268 | 										</CardContent>
269 | 									</Card>
270 | 								</TabsContent>
271 | 								<TabsContent value='hints' className='h-[calc(100%-40px)] overflow-auto'>
272 | 									<Card className='bg-gray-800/50 backdrop-blur-sm border-gray-700 h-full'>
273 | 										<CardContent className='p-6'>
274 | 											<h2 className='text-2xl font-semibold mb-4 flex items-center'>Hints</h2>
275 | 											<ul className='list-disc pl-5 space-y-2 text-gray-300'>
276 | 												{problem.hints.map((hint, index) => (
277 | 													<li key={index} className='flex items-start space-x-2'>
278 | 														<span className='text-gray-400'>•</span>
279 | 														<span>{highlightText(hint)}</span>
280 | 													</li>
281 | 												))}
282 | 											</ul>
283 | 										</CardContent>
284 | 									</Card>
285 | 								</TabsContent>
286 | 							</Tabs>
287 | 						</ResizablePanel>
288 | 						<ResizableHandle withHandle />
289 | 						<ResizablePanel defaultSize={50}>
290 | 							<Card className='bg-gray-800/50 backdrop-blur-sm border-gray-700 h-full flex flex-col overflow-hidden'>
291 | 								<div className='flex items-center justify-between bg-gray-800/80 px-4 py-2 overflow-auto'>
292 | 									<h3 className='text-lg font-semibold'>Solution</h3>
293 | 									<div className='flex items-center gap-2'>
294 | 										<div className='flex items-center'>
295 | 											<Type className='h-4 w-4 mr-2 text-gray-400' />
296 | 											<Slider
297 | 												value={[fontSize]}
298 | 												onValueChange={(value) => setFontSize(value[0])}
299 | 												min={10}
300 | 												max={24}
301 | 												step={1}
302 | 												className='w-24'
303 | 											/>
304 | 											<span className='ml-2 text-sm text-gray-400'>{fontSize}px</span>
305 | 										</div>
306 | 										<Button
307 | 											size='sm'
308 | 											variant='outline'
309 | 											className='text-emerald-300 border-emerald-600 hover:bg-emerald-900/20'
310 | 											onClick={runTests}
311 | 										>
312 | 											<Play className='mr-2 h-4 w-4' /> Run Tests
313 | 										</Button>
314 | 										<Button
315 | 											size='sm'
316 | 											variant='outline'
317 | 											className='text-emerald-300 border-emerald-600 hover:bg-emerald-900/20'
318 | 											onClick={() => {
319 | 												setCode(problem.solutionCode);
320 | 											}}
321 | 										>
322 | 											<Eye className='mr-2 h-4 w-4' /> Reveal Solution
323 | 										</Button>
324 | 										<Button
325 | 											variant='outline'
326 | 											className='text-emerald-300 border-emerald-600 hover:bg-emerald-900/20'
327 | 											onClick={onPreviousProblem}
328 | 											size={"sm"}
329 | 											disabled={!hasPreviousProblem}
330 | 										>
331 | 											<ChevronLeft className='size-6' />
332 | 										</Button>
333 | 										<Button
334 | 											variant='outline'
335 | 											className='text-emerald-300 border-emerald-600 hover:bg-emerald-900/20'
336 | 											onClick={onNextProblem}
337 | 											size={"sm"}
338 | 											disabled={!hasNextProblem}
339 | 										>
340 | 											<ChevronRight className='size-6' />
341 | 										</Button>
342 | 									</div>
343 | 								</div>
344 | 								<div className='h-full flex-1 overflow-auto'>
345 | 									<CodeMirror
346 | 										value={code}
347 | 										theme='dark'
348 | 										className='h-full'
349 | 										height='100%'
350 | 										extensions={[javascript({ jsx: true })]}
351 | 										onChange={(value) => setCode(value)}
352 | 										style={{ fontSize: `${fontSize}px` }}
353 | 									/>
354 | 								</div>
355 | 							</Card>
356 | 						</ResizablePanel>
357 | 					</ResizablePanelGroup>
358 | 				</motion.div>
359 | 			</div>
360 | 
361 | 			{showConfetti && (
362 | 				<ReactConfetti
363 | 					width={window.innerWidth - 30}
364 | 					height={window.innerHeight - 1}
365 | 					numberOfPieces={1000}
366 | 					recycle={false}
367 | 				/>
368 | 			)}
369 | 		</>
370 | 	);
371 | };
372 | 
373 | export default UpstashRedisLearningPlatform;
374 | 


--------------------------------------------------------------------------------
/src/components/UseCaseTab.tsx:
--------------------------------------------------------------------------------
 1 | import { Card, CardContent } from "@/components/ui/card";
 2 | import { Lightbulb } from "lucide-react";
 3 | 
 4 | const UseCaseTab = ({ useCase }: { useCase: string }) => {
 5 | 	const lines = useCase.trim().split("\n");
 6 | 	const intro = lines[0];
 7 | 	const steps = lines.slice(2, -2);
 8 | 	const conclusion = lines[lines.length - 1];
 9 | 
10 | 	const highlightCommands = (text: string) => {
11 | 		const commands = ["SET", "GET", "EXISTS", "DEL", "MSET", "MGET", "INCR", "DECR", "EXPIRE", "TTL"];
12 | 		const regex = new RegExp(`\\b(${commands.join("|")})\\b`, "g");
13 | 		return text.replace(regex, '<code class="bg-gray-700 text-yellow-400 px-1 rounded">$1</code>');
14 | 	};
15 | 
16 | 	return (
17 | 		<Card className='bg-gray-800/50 border-gray-700 overflow-hidden'>
18 | 			<CardContent className='p-6'>
19 | 				<div className='flex items-center mb-4'>
20 | 					<Lightbulb className='w-6 h-6 text-yellow-400 mr-2' />
21 | 					<h3 className='text-xl font-semibold text-green-400'>Use Case:</h3>
22 | 				</div>
23 | 				<p className='text-gray-300 italic mb-4'>{intro}</p>
24 | 				<ul className='list-none space-y-2 mb-4'>
25 | 					{steps.map((step, index) => (
26 | 						<li key={index} className='flex items-start'>
27 | 							<span className='text-green-500 mr-2'>•</span>
28 | 							<span
29 | 								className='text-gray-200'
30 | 								dangerouslySetInnerHTML={{ __html: highlightCommands(step.substring(3)) }}
31 | 							/>
32 | 						</li>
33 | 					))}
34 | 				</ul>
35 | 				<p
36 | 					className='text-gray-300 bg-gray-700/50 p-4 rounded-md'
37 | 					dangerouslySetInnerHTML={{ __html: highlightCommands(conclusion) }}
38 | 				/>
39 | 			</CardContent>
40 | 		</Card>
41 | 	);
42 | };
43 | 
44 | export default UseCaseTab;
45 | 


--------------------------------------------------------------------------------
/src/components/decorators/RotatedText.tsx:
--------------------------------------------------------------------------------
 1 | import { cn } from "@/lib/utils";
 2 | import { ReactNode } from "react";
 3 | 
 4 | const RotatedText = ({ children, className }: { children: ReactNode; className?: string }) => {
 5 | 	return (
 6 | 		<span className='relative whitespace-nowrap'>
 7 | 			<span
 8 | 				className={cn(
 9 | 					"absolute bg-sky-500 -left-2 -top-1 -bottom-1 -right-2 md:-left-3 md:-top-0 md:-bottom-0 md:-right-3 -rotate-1 mx-2",
10 | 					className
11 | 				)}
12 | 				aria-hidden='true'
13 | 			/>
14 | 			<span className='relative uppercase font-bold'>{children}</span>
15 | 		</span>
16 | 	);
17 | };
18 | export default RotatedText;
19 | 


--------------------------------------------------------------------------------
/src/components/decorators/UnderlinedText.tsx:
--------------------------------------------------------------------------------
 1 | import { cn } from "@/lib/utils";
 2 | import { ReactNode } from "react";
 3 | 
 4 | const UnderlinedText = ({ children, className }: { children: ReactNode; className?: string }) => {
 5 | 	return (
 6 | 		<span className={cn("underline underline-offset-4 decoration-dashed decoration-teal-400", className)}>
 7 | 			{children}
 8 | 		</span>
 9 | 	);
10 | };
11 | export default UnderlinedText;
12 | 


--------------------------------------------------------------------------------
/src/components/providers/ThemeProvider.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import * as React from "react";
 4 | import { ThemeProvider as NextThemesProvider } from "next-themes";
 5 | import { type ThemeProviderProps } from "next-themes/dist/types";
 6 | 
 7 | export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
 8 | 	return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/components/ui/accordion.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as AccordionPrimitive from "@radix-ui/react-accordion"
 5 | import { ChevronDownIcon } from "@radix-ui/react-icons"
 6 | 
 7 | import { cn } from "@/lib/utils"
 8 | 
 9 | const Accordion = AccordionPrimitive.Root
10 | 
11 | const AccordionItem = React.forwardRef<
12 |   React.ElementRef<typeof AccordionPrimitive.Item>,
13 |   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
14 | >(({ className, ...props }, ref) => (
15 |   <AccordionPrimitive.Item
16 |     ref={ref}
17 |     className={cn("border-b", className)}
18 |     {...props}
19 |   />
20 | ))
21 | AccordionItem.displayName = "AccordionItem"
22 | 
23 | const AccordionTrigger = React.forwardRef<
24 |   React.ElementRef<typeof AccordionPrimitive.Trigger>,
25 |   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
26 | >(({ className, children, ...props }, ref) => (
27 |   <AccordionPrimitive.Header className="flex">
28 |     <AccordionPrimitive.Trigger
29 |       ref={ref}
30 |       className={cn(
31 |         "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
32 |         className
33 |       )}
34 |       {...props}
35 |     >
36 |       {children}
37 |       <ChevronDownIcon className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
38 |     </AccordionPrimitive.Trigger>
39 |   </AccordionPrimitive.Header>
40 | ))
41 | AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
42 | 
43 | const AccordionContent = React.forwardRef<
44 |   React.ElementRef<typeof AccordionPrimitive.Content>,
45 |   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
46 | >(({ className, children, ...props }, ref) => (
47 |   <AccordionPrimitive.Content
48 |     ref={ref}
49 |     className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
50 |     {...props}
51 |   >
52 |     <div className={cn("pb-4 pt-0", className)}>{children}</div>
53 |   </AccordionPrimitive.Content>
54 | ))
55 | AccordionContent.displayName = AccordionPrimitive.Content.displayName
56 | 
57 | export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
58 | 


--------------------------------------------------------------------------------
/src/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { Slot } from "@radix-ui/react-slot"
 3 | import { cva, type VariantProps } from "class-variance-authority"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | const buttonVariants = cva(
 8 |   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default:
13 |           "bg-primary text-primary-foreground shadow hover:bg-primary/90",
14 |         destructive:
15 |           "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
16 |         outline:
17 |           "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
18 |         secondary:
19 |           "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
20 |         ghost: "hover:bg-accent hover:text-accent-foreground",
21 |         link: "text-primary underline-offset-4 hover:underline",
22 |       },
23 |       size: {
24 |         default: "h-9 px-4 py-2",
25 |         sm: "h-8 rounded-md px-3 text-xs",
26 |         lg: "h-10 rounded-md px-8",
27 |         icon: "h-9 w-9",
28 |       },
29 |     },
30 |     defaultVariants: {
31 |       variant: "default",
32 |       size: "default",
33 |     },
34 |   }
35 | )
36 | 
37 | export interface ButtonProps
38 |   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
39 |     VariantProps<typeof buttonVariants> {
40 |   asChild?: boolean
41 | }
42 | 
43 | const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
44 |   ({ className, variant, size, asChild = false, ...props }, ref) => {
45 |     const Comp = asChild ? Slot : "button"
46 |     return (
47 |       <Comp
48 |         className={cn(buttonVariants({ variant, size, className }))}
49 |         ref={ref}
50 |         {...props}
51 |       />
52 |     )
53 |   }
54 | )
55 | Button.displayName = "Button"
56 | 
57 | export { Button, buttonVariants }
58 | 


--------------------------------------------------------------------------------
/src/components/ui/card.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | const Card = React.forwardRef<
 6 |   HTMLDivElement,
 7 |   React.HTMLAttributes<HTMLDivElement>
 8 | >(({ className, ...props }, ref) => (
 9 |   <div
10 |     ref={ref}
11 |     className={cn(
12 |       "rounded-xl border bg-card text-card-foreground shadow",
13 |       className
14 |     )}
15 |     {...props}
16 |   />
17 | ))
18 | Card.displayName = "Card"
19 | 
20 | const CardHeader = React.forwardRef<
21 |   HTMLDivElement,
22 |   React.HTMLAttributes<HTMLDivElement>
23 | >(({ className, ...props }, ref) => (
24 |   <div
25 |     ref={ref}
26 |     className={cn("flex flex-col space-y-1.5 p-6", className)}
27 |     {...props}
28 |   />
29 | ))
30 | CardHeader.displayName = "CardHeader"
31 | 
32 | const CardTitle = React.forwardRef<
33 |   HTMLParagraphElement,
34 |   React.HTMLAttributes<HTMLHeadingElement>
35 | >(({ className, ...props }, ref) => (
36 |   <h3
37 |     ref={ref}
38 |     className={cn("font-semibold leading-none tracking-tight", className)}
39 |     {...props}
40 |   />
41 | ))
42 | CardTitle.displayName = "CardTitle"
43 | 
44 | const CardDescription = React.forwardRef<
45 |   HTMLParagraphElement,
46 |   React.HTMLAttributes<HTMLParagraphElement>
47 | >(({ className, ...props }, ref) => (
48 |   <p
49 |     ref={ref}
50 |     className={cn("text-sm text-muted-foreground", className)}
51 |     {...props}
52 |   />
53 | ))
54 | CardDescription.displayName = "CardDescription"
55 | 
56 | const CardContent = React.forwardRef<
57 |   HTMLDivElement,
58 |   React.HTMLAttributes<HTMLDivElement>
59 | >(({ className, ...props }, ref) => (
60 |   <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
61 | ))
62 | CardContent.displayName = "CardContent"
63 | 
64 | const CardFooter = React.forwardRef<
65 |   HTMLDivElement,
66 |   React.HTMLAttributes<HTMLDivElement>
67 | >(({ className, ...props }, ref) => (
68 |   <div
69 |     ref={ref}
70 |     className={cn("flex items-center p-6 pt-0", className)}
71 |     {...props}
72 |   />
73 | ))
74 | CardFooter.displayName = "CardFooter"
75 | 
76 | export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
77 | 


--------------------------------------------------------------------------------
/src/components/ui/dialog.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as DialogPrimitive from "@radix-ui/react-dialog"
  5 | import { Cross2Icon } from "@radix-ui/react-icons"
  6 | 
  7 | import { cn } from "@/lib/utils"
  8 | 
  9 | const Dialog = DialogPrimitive.Root
 10 | 
 11 | const DialogTrigger = DialogPrimitive.Trigger
 12 | 
 13 | const DialogPortal = DialogPrimitive.Portal
 14 | 
 15 | const DialogClose = DialogPrimitive.Close
 16 | 
 17 | const DialogOverlay = React.forwardRef<
 18 |   React.ElementRef<typeof DialogPrimitive.Overlay>,
 19 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
 20 | >(({ className, ...props }, ref) => (
 21 |   <DialogPrimitive.Overlay
 22 |     ref={ref}
 23 |     className={cn(
 24 |       "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
 25 |       className
 26 |     )}
 27 |     {...props}
 28 |   />
 29 | ))
 30 | DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
 31 | 
 32 | const DialogContent = React.forwardRef<
 33 |   React.ElementRef<typeof DialogPrimitive.Content>,
 34 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
 35 | >(({ className, children, ...props }, ref) => (
 36 |   <DialogPortal>
 37 |     <DialogOverlay />
 38 |     <DialogPrimitive.Content
 39 |       ref={ref}
 40 |       className={cn(
 41 |         "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
 42 |         className
 43 |       )}
 44 |       {...props}
 45 |     >
 46 |       {children}
 47 |       <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
 48 |         <Cross2Icon className="h-4 w-4" />
 49 |         <span className="sr-only">Close</span>
 50 |       </DialogPrimitive.Close>
 51 |     </DialogPrimitive.Content>
 52 |   </DialogPortal>
 53 | ))
 54 | DialogContent.displayName = DialogPrimitive.Content.displayName
 55 | 
 56 | const DialogHeader = ({
 57 |   className,
 58 |   ...props
 59 | }: React.HTMLAttributes<HTMLDivElement>) => (
 60 |   <div
 61 |     className={cn(
 62 |       "flex flex-col space-y-1.5 text-center sm:text-left",
 63 |       className
 64 |     )}
 65 |     {...props}
 66 |   />
 67 | )
 68 | DialogHeader.displayName = "DialogHeader"
 69 | 
 70 | const DialogFooter = ({
 71 |   className,
 72 |   ...props
 73 | }: React.HTMLAttributes<HTMLDivElement>) => (
 74 |   <div
 75 |     className={cn(
 76 |       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
 77 |       className
 78 |     )}
 79 |     {...props}
 80 |   />
 81 | )
 82 | DialogFooter.displayName = "DialogFooter"
 83 | 
 84 | const DialogTitle = React.forwardRef<
 85 |   React.ElementRef<typeof DialogPrimitive.Title>,
 86 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
 87 | >(({ className, ...props }, ref) => (
 88 |   <DialogPrimitive.Title
 89 |     ref={ref}
 90 |     className={cn(
 91 |       "text-lg font-semibold leading-none tracking-tight",
 92 |       className
 93 |     )}
 94 |     {...props}
 95 |   />
 96 | ))
 97 | DialogTitle.displayName = DialogPrimitive.Title.displayName
 98 | 
 99 | const DialogDescription = React.forwardRef<
100 |   React.ElementRef<typeof DialogPrimitive.Description>,
101 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
102 | >(({ className, ...props }, ref) => (
103 |   <DialogPrimitive.Description
104 |     ref={ref}
105 |     className={cn("text-sm text-muted-foreground", className)}
106 |     {...props}
107 |   />
108 | ))
109 | DialogDescription.displayName = DialogPrimitive.Description.displayName
110 | 
111 | export {
112 |   Dialog,
113 |   DialogPortal,
114 |   DialogOverlay,
115 |   DialogTrigger,
116 |   DialogClose,
117 |   DialogContent,
118 |   DialogHeader,
119 |   DialogFooter,
120 |   DialogTitle,
121 |   DialogDescription,
122 | }
123 | 


--------------------------------------------------------------------------------
/src/components/ui/progress.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as ProgressPrimitive from "@radix-ui/react-progress"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const Progress = React.forwardRef<
 9 |   React.ElementRef<typeof ProgressPrimitive.Root>,
10 |   React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
11 | >(({ className, value, ...props }, ref) => (
12 |   <ProgressPrimitive.Root
13 |     ref={ref}
14 |     className={cn(
15 |       "relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
16 |       className
17 |     )}
18 |     {...props}
19 |   >
20 |     <ProgressPrimitive.Indicator
21 |       className="h-full w-full flex-1 bg-primary transition-all"
22 |       style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
23 |     />
24 |   </ProgressPrimitive.Root>
25 | ))
26 | Progress.displayName = ProgressPrimitive.Root.displayName
27 | 
28 | export { Progress }
29 | 


--------------------------------------------------------------------------------
/src/components/ui/resizable.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import { DragHandleDots2Icon } from "@radix-ui/react-icons"
 4 | import * as ResizablePrimitive from "react-resizable-panels"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const ResizablePanelGroup = ({
 9 |   className,
10 |   ...props
11 | }: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
12 |   <ResizablePrimitive.PanelGroup
13 |     className={cn(
14 |       "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
15 |       className
16 |     )}
17 |     {...props}
18 |   />
19 | )
20 | 
21 | const ResizablePanel = ResizablePrimitive.Panel
22 | 
23 | const ResizableHandle = ({
24 |   withHandle,
25 |   className,
26 |   ...props
27 | }: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
28 |   withHandle?: boolean
29 | }) => (
30 |   <ResizablePrimitive.PanelResizeHandle
31 |     className={cn(
32 |       "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
33 |       className
34 |     )}
35 |     {...props}
36 |   >
37 |     {withHandle && (
38 |       <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
39 |         <DragHandleDots2Icon className="h-2.5 w-2.5" />
40 |       </div>
41 |     )}
42 |   </ResizablePrimitive.PanelResizeHandle>
43 | )
44 | 
45 | export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
46 | 


--------------------------------------------------------------------------------
/src/components/ui/scroll-area.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const ScrollArea = React.forwardRef<
 9 |   React.ElementRef<typeof ScrollAreaPrimitive.Root>,
10 |   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
11 | >(({ className, children, ...props }, ref) => (
12 |   <ScrollAreaPrimitive.Root
13 |     ref={ref}
14 |     className={cn("relative overflow-hidden", className)}
15 |     {...props}
16 |   >
17 |     <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
18 |       {children}
19 |     </ScrollAreaPrimitive.Viewport>
20 |     <ScrollBar />
21 |     <ScrollAreaPrimitive.Corner />
22 |   </ScrollAreaPrimitive.Root>
23 | ))
24 | ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
25 | 
26 | const ScrollBar = React.forwardRef<
27 |   React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
28 |   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
29 | >(({ className, orientation = "vertical", ...props }, ref) => (
30 |   <ScrollAreaPrimitive.ScrollAreaScrollbar
31 |     ref={ref}
32 |     orientation={orientation}
33 |     className={cn(
34 |       "flex touch-none select-none transition-colors",
35 |       orientation === "vertical" &&
36 |         "h-full w-2.5 border-l border-l-transparent p-[1px]",
37 |       orientation === "horizontal" &&
38 |         "h-2.5 flex-col border-t border-t-transparent p-[1px]",
39 |       className
40 |     )}
41 |     {...props}
42 |   >
43 |     <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
44 |   </ScrollAreaPrimitive.ScrollAreaScrollbar>
45 | ))
46 | ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
47 | 
48 | export { ScrollArea, ScrollBar }
49 | 


--------------------------------------------------------------------------------
/src/components/ui/slider.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as SliderPrimitive from "@radix-ui/react-slider"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const Slider = React.forwardRef<
 9 |   React.ElementRef<typeof SliderPrimitive.Root>,
10 |   React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
11 | >(({ className, ...props }, ref) => (
12 |   <SliderPrimitive.Root
13 |     ref={ref}
14 |     className={cn(
15 |       "relative flex w-full touch-none select-none items-center",
16 |       className
17 |     )}
18 |     {...props}
19 |   >
20 |     <SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20">
21 |       <SliderPrimitive.Range className="absolute h-full bg-primary" />
22 |     </SliderPrimitive.Track>
23 |     <SliderPrimitive.Thumb className="block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
24 |   </SliderPrimitive.Root>
25 | ))
26 | Slider.displayName = SliderPrimitive.Root.displayName
27 | 
28 | export { Slider }
29 | 


--------------------------------------------------------------------------------
/src/components/ui/tabs.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as TabsPrimitive from "@radix-ui/react-tabs"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const Tabs = TabsPrimitive.Root
 9 | 
10 | const TabsList = React.forwardRef<
11 |   React.ElementRef<typeof TabsPrimitive.List>,
12 |   React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
13 | >(({ className, ...props }, ref) => (
14 |   <TabsPrimitive.List
15 |     ref={ref}
16 |     className={cn(
17 |       "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
18 |       className
19 |     )}
20 |     {...props}
21 |   />
22 | ))
23 | TabsList.displayName = TabsPrimitive.List.displayName
24 | 
25 | const TabsTrigger = React.forwardRef<
26 |   React.ElementRef<typeof TabsPrimitive.Trigger>,
27 |   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
28 | >(({ className, ...props }, ref) => (
29 |   <TabsPrimitive.Trigger
30 |     ref={ref}
31 |     className={cn(
32 |       "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
33 |       className
34 |     )}
35 |     {...props}
36 |   />
37 | ))
38 | TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
39 | 
40 | const TabsContent = React.forwardRef<
41 |   React.ElementRef<typeof TabsPrimitive.Content>,
42 |   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
43 | >(({ className, ...props }, ref) => (
44 |   <TabsPrimitive.Content
45 |     ref={ref}
46 |     className={cn(
47 |       "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
48 |       className
49 |     )}
50 |     {...props}
51 |   />
52 | ))
53 | TabsContent.displayName = TabsPrimitive.Content.displayName
54 | 
55 | export { Tabs, TabsList, TabsTrigger, TabsContent }
56 | 


--------------------------------------------------------------------------------
/src/components/ui/toast.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import { Cross2Icon } from "@radix-ui/react-icons"
  5 | import * as ToastPrimitives from "@radix-ui/react-toast"
  6 | import { cva, type VariantProps } from "class-variance-authority"
  7 | 
  8 | import { cn } from "@/lib/utils"
  9 | 
 10 | const ToastProvider = ToastPrimitives.Provider
 11 | 
 12 | const ToastViewport = React.forwardRef<
 13 |   React.ElementRef<typeof ToastPrimitives.Viewport>,
 14 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
 15 | >(({ className, ...props }, ref) => (
 16 |   <ToastPrimitives.Viewport
 17 |     ref={ref}
 18 |     className={cn(
 19 |       "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
 20 |       className
 21 |     )}
 22 |     {...props}
 23 |   />
 24 | ))
 25 | ToastViewport.displayName = ToastPrimitives.Viewport.displayName
 26 | 
 27 | const toastVariants = cva(
 28 |   "group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
 29 |   {
 30 |     variants: {
 31 |       variant: {
 32 |         default: "border bg-background text-foreground",
 33 |         destructive:
 34 |           "destructive group border-destructive bg-destructive text-destructive-foreground",
 35 |       },
 36 |     },
 37 |     defaultVariants: {
 38 |       variant: "default",
 39 |     },
 40 |   }
 41 | )
 42 | 
 43 | const Toast = React.forwardRef<
 44 |   React.ElementRef<typeof ToastPrimitives.Root>,
 45 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
 46 |     VariantProps<typeof toastVariants>
 47 | >(({ className, variant, ...props }, ref) => {
 48 |   return (
 49 |     <ToastPrimitives.Root
 50 |       ref={ref}
 51 |       className={cn(toastVariants({ variant }), className)}
 52 |       {...props}
 53 |     />
 54 |   )
 55 | })
 56 | Toast.displayName = ToastPrimitives.Root.displayName
 57 | 
 58 | const ToastAction = React.forwardRef<
 59 |   React.ElementRef<typeof ToastPrimitives.Action>,
 60 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
 61 | >(({ className, ...props }, ref) => (
 62 |   <ToastPrimitives.Action
 63 |     ref={ref}
 64 |     className={cn(
 65 |       "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
 66 |       className
 67 |     )}
 68 |     {...props}
 69 |   />
 70 | ))
 71 | ToastAction.displayName = ToastPrimitives.Action.displayName
 72 | 
 73 | const ToastClose = React.forwardRef<
 74 |   React.ElementRef<typeof ToastPrimitives.Close>,
 75 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
 76 | >(({ className, ...props }, ref) => (
 77 |   <ToastPrimitives.Close
 78 |     ref={ref}
 79 |     className={cn(
 80 |       "absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
 81 |       className
 82 |     )}
 83 |     toast-close=""
 84 |     {...props}
 85 |   >
 86 |     <Cross2Icon className="h-4 w-4" />
 87 |   </ToastPrimitives.Close>
 88 | ))
 89 | ToastClose.displayName = ToastPrimitives.Close.displayName
 90 | 
 91 | const ToastTitle = React.forwardRef<
 92 |   React.ElementRef<typeof ToastPrimitives.Title>,
 93 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
 94 | >(({ className, ...props }, ref) => (
 95 |   <ToastPrimitives.Title
 96 |     ref={ref}
 97 |     className={cn("text-sm font-semibold [&+div]:text-xs", className)}
 98 |     {...props}
 99 |   />
100 | ))
101 | ToastTitle.displayName = ToastPrimitives.Title.displayName
102 | 
103 | const ToastDescription = React.forwardRef<
104 |   React.ElementRef<typeof ToastPrimitives.Description>,
105 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
106 | >(({ className, ...props }, ref) => (
107 |   <ToastPrimitives.Description
108 |     ref={ref}
109 |     className={cn("text-sm opacity-90", className)}
110 |     {...props}
111 |   />
112 | ))
113 | ToastDescription.displayName = ToastPrimitives.Description.displayName
114 | 
115 | type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
116 | 
117 | type ToastActionElement = React.ReactElement<typeof ToastAction>
118 | 
119 | export {
120 |   type ToastProps,
121 |   type ToastActionElement,
122 |   ToastProvider,
123 |   ToastViewport,
124 |   Toast,
125 |   ToastTitle,
126 |   ToastDescription,
127 |   ToastClose,
128 |   ToastAction,
129 | }
130 | 


--------------------------------------------------------------------------------
/src/components/ui/toaster.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import {
 4 |   Toast,
 5 |   ToastClose,
 6 |   ToastDescription,
 7 |   ToastProvider,
 8 |   ToastTitle,
 9 |   ToastViewport,
10 | } from "@/components/ui/toast"
11 | import { useToast } from "@/components/ui/use-toast"
12 | 
13 | export function Toaster() {
14 |   const { toasts } = useToast()
15 | 
16 |   return (
17 |     <ToastProvider>
18 |       {toasts.map(function ({ id, title, description, action, ...props }) {
19 |         return (
20 |           <Toast key={id} {...props}>
21 |             <div className="grid gap-1">
22 |               {title && <ToastTitle>{title}</ToastTitle>}
23 |               {description && (
24 |                 <ToastDescription>{description}</ToastDescription>
25 |               )}
26 |             </div>
27 |             {action}
28 |             <ToastClose />
29 |           </Toast>
30 |         )
31 |       })}
32 |       <ToastViewport />
33 |     </ToastProvider>
34 |   )
35 | }
36 | 


--------------------------------------------------------------------------------
/src/components/ui/use-toast.ts:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | // Inspired by react-hot-toast library
  4 | import * as React from "react"
  5 | 
  6 | import type {
  7 |   ToastActionElement,
  8 |   ToastProps,
  9 | } from "@/components/ui/toast"
 10 | 
 11 | const TOAST_LIMIT = 1
 12 | const TOAST_REMOVE_DELAY = 1000000
 13 | 
 14 | type ToasterToast = ToastProps & {
 15 |   id: string
 16 |   title?: React.ReactNode
 17 |   description?: React.ReactNode
 18 |   action?: ToastActionElement
 19 | }
 20 | 
 21 | const actionTypes = {
 22 |   ADD_TOAST: "ADD_TOAST",
 23 |   UPDATE_TOAST: "UPDATE_TOAST",
 24 |   DISMISS_TOAST: "DISMISS_TOAST",
 25 |   REMOVE_TOAST: "REMOVE_TOAST",
 26 | } as const
 27 | 
 28 | let count = 0
 29 | 
 30 | function genId() {
 31 |   count = (count + 1) % Number.MAX_SAFE_INTEGER
 32 |   return count.toString()
 33 | }
 34 | 
 35 | type ActionType = typeof actionTypes
 36 | 
 37 | type Action =
 38 |   | {
 39 |       type: ActionType["ADD_TOAST"]
 40 |       toast: ToasterToast
 41 |     }
 42 |   | {
 43 |       type: ActionType["UPDATE_TOAST"]
 44 |       toast: Partial<ToasterToast>
 45 |     }
 46 |   | {
 47 |       type: ActionType["DISMISS_TOAST"]
 48 |       toastId?: ToasterToast["id"]
 49 |     }
 50 |   | {
 51 |       type: ActionType["REMOVE_TOAST"]
 52 |       toastId?: ToasterToast["id"]
 53 |     }
 54 | 
 55 | interface State {
 56 |   toasts: ToasterToast[]
 57 | }
 58 | 
 59 | const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
 60 | 
 61 | const addToRemoveQueue = (toastId: string) => {
 62 |   if (toastTimeouts.has(toastId)) {
 63 |     return
 64 |   }
 65 | 
 66 |   const timeout = setTimeout(() => {
 67 |     toastTimeouts.delete(toastId)
 68 |     dispatch({
 69 |       type: "REMOVE_TOAST",
 70 |       toastId: toastId,
 71 |     })
 72 |   }, TOAST_REMOVE_DELAY)
 73 | 
 74 |   toastTimeouts.set(toastId, timeout)
 75 | }
 76 | 
 77 | export const reducer = (state: State, action: Action): State => {
 78 |   switch (action.type) {
 79 |     case "ADD_TOAST":
 80 |       return {
 81 |         ...state,
 82 |         toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
 83 |       }
 84 | 
 85 |     case "UPDATE_TOAST":
 86 |       return {
 87 |         ...state,
 88 |         toasts: state.toasts.map((t) =>
 89 |           t.id === action.toast.id ? { ...t, ...action.toast } : t
 90 |         ),
 91 |       }
 92 | 
 93 |     case "DISMISS_TOAST": {
 94 |       const { toastId } = action
 95 | 
 96 |       // ! Side effects ! - This could be extracted into a dismissToast() action,
 97 |       // but I'll keep it here for simplicity
 98 |       if (toastId) {
 99 |         addToRemoveQueue(toastId)
100 |       } else {
101 |         state.toasts.forEach((toast) => {
102 |           addToRemoveQueue(toast.id)
103 |         })
104 |       }
105 | 
106 |       return {
107 |         ...state,
108 |         toasts: state.toasts.map((t) =>
109 |           t.id === toastId || toastId === undefined
110 |             ? {
111 |                 ...t,
112 |                 open: false,
113 |               }
114 |             : t
115 |         ),
116 |       }
117 |     }
118 |     case "REMOVE_TOAST":
119 |       if (action.toastId === undefined) {
120 |         return {
121 |           ...state,
122 |           toasts: [],
123 |         }
124 |       }
125 |       return {
126 |         ...state,
127 |         toasts: state.toasts.filter((t) => t.id !== action.toastId),
128 |       }
129 |   }
130 | }
131 | 
132 | const listeners: Array<(state: State) => void> = []
133 | 
134 | let memoryState: State = { toasts: [] }
135 | 
136 | function dispatch(action: Action) {
137 |   memoryState = reducer(memoryState, action)
138 |   listeners.forEach((listener) => {
139 |     listener(memoryState)
140 |   })
141 | }
142 | 
143 | type Toast = Omit<ToasterToast, "id">
144 | 
145 | function toast({ ...props }: Toast) {
146 |   const id = genId()
147 | 
148 |   const update = (props: ToasterToast) =>
149 |     dispatch({
150 |       type: "UPDATE_TOAST",
151 |       toast: { ...props, id },
152 |     })
153 |   const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
154 | 
155 |   dispatch({
156 |     type: "ADD_TOAST",
157 |     toast: {
158 |       ...props,
159 |       id,
160 |       open: true,
161 |       onOpenChange: (open) => {
162 |         if (!open) dismiss()
163 |       },
164 |     },
165 |   })
166 | 
167 |   return {
168 |     id: id,
169 |     dismiss,
170 |     update,
171 |   }
172 | }
173 | 
174 | function useToast() {
175 |   const [state, setState] = React.useState<State>(memoryState)
176 | 
177 |   React.useEffect(() => {
178 |     listeners.push(setState)
179 |     return () => {
180 |       const index = listeners.indexOf(setState)
181 |       if (index > -1) {
182 |         listeners.splice(index, 1)
183 |       }
184 |     }
185 |   }, [state])
186 | 
187 |   return {
188 |     ...state,
189 |     toast,
190 |     dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
191 |   }
192 | }
193 | 
194 | export { useToast, toast }
195 | 


--------------------------------------------------------------------------------
/src/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { type ClassValue, clsx } from "clsx"
2 | import { twMerge } from "tailwind-merge"
3 | 
4 | export function cn(...inputs: ClassValue[]) {
5 |   return twMerge(clsx(inputs))
6 | }
7 | 


--------------------------------------------------------------------------------
/src/utils/constants.ts:
--------------------------------------------------------------------------------
  1 | import { BarChart, BookOpen, Briefcase, Code, Layout, Rocket, Shield, Users, Zap } from "lucide-react";
  2 | 
  3 | export const featureCards = [
  4 | 	{
  5 | 		title: "Interactive Learning",
  6 | 		description: "Hands-on challenges for practical skill development",
  7 | 		icon: Layout,
  8 | 		color: "teal",
  9 | 	},
 10 | 	{
 11 | 		title: "Real-World Use Cases",
 12 | 		description: "Industry-relevant scenarios and case studies",
 13 | 		icon: Briefcase,
 14 | 		color: "teal",
 15 | 	},
 16 | 	{
 17 | 		title: "Upstash Integration",
 18 | 		description: "Learn with cutting-edge serverless Redis technology",
 19 | 		img: "/upstash-logo.png",
 20 | 		color: "teal",
 21 | 	},
 22 | ];
 23 | 
 24 | export const challenges = [
 25 | 	{
 26 | 		id: 1,
 27 | 		title: "Redis Basics",
 28 | 		description: "Master the fundamentals",
 29 | 		icon: BookOpen,
 30 | 		color: "from-emerald-500 to-teal-500",
 31 | 		href: "/redis-basics",
 32 | 	},
 33 | 	{
 34 | 		id: 2,
 35 | 		title: "Data Structures",
 36 | 		description: "Lists, sets, and beyond",
 37 | 		icon: Code,
 38 | 		color: "from-emerald-500 to-teal-500",
 39 | 		href: "/redis-data-structures",
 40 | 	},
 41 | 	{
 42 | 		id: 3,
 43 | 		title: "Practice Upstash",
 44 | 		description: "Real-world challenges",
 45 | 		icon: Rocket,
 46 | 		color: "from-emerald-500 to-teal-500",
 47 | 		href: "/learn-upstash",
 48 | 	},
 49 | ];
 50 | 
 51 | export const benefits = [
 52 | 	{
 53 | 		title: "Rapid Skill Acquisition",
 54 | 		description: "Master Redis concepts faster with our hands-on approach",
 55 | 		icon: Zap,
 56 | 	},
 57 | 	{ title: "Industry-Relevant Skills", description: "Learn techniques used by top tech companies", icon: Users },
 58 | 	{ title: "Real-Time Feedback", description: "Get instant feedback on your code and progress", icon: Code },
 59 | 	{ title: "Performance Tracking", description: "Monitor your growth with detailed analytics", icon: BarChart },
 60 | ];
 61 | 
 62 | export const testimonials = [
 63 | 	{
 64 | 		name: "Alex Johnson",
 65 | 		role: "Senior Developer at TechCorp",
 66 | 		quote: "Redis Rush transformed my team's understanding of Redis. It's now an integral part of our tech stack.",
 67 | 	},
 68 | 	{
 69 | 		name: "Samantha Lee",
 70 | 		role: "CTO at StartupX",
 71 | 		quote: "The real-world scenarios in Redis Rush's challenges prepared us for scaling our infrastructure effortlessly.",
 72 | 	},
 73 | 	{
 74 | 		name: "Raj Chen",
 75 | 		role: "Software Engineer",
 76 | 		quote: "Redis Rush's hands-on challenges fast-tracked my Redis skills, making me more confident in building high-performance apps.",
 77 | 	},
 78 | ];
 79 | 
 80 | export interface Section {
 81 | 	slug: string;
 82 | 	title: string;
 83 | 	content: {
 84 | 		overview: string;
 85 | 		keyCommands: {
 86 | 			name: string;
 87 | 			description: string;
 88 | 			example: string;
 89 | 		}[];
 90 | 		useCase: string;
 91 | 	};
 92 | 	challenges: Challenge[];
 93 | }
 94 | 
 95 | export interface Challenge {
 96 | 	id: number;
 97 | 	prompt: string;
 98 | 	answer: string;
 99 | 	type: "command" | "multiple_choice" | "true_false";
100 | }
101 | 
102 | export const redisBasicsContent: Section = {
103 | 	slug: "basics",
104 | 	title: "Redis Basics",
105 | 	content: {
106 | 		overview: `
107 | Redis is a key-value store, and its fundamental operations revolve around setting and retrieving values. These basic operations form the foundation for more complex data manipulations and are essential for understanding how Redis works.
108 |       `,
109 | 		keyCommands: [
110 | 			{
111 | 				name: "SET key value",
112 | 				description: "Sets the value for a key",
113 | 				example: 'SET mykey "Hello Redis"',
114 | 			},
115 | 			{
116 | 				name: "GET key",
117 | 				description: "Retrieves the value of a key",
118 | 				example: "GET mykey",
119 | 			},
120 | 			{
121 | 				name: "EXISTS key",
122 | 				description: "Checks if a key exists",
123 | 				example: "EXISTS mykey",
124 | 			},
125 | 			{
126 | 				name: "DEL key",
127 | 				description: "Deletes a key",
128 | 				example: "DEL mykey",
129 | 			},
130 | 			{
131 | 				name: "MSET key1 value1 [key2 value2 ...]",
132 | 				description: "Sets multiple key-value pairs",
133 | 				example: 'MSET key1 "value1" key2 "value2"',
134 | 			},
135 | 			{
136 | 				name: "MGET key1 [key2 ...]",
137 | 				description: "Gets the values of multiple keys",
138 | 				example: "MGET key1 key2",
139 | 			},
140 | 			{
141 | 				name: "INCR key",
142 | 				description: "Increments the integer value of a key",
143 | 				example: "INCR counter",
144 | 			},
145 | 			{
146 | 				name: "DECR key",
147 | 				description: "Decrements the integer value of a key",
148 | 				example: "DECR counter",
149 | 			},
150 | 			{
151 | 				name: "EXPIRE key seconds",
152 | 				description: "Sets a key's time to live in seconds",
153 | 				example: "EXPIRE mykey 60",
154 | 			},
155 | 			{
156 | 				name: "TTL key",
157 | 				description: "Returns the remaining time to live of a key",
158 | 				example: "TTL mykey",
159 | 			},
160 | 		],
161 | 		useCase: `
162 | In a real-world scenario, these basic operations can be used to build a simple caching system:
163 | 
164 | 1. Use SET to store frequently accessed data in Redis.
165 | 2. Use GET to retrieve this data quickly without hitting the main database.
166 | 3. Use EXPIRE to ensure the cache stays fresh by automatically removing old entries.
167 | 4. Use INCR/DECR for maintaining counters, like tracking page views or API calls.
168 | 5. Use MSET and MGET for bulk operations, improving efficiency when dealing with multiple related pieces of data.
169 | 
170 | This caching system can significantly reduce load on your primary database and improve application response times.
171 |       `,
172 | 	},
173 | 	challenges: [
174 | 		{
175 | 			id: 0,
176 | 			prompt: "Set a key 'mykey' with the value 'Hello Redis'",
177 | 			answer: "SET mykey 'Hello Redis'",
178 | 			type: "command",
179 | 		},
180 | 		{
181 | 			id: 1,
182 | 			prompt: "Retrieve the value of 'mykey'",
183 | 			answer: "GET mykey",
184 | 			type: "command",
185 | 		},
186 | 		{
187 | 			id: 2,
188 | 			prompt: "Check if 'mykey' exists",
189 | 			answer: "EXISTS mykey",
190 | 			type: "command",
191 | 		},
192 | 		{
193 | 			id: 3,
194 | 			prompt: "Delete 'mykey'",
195 | 			answer: "DEL mykey",
196 | 			type: "command",
197 | 		},
198 | 		{
199 | 			id: 4,
200 | 			prompt: "Set keys 'fruit1' to 'apple' and 'fruit2' to 'banana' in one command",
201 | 			answer: "MSET fruit1 apple fruit2 banana",
202 | 			type: "command",
203 | 		},
204 | 		{
205 | 			id: 5,
206 | 			prompt: "Retrieve the values of both 'fruit1' and 'fruit2' in one command",
207 | 			answer: "MGET fruit1 fruit2",
208 | 			type: "command",
209 | 		},
210 | 		{
211 | 			id: 6,
212 | 			prompt: "Increment the value of 'counter' by 1",
213 | 			answer: "INCR counter",
214 | 			type: "command",
215 | 		},
216 | 		{
217 | 			id: 7,
218 | 			prompt: "Decrement the value of 'counter' by 1",
219 | 			answer: "DECR counter",
220 | 			type: "command",
221 | 		},
222 | 		{
223 | 			id: 8,
224 | 			prompt: "Set 'tempkey' to expire in 60 seconds",
225 | 			answer: "EXPIRE tempkey 60",
226 | 			type: "command",
227 | 		},
228 | 		{
229 | 			id: 9,
230 | 			prompt: "Check how many seconds are left until 'tempkey' expires",
231 | 			answer: "TTL tempkey",
232 | 			type: "command",
233 | 		},
234 | 	],
235 | };
236 | 
237 | export const dataStructuresContent: Section[] = [
238 | 	{
239 | 		slug: "lists",
240 | 		title: "Lists in Redis",
241 | 		content: {
242 | 			overview: `
243 | Redis Lists are linked lists of string values. They're ideal for:
244 | • Implementing stacks and queues
245 | • Managing shared to-do lists
246 | • Tracking latest items (like recent posts)
247 | • Creating a timeline of events
248 |       `,
249 | 			keyCommands: [
250 | 				{
251 | 					name: "LPUSH key element [element ...]",
252 | 					description: "Add one or more elements to the left (head) of the list",
253 | 					example: "LPUSH mylist world hello",
254 | 				},
255 | 				{
256 | 					name: "RPUSH key element [element ...]",
257 | 					description: "Add one or more elements to the right (tail) of the list",
258 | 					example: "RPUSH mylist good morning",
259 | 				},
260 | 				{
261 | 					name: "LRANGE key start stop",
262 | 					description: "Retrieve a range of elements from the list",
263 | 					example: "LRANGE mylist 0 -1",
264 | 				},
265 | 				{
266 | 					name: "LPOP key",
267 | 					description: "Remove and return the first element of the list",
268 | 					example: "LPOP mylist",
269 | 				},
270 | 				{
271 | 					name: "RPOP key",
272 | 					description: "Remove and return the last element of the list",
273 | 					example: "RPOP mylist",
274 | 				},
275 | 				{
276 | 					name: "LLEN key",
277 | 					description: "Get the length of the list",
278 | 					example: "LLEN mylist",
279 | 				},
280 | 				{
281 | 					name: "LINDEX key index",
282 | 					description: "Get an element from a list by its index",
283 | 					example: "LINDEX mylist 1",
284 | 				},
285 | 				{
286 | 					name: "LINSERT key BEFORE|AFTER pivot element",
287 | 					description: "Insert an element before or after another element in the list",
288 | 					example: "LINSERT mylist BEFORE world there",
289 | 				},
290 | 			],
291 | 			useCase: `
292 | Imagine you're building a social media application. You can use Redis Lists to maintain a user's timeline:
293 | 
294 | 1. When a user posts a new status, use LPUSH to add it to their timeline list.
295 | 2. To display the most recent posts, use LRANGE to retrieve a certain number of posts.
296 | 3. If you want to limit the timeline to the last 1000 posts, you can use LTRIM after each LPUSH to keep only the most recent 1000 items.
297 | 
298 | This approach ensures fast insertion of new posts and quick retrieval of the most recent content, which is crucial for a responsive social media platform.
299 |       `,
300 | 		},
301 | 		challenges: [
302 | 			{
303 | 				id: 1,
304 | 				prompt: "Create a list 'fruits' and add 'apple' and 'banana' to it",
305 | 				answer: "LPUSH fruits apple banana",
306 | 				type: "command",
307 | 			},
308 | 			{
309 | 				id: 2,
310 | 				prompt: "Retrieve all elements from the 'fruits' list",
311 | 				answer: "LRANGE fruits 0 -1",
312 | 				type: "command",
313 | 			},
314 | 			{
315 | 				id: 3,
316 | 				prompt: "Add 'orange' to the right side of the 'fruits' list",
317 | 				answer: "RPUSH fruits orange",
318 | 				type: "command",
319 | 			},
320 | 			{
321 | 				id: 4,
322 | 				prompt: "Remove and return the leftmost element from 'fruits'",
323 | 				answer: "LPOP fruits",
324 | 				type: "command",
325 | 			},
326 | 			{
327 | 				id: 5,
328 | 				prompt: "Get the current length of the 'fruits' list",
329 | 				answer: "LLEN fruits",
330 | 				type: "command",
331 | 			},
332 | 			{
333 | 				id: 6,
334 | 				prompt: "Insert 'grape' before 'orange' in the 'fruits' list",
335 | 				answer: "LINSERT fruits BEFORE orange grape",
336 | 				type: "command",
337 | 			},
338 | 		],
339 | 	},
340 | 	{
341 | 		slug: "sets",
342 | 		title: "Sets in Redis",
343 | 		content: {
344 | 			overview: `
345 | Redis Sets are unordered collections of unique strings. They're great for:
346 | • Tracking unique items (e.g., unique visitors)
347 | • Implementing tag systems
348 | • Performing set operations (unions, intersections)
349 | • Managing relationships in social networks
350 |       `,
351 | 			keyCommands: [
352 | 				{
353 | 					name: "SADD key member [member ...]",
354 | 					description: "Add one or more members to a set",
355 | 					example: "SADD myset Hello World",
356 | 				},
357 | 				{
358 | 					name: "SMEMBERS key",
359 | 					description: "Get all members of a set",
360 | 					example: "SMEMBERS myset",
361 | 				},
362 | 				{
363 | 					name: "SISMEMBER key member",
364 | 					description: "Check if a value is in the set",
365 | 					example: "SISMEMBER myset Hello",
366 | 				},
367 | 				{
368 | 					name: "SREM key member [member ...]",
369 | 					description: "Remove one or more members from a set",
370 | 					example: "SREM myset World",
371 | 				},
372 | 				{
373 | 					name: "SCARD key",
374 | 					description: "Get the number of members in a set",
375 | 					example: "SCARD myset",
376 | 				},
377 | 				{
378 | 					name: "SINTER key [key ...]",
379 | 					description: "Perform set intersection",
380 | 					example: "SINTER set1 set2",
381 | 				},
382 | 				{
383 | 					name: "SUNION key [key ...]",
384 | 					description: "Perform set union",
385 | 					example: "SUNION set1 set2",
386 | 				},
387 | 				{
388 | 					name: "SDIFF key [key ...]",
389 | 					description: "Perform set difference",
390 | 					example: "SDIFF set1 set2",
391 | 				},
392 | 			],
393 | 			useCase: `
394 | Consider a music streaming service where you want to recommend new artists to users based on their listening history:
395 | 
396 | 1. For each user, maintain a set of artist IDs they've listened to.
397 | 2. When a user listens to a new artist, add the artist ID to their set using SADD.
398 | 3. To find common artists between two users, use SINTER.
399 | 4. To recommend new artists, you could use SDIFF between a user's set and a set of popular artists they haven't listened to yet.
400 | 
401 | This approach allows for quick comparisons between user preferences and efficient generation of recommendations, which is crucial for a personalized user experience in a music streaming platform.
402 |       `,
403 | 		},
404 | 		challenges: [
405 | 			{
406 | 				id: 1,
407 | 				prompt: "Create a set 'colors' with 'red', 'blue', and 'green'",
408 | 				answer: "SADD colors red blue green",
409 | 				type: "command",
410 | 			},
411 | 			{
412 | 				id: 2,
413 | 				prompt: "Check if 'yellow' is in the 'colors' set",
414 | 				answer: "SISMEMBER colors yellow",
415 | 				type: "command",
416 | 			},
417 | 			{
418 | 				id: 3,
419 | 				prompt: "Add 'blue' to 'colors' again (notice it won't add a duplicate)",
420 | 				answer: "SADD colors blue",
421 | 				type: "command",
422 | 			},
423 | 			{
424 | 				id: 4,
425 | 				prompt: "Remove 'green' from the 'colors' set",
426 | 				answer: "SREM colors green",
427 | 				type: "command",
428 | 			},
429 | 			{
430 | 				id: 5,
431 | 				prompt: "Get the number of colors in the 'colors' set",
432 | 				answer: "SCARD colors",
433 | 				type: "command",
434 | 			},
435 | 			{
436 | 				id: 6,
437 | 				prompt: "Create a new set 'primary_colors' with 'red', 'blue', and 'yellow', then find the intersection with 'colors'",
438 | 				answer: "SADD primary_colors red blue yellow\nSINTER colors primary_colors",
439 | 				type: "command",
440 | 			},
441 | 		],
442 | 	},
443 | 	{
444 | 		slug: "hashes",
445 | 		title: "Hashes in Redis",
446 | 		content: {
447 | 			overview: `
448 | Redis Hashes are maps between string fields and string values. They're perfect for:
449 | • Representing objects
450 | • Storing user profiles or configurations
451 | • Tracking multiple related pieces of data
452 | • Caching database rows or API responses
453 |       `,
454 | 			keyCommands: [
455 | 				{
456 | 					name: "HSET key field value [field value ...]",
457 | 					description: "Set field(s) in a hash",
458 | 					example: 'HSET user:1 name "John Doe" email john@example.com',
459 | 				},
460 | 				{
461 | 					name: "HGET key field",
462 | 					description: "Get the value of a field",
463 | 					example: "HGET user:1 name",
464 | 				},
465 | 				{
466 | 					name: "HGETALL key",
467 | 					description: "Get all fields and values in the hash",
468 | 					example: "HGETALL user:1",
469 | 				},
470 | 				{
471 | 					name: "HDEL key field [field ...]",
472 | 					description: "Delete field(s) from the hash",
473 | 					example: "HDEL user:1 email",
474 | 				},
475 | 				{
476 | 					name: "HEXISTS key field",
477 | 					description: "Check if a field exists in the hash",
478 | 					example: "HEXISTS user:1 name",
479 | 				},
480 | 				{
481 | 					name: "HKEYS key",
482 | 					description: "Get all field names in the hash",
483 | 					example: "HKEYS user:1",
484 | 				},
485 | 				{
486 | 					name: "HVALS key",
487 | 					description: "Get all values in the hash",
488 | 					example: "HVALS user:1",
489 | 				},
490 | 				{
491 | 					name: "HINCRBY key field increment",
492 | 					description: "Increment the integer value of a field by a number",
493 | 					example: "HINCRBY user:1 age 1",
494 | 				},
495 | 			],
496 | 			useCase: `
497 | Imagine you're building an e-commerce platform and need to store product information:
498 | 
499 | 1. Each product can be represented as a hash, with the key being "product:{id}".
500 | 2. Use HSET to store various attributes of the product (name, price, stock, etc.).
501 | 3. Use HGET to quickly retrieve specific attributes without loading the entire product data.
502 | 4. Use HGETALL to get all product details when needed.
503 | 5. Use HINCRBY to manage stock levels or track the number of views/purchases.
504 | 
505 | This structure allows for efficient storage and retrieval of product data, easy updates to individual fields, and atomic operations on numeric values, which is crucial for maintaining accurate inventory in a high-traffic e-commerce system.
506 |       `,
507 | 		},
508 | 		challenges: [
509 | 			{
510 | 				id: 1,
511 | 				prompt: "Create a hash 'user:1' with fields 'name' (John Doe) and 'email' (john@example.com)",
512 | 				answer: 'HSET user:1 name "John Doe" email john@example.com',
513 | 				type: "command",
514 | 			},
515 | 			{
516 | 				id: 2,
517 | 				prompt: "Get the 'name' of 'user:1'",
518 | 				answer: "HGET user:1 name",
519 | 				type: "command",
520 | 			},
521 | 			{
522 | 				id: 3,
523 | 				prompt: "Add an 'age' field with value '30' to 'user:1'",
524 | 				answer: "HSET user:1 age 30",
525 | 				type: "command",
526 | 			},
527 | 			{
528 | 				id: 4,
529 | 				prompt: "Retrieve all fields and values of 'user:1'",
530 | 				answer: "HGETALL user:1",
531 | 				type: "command",
532 | 			},
533 | 			{
534 | 				id: 5,
535 | 				prompt: "Check if 'user:1' has a 'phone' field",
536 | 				answer: "HEXISTS user:1 phone",
537 | 				type: "command",
538 | 			},
539 | 			{
540 | 				id: 6,
541 | 				prompt: "Increment the 'age' of 'user:1' by 1",
542 | 				answer: "HINCRBY user:1 age 1",
543 | 				type: "command",
544 | 			},
545 | 		],
546 | 	},
547 | 	{
548 | 		slug: "sorted-sets",
549 | 		title: "Sorted Sets in Redis",
550 | 		content: {
551 | 			overview: `
552 | Redis Sorted Sets are sets where each member has an associated score. They're useful for:
553 | 1. Leaderboards and ranking systems
554 | 2. Priority queues
555 | 3. Time-series data
556 | 4. Managing queues with priority
557 |       `,
558 | 			keyCommands: [
559 | 				{
560 | 					name: "ZADD key score member [score member ...]",
561 | 					description: "Add member(s) with scores to a sorted set",
562 | 					example: "ZADD leaderboard 100 Alice 95 Bob 97 Charlie",
563 | 				},
564 | 				{
565 | 					name: "ZRANGE key start stop [WITHSCORES]",
566 | 					description: "Retrieve members by index range (low to high score)",
567 | 					example: "ZRANGE leaderboard 0 -1 WITHSCORES",
568 | 				},
569 | 				{
570 | 					name: "ZREVRANGE key start stop [WITHSCORES]",
571 | 					description: "Retrieve members by index range (high to low score)",
572 | 					example: "ZREVRANGE leaderboard 0 -1 WITHSCORES",
573 | 				},
574 | 				{
575 | 					name: "ZRANK key member",
576 | 					description: "Get the rank of a member (by low to high score)",
577 | 					example: "ZRANK leaderboard Bob",
578 | 				},
579 | 				{
580 | 					name: "ZREVRANK key member",
581 | 					description: "Get the rank of a member (by high to low score)",
582 | 					example: "ZREVRANK leaderboard Bob",
583 | 				},
584 | 				{
585 | 					name: "ZSCORE key member",
586 | 					description: "Get the score of a member",
587 | 					example: "ZSCORE leaderboard Alice",
588 | 				},
589 | 				{
590 | 					name: "ZREM key member [member ...]",
591 | 					description: "Remove member(s) from the sorted set",
592 | 					example: "ZREM leaderboard Bob",
593 | 				},
594 | 				{
595 | 					name: "ZINCRBY key increment member",
596 | 					description: "Increment the score of a member",
597 | 					example: "ZINCRBY leaderboard 5 Alice",
598 | 				},
599 | 			],
600 | 			useCase: `
601 | Consider a real-time analytics system for a popular website:
602 | 
603 | 1. Use a sorted set for each metric you want to track (e.g., page views, unique visitors).
604 | 2. The score can be the timestamp, and the member can be the page URL or user ID.
605 | 3. Use ZADD to add new data points as they come in.
606 | 4. Use ZRANGE with WITHSCORES to get data for a specific time range.
607 | 5. Use ZCOUNT to get the number of events in a time range.
608 | 6. Use ZREMRANGEBYSCORE to remove old data and maintain a rolling window of recent data.
609 | 
610 | This structure allows for efficient storage and retrieval of time-series data, easy querying of recent events, and automatic ordering by timestamp, which is crucial for real-time analytics and reporting.
611 |       `,
612 | 		},
613 | 		challenges: [
614 | 			{
615 | 				id: 1,
616 | 				prompt: "Create a sorted set 'leaderboard' with members: Alice (score: 100), Bob (score: 85), Charlie (score: 95)",
617 | 				answer: "ZADD leaderboard 100 Alice 85 Bob 95 Charlie",
618 | 				type: "command",
619 | 			},
620 | 			{
621 | 				id: 2,
622 | 				prompt: "Get the top 2 players from the 'leaderboard'",
623 | 				answer: "ZREVRANGE leaderboard 0 1",
624 | 				type: "command",
625 | 			},
626 | 			{
627 | 				id: 3,
628 | 				prompt: "Get Bob's rank in the 'leaderboard' (0-based, high to low score)",
629 | 				answer: "ZREVRANK leaderboard Bob",
630 | 				type: "command",
631 | 			},
632 | 			{
633 | 				id: 4,
634 | 				prompt: "Get Charlie's score",
635 | 				answer: "ZSCORE leaderboard Charlie",
636 | 				type: "command",
637 | 			},
638 | 			{
639 | 				id: 5,
640 | 				prompt: "Increase Alice's score by 15 points",
641 | 				answer: "ZINCRBY leaderboard 15 Alice",
642 | 				type: "command",
643 | 			},
644 | 			{
645 | 				id: 6,
646 | 				prompt: "Get all scores and members, ordered from lowest to highest score",
647 | 				answer: "ZRANGE leaderboard 0 -1 WITHSCORES",
648 | 				type: "command",
649 | 			},
650 | 		],
651 | 	},
652 | ];
653 | 


--------------------------------------------------------------------------------
/src/utils/problems.ts:
--------------------------------------------------------------------------------
  1 | export interface TestCase {
  2 | 	name: string;
  3 | 	run: (functions: any) => Promise<boolean>;
  4 | }
  5 | 
  6 | export interface Problem {
  7 | 	slug: string;
  8 | 	title: string;
  9 | 	description: string;
 10 | 	initialCode: string;
 11 | 	solutionCode: string;
 12 | 	hints: string[];
 13 | 	exampleUsage: string;
 14 | 	difficulty: string;
 15 | 	testCases: TestCase[];
 16 | }
 17 | 
 18 | export const problems: Problem[] = [
 19 | 	{
 20 | 		slug: "basic-caching",
 21 | 		title: "Basic Caching",
 22 | 		description:
 23 | 			"Implement a caching system using Upstash Redis with two functions: `setCacheValue(key, value)` to store a key-value pair, and `getCacheValue(key)` to retrieve a value for a given key.",
 24 | 		initialCode: `import { Redis } from '@upstash/redis'
 25 | 
 26 | const client = new Redis({
 27 |   url: process.env.UPSTASH_REDIS_URL,
 28 |   token: process.env.UPSTASH_REDIS_TOKEN
 29 | })
 30 | 
 31 | /* DO NOT MODIFY THE CODE ABOVE */
 32 | 
 33 | async function setCacheValue(key, value) {
 34 |   // Implement setCacheValue function
 35 | }
 36 | 
 37 | async function getCacheValue(key) {
 38 |   // Implement getCacheValue function
 39 | }`,
 40 | 		solutionCode: `import { Redis } from '@upstash/redis'
 41 | 
 42 | const client = new Redis({
 43 |   url: process.env.UPSTASH_REDIS_URL,
 44 |   token: process.env.UPSTASH_REDIS_TOKEN
 45 | })
 46 | 
 47 | /* DO NOT MODIFY THE CODE ABOVE */
 48 | 
 49 | async function setCacheValue(key, value) {
 50 |   return await client.set(key, value);
 51 | }
 52 | 
 53 | async function getCacheValue(key) {
 54 |   return await client.get(key);
 55 | }`,
 56 | 		hints: [
 57 | 			"Use the `client.set` method to store a value in Redis.",
 58 | 			"Use the `client.get` method to retrieve a value from Redis.",
 59 | 			"Remember to use `await` with Redis methods as they return Promises.",
 60 | 			"The `setCacheValue` function should return the result of the set operation.",
 61 | 			"The `getCacheValue` function may return `null` if the key does not exist.",
 62 | 		],
 63 | 		exampleUsage: `// Set cache value
 64 | await setCacheValue("user1", "John Doe")
 65 | // OK
 66 | 
 67 | // Get cache value
 68 | const value = await getCacheValue("user1")
 69 | console.log(value) // "John Doe"
 70 | 
 71 | // Get non-existent value
 72 | const nullValue = await getCacheValue("user2")
 73 | console.log(nullValue) // null`,
 74 | 		difficulty: "easy",
 75 | 		testCases: [
 76 | 			{
 77 | 				name: "Set and get a value",
 78 | 				run: async ({ setCacheValue, getCacheValue }) => {
 79 | 					await setCacheValue("user1", "John Doe");
 80 | 					const result = await getCacheValue("user1");
 81 | 					return result === "John Doe";
 82 | 				},
 83 | 			},
 84 | 			{
 85 | 				name: "Get a non-existent value",
 86 | 				run: async ({ getCacheValue }) => {
 87 | 					const result = await getCacheValue("nonexistent");
 88 | 					return result === null;
 89 | 				},
 90 | 			},
 91 | 			{
 92 | 				name: "Update an existing value",
 93 | 				run: async ({ setCacheValue, getCacheValue }) => {
 94 | 					await setCacheValue("user1", "John Doe");
 95 | 					await setCacheValue("user1", "Jane Doe");
 96 | 					const result = await getCacheValue("user1");
 97 | 					return result === "Jane Doe";
 98 | 				},
 99 | 			},
100 | 		],
101 | 	},
102 | 	{
103 | 		slug: "list-operations",
104 | 		title: "List Operations",
105 | 		description:
106 | 			"Implement two functions for managing a task queue: `addTask(task)` to add a task to the end of the queue, and `getNextTask()` to retrieve and remove the first task from the queue.",
107 | 		initialCode: `import { Redis } from '@upstash/redis'
108 | 
109 | const client = new Redis({
110 |   url: process.env.UPSTASH_REDIS_URL,
111 |   token: process.env.UPSTASH_REDIS_TOKEN
112 | })
113 | 
114 | /* DO NOT MODIFY THE CODE ABOVE */
115 | 
116 | async function addTask(task) {
117 |   // Implement addTask function
118 | }
119 | 
120 | async function getNextTask() {
121 |   // Implement getNextTask function
122 | }`,
123 | 		solutionCode: `import { Redis } from '@upstash/redis'
124 | 
125 | const client = new Redis({
126 |   url: process.env.UPSTASH_REDIS_URL,
127 |   token: process.env.UPSTASH_REDIS_TOKEN
128 | })
129 | 
130 | /* DO NOT MODIFY THE CODE ABOVE */
131 | 
132 | async function addTask(task) {
133 |   return await client.rpush('tasks', task);
134 | }
135 | 
136 | async function getNextTask() {
137 |   return await client.lpop('tasks');
138 | }`,
139 | 		hints: [
140 | 			"Use the `client.rpush` method to append a task to the end of the list.",
141 | 			"Use the `client.lpop` method to remove and return the first task from the list.",
142 | 			"The list of tasks is stored under the key 'tasks'.",
143 | 			"Be aware that `lpop` will return `null` if the list is empty.",
144 | 		],
145 | 		exampleUsage: `// Add tasks to the queue
146 | await addTask("Buy groceries")
147 | await addTask("Walk the dog")
148 | 
149 | // Get the next task
150 | const nextTask = await getNextTask()
151 | console.log(nextTask) // "Buy groceries"
152 | 
153 | // Get the next task again
154 | const nextTask2 = await getNextTask()
155 | console.log(nextTask2) // "Walk the dog"
156 | 
157 | // Try to get a task from an empty queue
158 | const emptyQueueTask = await getNextTask()
159 | console.log(emptyQueueTask) // null`,
160 | 		difficulty: "easy",
161 | 		testCases: [
162 | 			{
163 | 				name: "Add and get a task",
164 | 				run: async ({ addTask, getNextTask }) => {
165 | 					await addTask("Test task");
166 | 					const result = await getNextTask();
167 | 					return result === "Test task";
168 | 				},
169 | 			},
170 | 			{
171 | 				name: "Get from empty queue",
172 | 				run: async ({ getNextTask }) => {
173 | 					const result = await getNextTask();
174 | 					return result === null;
175 | 				},
176 | 			},
177 | 			{
178 | 				name: "Add multiple tasks and get them in order",
179 | 				run: async ({ addTask, getNextTask }) => {
180 | 					await addTask("Task 1");
181 | 					await addTask("Task 2");
182 | 					const result1 = await getNextTask();
183 | 					const result2 = await getNextTask();
184 | 					return result1 === "Task 1" && result2 === "Task 2";
185 | 				},
186 | 			},
187 | 		],
188 | 	},
189 | 	{
190 | 		slug: "hash-operations",
191 | 		title: "Hash Operations",
192 | 		description:
193 | 			"Implement two functions for managing user profiles: `setUserProfile(userId, field, value)` to set a field in a user's profile, and `getUserProfile(userId)` to retrieve all fields of a user's profile.",
194 | 		initialCode: `import { Redis } from '@upstash/redis'
195 | 
196 | const client = new Redis({
197 |   url: process.env.UPSTASH_REDIS_URL,
198 |   token: process.env.UPSTASH_REDIS_TOKEN
199 | })
200 | 
201 | /* DO NOT MODIFY THE CODE ABOVE */
202 | 
203 | async function setUserProfile(userId, field, value) {
204 |   // Implement setUserProfile function
205 | }
206 | 
207 | async function getUserProfile(userId) {
208 |   // Implement getUserProfile function
209 | }`,
210 | 		solutionCode: `import { Redis } from '@upstash/redis'
211 | 
212 | const client = new Redis({
213 |   url: process.env.UPSTASH_REDIS_URL,
214 |   token: process.env.UPSTASH_REDIS_TOKEN
215 | })
216 | 
217 | /* DO NOT MODIFY THE CODE ABOVE */
218 | 
219 | async function setUserProfile(userId, field, value) {
220 |   return await client.hset(\`user:\${userId}\`, field, value);
221 | }
222 | 
223 | async function getUserProfile(userId) {
224 |   return await client.hgetall(\`user:\${userId}\`);
225 | }`,
226 | 		hints: [
227 | 			"Use the `client.hset` method to set a field in a hash.",
228 | 			"Use the `client.hgetall` method to retrieve all fields and values of a hash.",
229 | 			"Follow a consistent key pattern for user profiles, such as 'user:{userId}'.",
230 | 			"The `getUserProfile` function returns an object with all the fields and values for a user.",
231 | 		],
232 | 		exampleUsage: `// Set user profile fields
233 | await setUserProfile("user1", "name", "John Doe")
234 | await setUserProfile("user1", "email", "john@example.com")
235 | 
236 | // Get the complete user profile
237 | const profile = await getUserProfile("user1")
238 | console.log(profile)
239 | // Output: { name: "John Doe", email: "john@example.com" }
240 | 
241 | // Try to get a non-existent user profile
242 | const emptyProfile = await getUserProfile("user2")
243 | console.log(emptyProfile) // null`,
244 | 		difficulty: "easy",
245 | 		testCases: [
246 | 			{
247 | 				name: "Set and get a user profile",
248 | 				run: async ({ setUserProfile, getUserProfile }) => {
249 | 					await setUserProfile("user1", "name", "John Doe");
250 | 					await setUserProfile("user1", "email", "john@example.com");
251 | 					const profile = await getUserProfile("user1");
252 | 					return profile.name === "John Doe" && profile.email === "john@example.com";
253 | 				},
254 | 			},
255 | 			{
256 | 				name: "Get a non-existent user profile",
257 | 				run: async ({ getUserProfile }) => {
258 | 					const profile = await getUserProfile("nonexistent");
259 | 					return profile === null;
260 | 				},
261 | 			},
262 | 			{
263 | 				name: "Update an existing profile field",
264 | 				run: async ({ setUserProfile, getUserProfile }) => {
265 | 					await setUserProfile("user1", "name", "John Doe");
266 | 					await setUserProfile("user1", "name", "Jane Doe");
267 | 					const profile = await getUserProfile("user1");
268 | 					return profile.name === "Jane Doe";
269 | 				},
270 | 			},
271 | 		],
272 | 	},
273 | 
274 | 	{
275 | 		slug: "expiring-cache",
276 | 		title: "Expiring Cache",
277 | 		description:
278 | 			"Implement an expiring cache using Upstash Redis. Create two functions: `setWithExpiry(key, value, expiryInSeconds)` to set a value with an expiration time, and `getWithExpiry(key)` to retrieve a value if it hasn't expired.",
279 | 		initialCode: `import { Redis } from '@upstash/redis'
280 | 
281 | const client = new Redis({
282 |   url: process.env.UPSTASH_REDIS_URL,
283 |   token: process.env.UPSTASH_REDIS_TOKEN
284 | })
285 | 
286 | /* DO NOT MODIFY THE CODE ABOVE */
287 | 
288 | async function setWithExpiry(key, value, expiryInSeconds) {
289 |   // Implement setWithExpiry function
290 | }
291 | 
292 | async function getWithExpiry(key) {
293 |   // Implement getWithExpiry function
294 | }
295 | 
296 | // Test your implementation
297 | async function main() {
298 |   await setWithExpiry('user:1', JSON.stringify({ name: 'John' }), 5)
299 |   console.log(await getWithExpiry('user:1'))
300 |   await new Promise(resolve => setTimeout(resolve, 6000))
301 |   console.log(await getWithExpiry('user:1'))
302 | }
303 | 
304 | main().catch(console.error)`,
305 | 		solutionCode: `import { Redis } from '@upstash/redis'
306 | 
307 | const client = new Redis({
308 |   url: process.env.UPSTASH_REDIS_URL,
309 |   token: process.env.UPSTASH_REDIS_TOKEN
310 | })
311 | 
312 | /* DO NOT MODIFY THE CODE ABOVE */
313 | 
314 | async function setWithExpiry(key, value, expiryInSeconds) {
315 |   return await client.set(key, value, { ex: expiryInSeconds })
316 | }
317 | 
318 | async function getWithExpiry(key) {
319 |   const value = await client.get(key)
320 |   return value ? JSON.parse(value) : null
321 | }
322 | 
323 | async function main() {
324 |   await setWithExpiry('user:1', JSON.stringify({ name: 'John' }), 5)
325 |   console.log(await getWithExpiry('user:1'))
326 |   await new Promise(resolve => setTimeout(resolve, 6000))
327 |   console.log(await getWithExpiry('user:1'))
328 | }
329 | 
330 | main().catch(console.error)`,
331 | 		hints: [
332 | 			"Use the 'ex' option with client.set to set expiration time.",
333 | 			"Remember to stringify objects before storing and parse them after retrieval.",
334 | 			"The getWithExpiry function should return null for expired or non-existent keys.",
335 | 			"No need to manually check expiration in getWithExpiry, Redis handles it automatically.",
336 | 		],
337 | 		exampleUsage: `// Set a value with 10 seconds expiry
338 | await setWithExpiry('session:123', JSON.stringify({ userId: 'user1' }), 10)
339 | 
340 | // Get the value immediately
341 | console.log(await getWithExpiry('session:123')) // { userId: 'user1' }
342 | 
343 | // Wait for 11 seconds
344 | await new Promise(resolve => setTimeout(resolve, 11000))
345 | 
346 | // Try to get the expired value
347 | console.log(await getWithExpiry('session:123')) // null`,
348 | 		difficulty: "medium",
349 | 		testCases: [
350 | 			{
351 | 				name: "Set and get a value before expiration",
352 | 				run: async ({ setWithExpiry, getWithExpiry }) => {
353 | 					await setWithExpiry("test:1", JSON.stringify({ data: "test" }), 2);
354 | 					const result = await getWithExpiry("test:1");
355 | 					return result && result.data === "test";
356 | 				},
357 | 			},
358 | 			{
359 | 				name: "Get an expired value",
360 | 				run: async ({ setWithExpiry, getWithExpiry }) => {
361 | 					await setWithExpiry("test:2", JSON.stringify({ data: "test" }), 1);
362 | 					await new Promise((resolve) => setTimeout(resolve, 1100));
363 | 					const result = await getWithExpiry("test:2");
364 | 					return result === null;
365 | 				},
366 | 			},
367 | 			{
368 | 				name: "Get a non-existent key",
369 | 				run: async ({ getWithExpiry }) => {
370 | 					const result = await getWithExpiry("nonexistent");
371 | 					return result === null;
372 | 				},
373 | 			},
374 | 		],
375 | 	},
376 | 	{
377 | 		slug: "counter-with-reset",
378 | 		title: "Counter with Reset",
379 | 		description:
380 | 			"Implement a counter system with a reset functionality using Upstash Redis. Create three functions: `incrementCounter(key)` to increment a counter, `getCounter(key)` to get the current count, and `resetCounter(key)` to reset the counter to zero.",
381 | 		initialCode: `import { Redis } from '@upstash/redis'
382 | 	
383 | const client = new Redis({
384 | 	url: process.env.UPSTASH_REDIS_URL,
385 | 	token: process.env.UPSTASH_REDIS_TOKEN,
386 | })
387 | 
388 | /* DO NOT MODIFY THE CODE ABOVE */
389 | 
390 | async function incrementCounter(key) {
391 | 	// Implement incrementCounter function
392 | }
393 | 
394 | async function getCounter(key) {
395 | 	// Implement getCounter function
396 | }
397 | 
398 | async function resetCounter(key) {
399 | 	// Implement resetCounter function
400 | }`,
401 | 		solutionCode: `import { Redis } from '@upstash/redis'
402 | 	
403 | const client = new Redis({
404 | 	url: process.env.UPSTASH_REDIS_URL,
405 | 	token: process.env.UPSTASH_REDIS_TOKEN,
406 | })
407 | 
408 | /* DO NOT MODIFY THE CODE ABOVE */
409 | 
410 | async function incrementCounter(key) {
411 | 	const currentValue = await client.get(key);
412 | 	const newValue = (parseInt(currentValue) || 0) + 1;
413 | 	await client.set(key, newValue.toString());
414 | 	return newValue;
415 | }
416 | 
417 | async function getCounter(key) {
418 | 	const value = await client.get(key);
419 | 	return value ? parseInt(value) : 0;
420 | }
421 | 
422 | async function resetCounter(key) {
423 | 	await client.set(key, '0');
424 | 	return 0;
425 | }`,
426 | 		hints: [
427 | 			"Use client.get and client.set to implement increment functionality.",
428 | 			"Remember to parse the string returned by client.get to an integer.",
429 | 			"Use client.set with a value of 0 to reset the counter.",
430 | 			"Handle the case where the counter doesn't exist in getCounter and incrementCounter.",
431 | 		],
432 | 		exampleUsage: `// Increment the 'pageviews' counter
433 | await incrementCounter('pageviews')
434 | await incrementCounter('pageviews')
435 | await incrementCounter('pageviews')
436 | 
437 | // Get the current count
438 | const views = await getCounter('pageviews')
439 | console.log('Page views:', views) // 3
440 | 
441 | // Reset the counter
442 | await resetCounter('pageviews')
443 | console.log('After reset:', await getCounter('pageviews')) // 0`,
444 | 		difficulty: "medium",
445 | 		testCases: [
446 | 			{
447 | 				name: "Increment and get counter",
448 | 				run: async ({ incrementCounter, getCounter }) => {
449 | 					await incrementCounter("test1");
450 | 					const value = await getCounter("test1");
451 | 					return value === 1;
452 | 				},
453 | 			},
454 | 			{
455 | 				name: "Multiple increments",
456 | 				run: async ({ incrementCounter, getCounter }) => {
457 | 					await incrementCounter("test2");
458 | 					await incrementCounter("test2");
459 | 					await incrementCounter("test2");
460 | 					const value = await getCounter("test2");
461 | 					return value === 3;
462 | 				},
463 | 			},
464 | 			{
465 | 				name: "Reset counter",
466 | 				run: async ({ incrementCounter, resetCounter, getCounter }) => {
467 | 					await incrementCounter("test3");
468 | 					await incrementCounter("test3");
469 | 					await resetCounter("test3");
470 | 					const value = await getCounter("test3");
471 | 					return value === 0;
472 | 				},
473 | 			},
474 | 			{
475 | 				name: "Get non-existent counter",
476 | 				run: async ({ getCounter }) => {
477 | 					const value = await getCounter("nonexistent");
478 | 					return value === 0;
479 | 				},
480 | 			},
481 | 			{
482 | 				name: "Increment after reset",
483 | 				run: async ({ incrementCounter, resetCounter, getCounter }) => {
484 | 					await incrementCounter("test4");
485 | 					await incrementCounter("test4");
486 | 					await resetCounter("test4");
487 | 					await incrementCounter("test4");
488 | 					const value = await getCounter("test4");
489 | 					return value === 1;
490 | 				},
491 | 			},
492 | 		],
493 | 	},
494 | ];
495 | 
496 | export function getProblemBySlug(slug: string): Problem | undefined {
497 | 	return problems.find((problem) => problem.slug === slug);
498 | }
499 | 
500 | export function getNextProblemSlug(currentSlug: string): string | null {
501 | 	const currentIndex = problems.findIndex((problem) => problem.slug === currentSlug);
502 | 	if (currentIndex < problems.length - 1) {
503 | 		return problems[currentIndex + 1].slug;
504 | 	}
505 | 	return null;
506 | }
507 | 
508 | export function getPreviousProblemSlug(currentSlug: string): string | null {
509 | 	const currentIndex = problems.findIndex((problem) => problem.slug === currentSlug);
510 | 	if (currentIndex > 0) {
511 | 		return problems[currentIndex - 1].slug;
512 | 	}
513 | 	return null;
514 | }
515 | 


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | import type { Config } from "tailwindcss"
 2 | 
 3 | const config = {
 4 |   darkMode: ["class"],
 5 |   content: [
 6 |     './pages/**/*.{ts,tsx}',
 7 |     './components/**/*.{ts,tsx}',
 8 |     './app/**/*.{ts,tsx}',
 9 |     './src/**/*.{ts,tsx}',
10 | 	],
11 |   prefix: "",
12 |   theme: {
13 |     container: {
14 |       center: true,
15 |       padding: "2rem",
16 |       screens: {
17 |         "2xl": "1400px",
18 |       },
19 |     },
20 |     extend: {
21 |       colors: {
22 |         border: "hsl(var(--border))",
23 |         input: "hsl(var(--input))",
24 |         ring: "hsl(var(--ring))",
25 |         background: "hsl(var(--background))",
26 |         foreground: "hsl(var(--foreground))",
27 |         primary: {
28 |           DEFAULT: "hsl(var(--primary))",
29 |           foreground: "hsl(var(--primary-foreground))",
30 |         },
31 |         secondary: {
32 |           DEFAULT: "hsl(var(--secondary))",
33 |           foreground: "hsl(var(--secondary-foreground))",
34 |         },
35 |         destructive: {
36 |           DEFAULT: "hsl(var(--destructive))",
37 |           foreground: "hsl(var(--destructive-foreground))",
38 |         },
39 |         muted: {
40 |           DEFAULT: "hsl(var(--muted))",
41 |           foreground: "hsl(var(--muted-foreground))",
42 |         },
43 |         accent: {
44 |           DEFAULT: "hsl(var(--accent))",
45 |           foreground: "hsl(var(--accent-foreground))",
46 |         },
47 |         popover: {
48 |           DEFAULT: "hsl(var(--popover))",
49 |           foreground: "hsl(var(--popover-foreground))",
50 |         },
51 |         card: {
52 |           DEFAULT: "hsl(var(--card))",
53 |           foreground: "hsl(var(--card-foreground))",
54 |         },
55 |       },
56 |       borderRadius: {
57 |         lg: "var(--radius)",
58 |         md: "calc(var(--radius) - 2px)",
59 |         sm: "calc(var(--radius) - 4px)",
60 |       },
61 |       keyframes: {
62 |         "accordion-down": {
63 |           from: { height: "0" },
64 |           to: { height: "var(--radix-accordion-content-height)" },
65 |         },
66 |         "accordion-up": {
67 |           from: { height: "var(--radix-accordion-content-height)" },
68 |           to: { height: "0" },
69 |         },
70 |       },
71 |       animation: {
72 |         "accordion-down": "accordion-down 0.2s ease-out",
73 |         "accordion-up": "accordion-up 0.2s ease-out",
74 |       },
75 |     },
76 |   },
77 |   plugins: [require("tailwindcss-animate")],
78 | } satisfies Config
79 | 
80 | export default config


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "lib": ["dom", "dom.iterable", "esnext"],
 4 |     "allowJs": true,
 5 |     "skipLibCheck": true,
 6 |     "strict": true,
 7 |     "noEmit": true,
 8 |     "esModuleInterop": true,
 9 |     "module": "esnext",
10 |     "moduleResolution": "bundler",
11 |     "resolveJsonModule": true,
12 |     "isolatedModules": true,
13 |     "jsx": "preserve",
14 |     "incremental": true,
15 |     "plugins": [
16 |       {
17 |         "name": "next"
18 |       }
19 |     ],
20 |     "paths": {
21 |       "@/*": ["./src/*"]
22 |     }
23 |   },
24 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
25 |   "exclude": ["node_modules"]
26 | }
27 | 


--------------------------------------------------------------------------------