Framework Battle Starter

The fork-target scaffold for the Neurons Lab Framework Battle course. Three framework variants (Vue 3, Svelte 5, React 19) sharing the same dataset, the same project structure, and the same Tailwind v4 + DaisyUI v5 + Vitest tooling, so you can pick a framework and build along with the lessons without fighting setup.

Course: neurons-lab.pages.dev/courses/framework-battle Reference implementation: github.com/danieltofan/globe-explorer

Prerequisites

• Node.js 20.19+ or 22.12+. Vite 7 requires recent Node. Check with node --version. If you're below 20.19, upgrade via nodejs.org or your version manager (nvm, fnm, volta).
• npm 10+ (ships with Node 20+).
• Git for cloning your fork.
• A GitHub account for the fork.
• A code editor. VS Code is the smoothest pick; framework-specific extension recommendations are in each framework folder's README.

How to use this

This is a fork-only repo. You do not clone it directly and you do not contribute back. You fork it on GitHub, clone your fork, and build in your fork.

# 1. Fork github.com/danieltofan/framework-battle-starter on GitHub (top-right Fork button)
# 2. Clone YOUR fork (substitute your username)
git clone https://github.com/YOUR-USERNAME/framework-battle-starter
cd framework-battle-starter

# 3. Pick a framework folder (vue / svelte / react)
cd vue                          # or svelte, or react

# 4. Install dependencies
npm install

# 5. Run the dev server
npm run dev

Open the URL Vite prints (usually http://localhost:5173). You should see a "Framework Battle Starter" welcome card. That confirms the scaffold runs cleanly.

From there: open the Lab course, work through Module 0 setup lessons if you haven't, then start Module 1.

What's pre-shipped (and why)

The hand-curated datasets the course depends on:

Everything else is empty by design. You build the features.

Structure (per framework folder)

<framework>/
├── package.json                      Vite + framework + Tailwind v4 + DaisyUI v5 + Vitest preinstalled
├── vite.config.js                    Plugin wiring + path alias (@ -> src/) + Vitest config
├── index.html                        Vite entry HTML
└── src/
    ├── main.{js,jsx}                 Mounts the App
    ├── App.{vue,svelte,jsx}          Placeholder welcome card; replace as you build
    ├── style.css                     Tailwind v4 + DaisyUI v5 imports (@import + @plugin)
    ├── shared/
    │   └── data/
    │       └── regions.js            Pre-shipped
    └── features/
        ├── compare/                  Module 1 home (empty)
        ├── hundred-people/           Module 2 home (empty)
        ├── countries-cartogram/      Module 3 home; countries.js pre-shipped
        │   └── countries.js
        └── language-space/           Module 4 home; languages.js pre-shipped
            └── languages.js

Module slugs match the production Globe Explorer codebase (compare, hundred-people, countries-cartogram, language-space).

What this scaffold does NOT include

• No completed feature code. No Compare.vue, no Cartogram.svelte, no LanguageSpace.jsx. You write those by following the lessons.
• No pre-installed test suites. Each lesson includes test code blocks; paste them into <feature>.test.{js,jsx} files alongside your feature. Vitest is configured to find and run them.
• No routing or navigation across features. Each framework folder's App shows one feature at a time. If you build multiple features and want a nav between them, you wire it yourself (or just edit App to import whichever you're working on right now).
• No CI / GitHub Actions. Local-only. You run npm test on your machine.
• No CONTRIBUTING.md. Fork-only model. PRs to this upstream get closed.
• No deployment config. Each npm run build produces a static dist/ you can deploy anywhere (Cloudflare Pages, GitHub Pages, Vercel, Netlify). The course doesn't teach DevOps.

Pick a framework

The folders are independent: installing in one doesn't affect the others. Each per-framework README covers install, dev/build/test commands, the wiring loop for your first feature, framework-specific gotchas, and troubleshooting.

Updating from upstream

If the upstream starter (this repo) gets a meaningful update (new dependency version, fix in the scaffold), you can pull it into your fork:

git remote add upstream https://github.com/danieltofan/framework-battle-starter
git fetch upstream
git merge upstream/main

Most students will never need to do this. The starter is meant to be stable; the course content evolves on Lab, not in this repo.

Common questions

Do I need to install all three framework folders? No. Pick one. The folders are independent. npm install inside vue/ only affects vue/; the other two are untouched until you run npm install in them.

Can I do the course without ever running npm install? Sort of. Every lesson has live in-browser code playgrounds (LiveCode iframes via livecodes.io) that show the running result in all three frameworks side by side. You can read the lessons and watch the code work without ever leaving the browser. But the full hands-on experience (your own repo, your own tests, your own commits, your own deploy) means installing locally in your fork.

What if I want to deploy my finished work? npm run build in any framework folder produces a static dist/ directory. Drop that into Cloudflare Pages, GitHub Pages, Vercel, Netlify, or any static host. The course doesn't teach DevOps; that's intentional.

Do I need to know all three frameworks? No. Pick one to lead. The course shows all three side by side in every LiveCode block, so you'll see the contrasts even if you only build in one. Most students do one framework end to end, then maybe redo Module 1 in a second framework as a comparison exercise.

Can I commit my work to my fork? Yes, that's the entire point. Your fork is your project. Commit, push, share with employers as a portfolio piece. The capstone (Module 5) explicitly references your fork's repo URL as a submission field for the optional showcase consent.

What if npm install fails? Check your Node version (node --version). Vite 7 needs Node 20.19+ or 22.12+. The next-most-common cause is a network issue (firewall, corporate proxy). Per-framework READMEs have a Troubleshooting section with more specific cases.

License

MIT. Use it however you want, including for paid client work.