From 9a5bca6df592b90db228865189c6da6e1b98b287 Mon Sep 17 00:00:00 2001 From: Agustin Ramiro Diaz Date: Wed, 6 May 2026 14:00:47 -0300 Subject: [PATCH] chore: add example for newcomers --- README.md | 15 ++++ .../prop-drilling/PropDrillingChallenge.tsx | 80 +++++++++++++++++++ examples/prop-drilling/index.ts | 36 +++++++++ tsconfig.json | 2 +- 4 files changed, 132 insertions(+), 1 deletion(-) create mode 100644 examples/prop-drilling/PropDrillingChallenge.tsx create mode 100644 examples/prop-drilling/index.ts diff --git a/README.md b/README.md index d53fcbb..e5b3fb4 100644 --- a/README.md +++ b/README.md @@ -111,6 +111,21 @@ npm start npm run build ``` +### Testing the Environment with Examples + +To quickly test if the environment is set up correctly and see how challenges are loaded, you can use the provided example challenge: + +```bash +# Copy the example challenge into the interviews directory +cp -r examples/prop-drilling src/interviews/ + +# Ensure your development server is running +npm start +``` + +The **Context API Refactor** challenge should now automatically appear on the main interface at `http://localhost:8080`. + + ### Creating Interview Patterns Interview patterns are modular challenges that can be loaded dynamically. See [src/interviews/README.md](./src/interviews/README.md) for detailed pattern creation guidelines. diff --git a/examples/prop-drilling/PropDrillingChallenge.tsx b/examples/prop-drilling/PropDrillingChallenge.tsx new file mode 100644 index 0000000..bab5c94 --- /dev/null +++ b/examples/prop-drilling/PropDrillingChallenge.tsx @@ -0,0 +1,80 @@ +import React, { useState } from 'react'; + +// ========================================== +// Candidate Task: Refactor this using Context +// ========================================== + +const UserInfo = ({ user }: { user: { name: string; email: string } }) => ( +
+
+ {user.name.charAt(0)} +
+ {user.name} +
+); + +const Header = ({ user }: { user: { name: string; email: string } }) => ( +
+

Dashboard

+ +
+); + +const ThemeToggle = ({ theme, toggleTheme }: { theme: string; toggleTheme: () => void }) => ( + +); + +const Sidebar = ({ theme, toggleTheme }: { theme: string; toggleTheme: () => void }) => ( + +); + +const Content = ({ user }: { user: { name: string; email: string } }) => ( +
+

Welcome back, {user.name}!

+

+ This is a deeply nested component structure. Currently, the user object and theme state are being passed down multiple levels via props. +

+

+ Your task is to refactor this code to use the React Context API and avoid prop drilling! +

+
+); + +const MainLayout = ({ + user, + theme, + toggleTheme +}: { + user: { name: string; email: string }; + theme: string; + toggleTheme: () => void +}) => ( +
+ + +
+); + +export default function PropDrillingChallenge() { + const [user] = useState({ name: 'Alex Developer', email: 'alex@example.com' }); + const [theme, setTheme] = useState('light'); + + const toggleTheme = () => { + setTheme(prev => prev === 'light' ? 'dark' : 'light'); + }; + + return ( +
+
+ +
+ ); +} diff --git a/examples/prop-drilling/index.ts b/examples/prop-drilling/index.ts new file mode 100644 index 0000000..08341c7 --- /dev/null +++ b/examples/prop-drilling/index.ts @@ -0,0 +1,36 @@ +import type { InterviewPattern } from "@/interviews/types"; +import PropDrillingChallenge from "./PropDrillingChallenge"; + +export const pattern: InterviewPattern = { + id: "prop-drilling-refactor", + name: "Context API Refactor", + description: "Refactor a prop-drilling architecture to use React Context.", + version: "1.0.0", + author: "Codeflow", + estimatedTime: "15-20 minutes", + tags: ["react", "context-api", "refactoring"], + type: "react", + component: PropDrillingChallenge, + readmes: [ + { + title: "Instructions", + content: ` +# Prop Drilling Refactor + +## Objective +The provided component structure suffers from "prop drilling". State \`user\` and \`theme\` are passed down through multiple intermediate components that don't need them. + +Your task is to refactor this code to use the **React Context API** to manage global state. + +## Requirements +1. Create a \`UserContext\` and a \`ThemeContext\` (or a single combined \`AppContext\`). +2. Provide the state at the top level of the challenge component. +3. Consume the context in the components that actually need the data (e.g., \`UserInfo\`, \`ThemeToggle\`, \`Content\`). +4. Remove all unnecessary props from intermediate components like \`Header\`, \`MainLayout\`, and \`Sidebar\`. + +## Bonus +* Implement custom hooks for consuming your contexts (e.g., \`useTheme\` or \`useUser\`). + `.trim(), + }, + ], +}; diff --git a/tsconfig.json b/tsconfig.json index 1f41c67..35bb989 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -20,5 +20,5 @@ "@/*": ["./src/*"] } }, - "include": ["src"] + "include": ["src", "examples"] }