Learning playground

Welcome! Build your demos here.

This site is your sandbox for learning web development. Everything you build lives on the demos page — here's the loop:

  1. 1.Run the dev server
    In a terminal, run npm run dev and open http://localhost:3000. The page reloads as you edit.
  2. 2.Create your demo
    Make a new folder under src/app/demos/ — for example src/app/demos/my-first-demo/page.tsx. Export a default component from it and it becomes a page at /demos/my-first-demo, listed automatically on the demos page. Copy the hello-world folder to get going.
  3. 3.Style it the easy way
    Pre-styled components live in @/components/ui (Button, Card, Input, …). Need another one? Run npx shadcn@latest add dialog (or any component from the shadcn docs). Use Tailwind classes for everything else.
  4. 4.Ship it
    Commit your work and push to main. About a minute later it's live at playground.solafidei.com.
View the demos →shadcn/ui componentsTailwind docsNext.js docs