A full step-by-step guide to building a simple to-do app using Basic’s create-lofi-app
Create a new local-first project
y
for installing the vite package.
Then give your project a name.
And finally choose the Basic + Tailwind variant.install npm packages
cd project-name
into your project, run npm i
, and start your server with npm run dev
:http://localhost:5173
and see the app running as below:
Delete the existing homepagecode
src/App.tsx
file with the following for a clean slate:Add an input + button
Install the Basic CLI
Connect to a Basic project
Create new project
typescript
and hit Yep!
Set up your schema
src/basic.config.ts
file, you’ll see that it’s already set up for you now with a schema object with a project_id
!Let’s change the schema to match the needs of our To-Do app, and add a name string field and a completed boolean field.Push the changes to our schema
Add a login and logout button to App.tsx
src/App.tsx
and import signin
, signout
, isSignedIn
, and user
.Submit a task to Basic DB
.add()
method, and then console.log
the result.Read and display the tasks
Add a delete button
.delete()
method.