Build a todos app with login

We build a todos app with email and password sign in, where everyone's list updates live, by describing it to the agent in the VS Code chat. Then we look at what the agent built: the users table in the database and the tests.

What you need

VS Code and Elements installed, and a new app running. Install VS Code and Elements (opens in a new tab) covers both.

1. Describe the app

Type into the chat on the right the way you would say it out loud. You don't need a spec. The agent already follows the architecture and guidelines that come with Elements.

We typed:

Agent Prompt
I want to create a todos app with authentication. It should have email and password, multiple users, and anybody can see todos update in real time.

Press Enter.

2. Watch the agent work

The agent looks over the app, reads the manual pages it needs, and starts writing code. The page in the browser panel updates as it goes.

Keep an eye on State in the terminal panel. When it changes to Error, the build found a mistake. The agent gets the error as soon as it asks and corrects it, and the state goes back to Ok. Ok means your app is in a good state.

3. Read what the agent built

When the agent finishes, it summarizes what it made. Ours had:

• Accounts: sign up and sign in pages with email and password. Passwords are stored as bcrypt hashes.
• Todos: one shared list. Each row shows the email of the person who added it.
• Permissions: only the owner of a todo can check it, star it, rename it or delete it. The server enforces this, not only the page.
• Live updates: changes appear in every open tab without a reload.
• Extras: All, Active and Done filters, a Clear done button and a sign out button.

Sign in, the user tables and the todos all live in your app's own Postgres database. No third-party service is involved.

Open the app in a full browser at localhost:4000 (opens in a new tab) to click around and try it.

4. Look at the database

You never need to do this, because the agent handles it. It is there when you want it.

Press q in the terminal to stop the app server, then type:

Terminal
elements db

This opens a Postgres shell on your app's database. The users table has columns for the email and the password hash. Type \q to leave.

5. Run the tests

The agent wrote tests along with the app. Type:

Terminal
elements test

Each test shows pass or fail on the right, and the elapsed time is in microseconds. The agent runs them as it builds, so it can tell when a new feature breaks something you built weeks ago. Press q to exit.

Type elements start to start the app server again.

6. Come back to your app

Quitting VS Code stops the app server. The project server for your app keeps running in the background for a while, so the build state is ready the next time you start.

To open the app again:

1. In VS Code, choose File, Open Recent and pick your project. Projects live in ~/elements/projects/<name>.
2. If the terminal panel is not open, press Ctrl-backtick, or choose Terminal, New Terminal.
3. Type elements start.

The app opens in the browser panel. A new chat session picks up where the last agent left off.