Thanks for improving this Machine Coding playground.
The goal of contributions is to help learners practice interview-style component development with reusable design patterns.
- Keep challenges beginner-readable.
- Keep implementations reusable, not one-off hacks.
- Include clear requirements and evaluation criteria.
- Preserve existing formatting and lint standards.
npm install
npm run dev
npm run lint- Pick a kebab-case folder name under
src/app/. - Add a
page.tsxfor the route entry. - Add the main component file (for example,
YourComponent.tsx). - Add optional supporting files (
*.css,data.json, utilities). - Add a challenge statement markdown file using docs/CHALLENGE_TEMPLATE.md.
The challenge list page is folder-driven, so new folders appear automatically.
src/app/<your-challenge>/
page.tsx
<YourChallenge>.tsx
<YourChallenge>.md
<YourChallenge>.css # optional
data.json # optional
utils.ts # optional
Every new challenge should define:
- Problem goal.
- Functional requirements.
- Non-functional requirements.
- Reusable component API expectations.
- Edge cases.
- Evaluation criteria.
See docs/REUSABLE_COMPONENT_PLAYBOOK.md for the reuse checklist.
- Use TypeScript and functional React components.
- Keep state transitions predictable and readable.
- Avoid unnecessary dependencies.
- Keep naming explicit and interview-friendly.
Run:
npm run lint
npm run buildThen verify manually:
- Route loads at
/<your-challenge>. - Core interactions work with keyboard and mouse.
- Empty/error/edge states are handled.
- Challenge markdown matches actual behavior.
- New challenge follows folder structure.
- Challenge includes markdown specification.
- Component API is reusable and typed.
- Lint and build pass locally.
- README/docs references are updated when needed.