TinyTasks: a real React app — download the code and tests

README

# TinyTasks — a real React + Vite app you can ship

The TinyTasks project from the Vibe Coding course: a responsive to-do app with add, complete, filter, delete and clear-completed. Tasks persist in localStorage. No account.

## Run it

npm install
npm run dev      # http://localhost:5173
npm test         # 7 tests, no browser needed
npm run build    # production files in dist/

## What is real here

src/store.js is a pure data model: add, toggle, remove, clear, filter, count, serialize.
src/store.test.js tests it with Node's built-in test runner (no extra dependency).
src/App.jsx is the UI, wired to the store and to localStorage.
Responsive CSS, keyboard-friendly form and accessible labels.

## Make it yours

Add due dates and sort by them.
Add categories and a category filter.
Sign in with Clerk and sync tasks to Supabase (the course shows how).
Add PostHog events: task_added, task_completed, task_deleted.
Deploy to Vercel: import the repo, build command npm run build, output dist.

MIT licensed.

Files in this download

.gitignore

index.html

package.json

README.md

src/App.jsx

src/main.jsx

src/store.js

src/store.test.js

src/styles.css

vite.config.js

Run it locally

$ npm install
$ npm run dev
$ npm test
$ npm run build

Prove it works

$ npm test

Expected: 7 tests passing

Stack

ReactViteCSSNode test runner

What you get

Read and change a React app built from small components
Keep logic in a testable module instead of inside the UI
Persist state in localStorage and handle corrupt data safely
Run the tests, build for production and deploy the dist folder

Push this project to GitHub

Create a repository and upload every file as one commit. Use it for your portfolio, a code review, or your first deploy.

GitHub personal access token

Classic token: tick `repo`. Fine-grained token: give this repository Contents → Read and write and Metadata → Read. Create a token · Fine-grained token

Your token is stored in this tab's sessionStorage and sent only to api.github.com. keepUp AI never receives it.

No GitHub account? The project ZIP works on its own — push later whenever you like.

All projects

SupportPilot: the AI SaaS capstone Docs Bot: real RAG with citations Triage Agent: a tool loop with a budget Eval Harness: measure before you ship

Generated from the same content the course teaches. If a lesson changes, its download and tests change with it.