Task Board is a small to-do site. This page follows a user step by step: what they can do, where they go next and what they see when they get something wrong, with diagrams you can trace by eye.
How to run the appRun it locally with npm start, then sign in with demo / demo1234
What users can do
The six main things the site offers. The sections below explain each one with a diagram and text.
1
Create an account
Pick a 3–20 character username, a display name and a password of at least 8 characters.
2
Sign in and out
Try it quickly with demo / demo1234. Logout sits in the top bar on every page.
3
Manage tasks
Add, complete, rename and delete tasks, each with a Low / Medium / High priority.
4
Search and filter
Type to search, filter by All / Active / Completed and see how many are left.
5
Look after your profile
Change your display name and your password.
6
Personalise and leave
Turn on dark mode, or delete the account with all its tasks (after a confirmation).
The page map
The site has four pages and users move between them along the arrows. Tasks and Profile need a signed-in user.
Arrows show where a user can go · every signed-in page has Logout in the top bar
1 · Opening the site and signing in
Everyone starts here. The site decides between Tasks and Sign in depending on whether a session is still saved.
decisionsuccesserror
Read it as text
Open the site: with a saved session you go to Tasks at once, otherwise to Sign in.
Enter username + password and press Login: correct → Tasks, wrong → red message, retry.
No account yet: press Create account → fill 4 fields → if the rules pass you land on Tasks with a welcome message, otherwise every error is listed at once.
2 · Managing tasks
The heart of the site. This chart follows one task from typing its title to deleting it.
decisionsuccesserror / delete
Read it as text
Type a title, pick a Priority (Low / Medium / High, default Medium) and press Add task.
An empty title or one over 80 characters → red message, nothing is added.
Valid → the task is appended to the list and saved at once.
Per row: complete / Edit / Delete, and Clear completed removes every finished task (disabled while none are finished).
Search
Type in Search tasks and the list narrows as you type, ignoring case. No hits shows No matching tasks.
Filter
The All / Active / Completed buttons switch the view. The active one is highlighted and it combines with search.
Count what is left
The footer reads “N tasks left”, the number of tasks not yet completed.
3 · Looking after the profile
The Profile page is four cards that work independently. A mistake in one only shows its own message.
decisionsuccessdestructive
Read it as text
Details: change the display name; it cannot be empty. Success shows Profile updated and the greeting in the header changes at once.
Password: the current password must be right, the new one at least 8 characters and confirmed. Success shows Password changed.
Appearance: tick Dark mode to switch themes at once; the choice is remembered.
Danger zone: Delete account asks first; if confirmed it removes the account and all its tasks and returns to Login.
Messages users will see
These are the messages users really see (the app UI is in English).
Where
When
Message
Sign in
empty field / wrong credentials
Username is required Password is required Username and password do not match
Create account
rules broken (all shown at once)
Username must be 3-20 characters (letters, numbers, underscore) Display name is required Password must be at least 8 characters Passwords do not match Username is already taken
Tasks
empty or too-long title
Task title is required Task title must be 80 characters or fewer
Tasks
empty list
No tasks yet. Add your first task above. No matching tasks
Profile
invalid input
Display name is required Current password is incorrect New password must be at least 8 characters Passwords do not match
Profile
success
Profile updated Password changed
Any page
short notices on page changes
Welcome, <name>! You have been signed out Please sign in to continue Account deleted
Good to know
Data lives on the server. Accounts and tasks are kept in the backend's memory, so you can sign in from any browser and see the same data, but everything resets when the server restarts. The browser keeps only your session and theme. Every account has its own task list.
Usernames are case-insensitive. They are lowercased for you and may only use a–z, 0–9 and _.
You must sign in for Tasks and Profile. Typing the URL directly sends you to Sign in with a notice; a signed-in user opening Sign in or Register is sent to Tasks.
Unknown URLs show Page not found with a link back home.
The version badge in the bottom-right corner opens the change log when you press and hold for about 0.6 seconds (keyboard: Enter or Space).
The Docs link in the top bar and on the Sign in page leads to this documentation.
Heads-up: This is a demo app for practising tests. Data lives in the server's memory and resets on restart, and the demo account is shared, so never use a real password.