Developer Guide
How to Add a New Exercise
We have streamlined the process of adding new machine coding challenges. You no longer need to create complicated routing or page files manually.
1Create a Folder
Navigate to src/challenges and create a new folder with the name of your exercise.
/src
/challenges
/my-new-component // <-- Create this folder
/challenges
/my-new-component // <-- Create this folder
Note: The folder name will be used as the URL slug (e.g., /exercises/my-new-component) and formatted for the sidebar title.
2Create index.jsx
Inside your new folder, create an index.jsx file. This file must export your component as the default export.
export default function MyNewComponent() {
return (
<div>
<h1>Hello World</h1>
</div>
);
}
return (
<div>
<h1>Hello World</h1>
</div>
);
}
3Automatic Magic
That's it! Your component will automatically:
- Appear in the Sidebar navigation under "Challenges".
- Have a dedicated page route at
/exercises/my-new-component. - Display the live component demo.
- Automatically show the source code in the "Code" tab.
Best Practices
- If your exercise requires multiple components, you can create them in the same folder, but make sure
index.jsxis the main entry point. - Use
"use client"at the top of your file if you need React hooks likeuseStateoruseEffect. - You can import images or other assets directly into your component.