100xSystems
The 100xSystems platform — a public learning surface with browser tools, design references, and a curriculum for engineers who learn by shipping.
Stack Next.js · TypeScript · Tailwind CSS · MDX · Vercel
The first year of engineering is mostly a stack of disconnected facts. A for-loop here, a deployment there, and no clear picture of how the pieces meet. 100xSystems is my attempt to put the picture back: a curriculum, a set of small tools, and a design language that treats learners like people who are going to build something on Monday.
The project started as a study group and became a platform. The public surface now includes browser-based utilities, design references, and written material. The private surface — submissions, review, certificates — is where the loop closes.
Three surfaces, one idea
Tools. Small, specific utilities that remove a recurring friction: format a file, inspect a payload, generate a structure, check a value. Each tool is a single page with no account and no onboarding. The point is to be useful before asking for anything.
Design. A set of references for people who can build a feature but freeze when the page has to look like something. The design library shows decisions, not just screenshots: type scale, spacing, hierarchy, and the reasoning behind a layout.
Curriculum. A path through the parts of engineering that are usually learned by accident — reading an error, writing a README, making a change reversible, shipping a small thing end to end.
The build
The site is a Next.js and TypeScript project with a shared design system and a static-first content layer. The tools run in the browser where they can, so the common case is fast and private. The content is written in MDX so a lesson can include a live component without turning into a separate application.
The visual direction is deliberately low-drama: light surfaces, one accent, generous space, and a strong grid. A learning product has enough cognitive load already. The interface should not add to it.
TIP
The most useful page in the whole product is the one that explains what to do when the first attempt fails. Beginners do not need more inspiration; they need a next step.
What I learned
Building in public is a design constraint. Every feature has to make sense to someone who arrives without context, and every empty state has to teach. The platform is still growing, but the core is stable: make the first useful action obvious, then get out of the way.
More from the build
Click any image. Arrow keys walk the set.