Build a simple Todo app using Supabase, Solid.JS with the help of ChatGPT

4 min readApr 2, 2023

Supabase is an open-source backend as a service (BaaS) platform that provides developers with a set of tools and services to quickly build and scale their web and mobile applications.

It offers a wide range of features, including real-time data synchronization, authentication and authorization, APIs for database operations, user management, and more.

Supabase uses PostgreSQL as its database engine and provides a PostgreSQL database instance to its users. It also provides SDKs for various programming languages such as JavaScript, Python, Ruby, and Go to make it easy for developers to integrate Supabase into their applications.

Supabase aims to provide a modern and intuitive alternative to traditional backend development, with a focus on speed, simplicity, and developer productivity.

Solid.js is a JavaScript library for building user interfaces. It is a reactive UI library that allows developers to declaratively describe the user interface of their web applications.

One of the unique features of Solid.js is its use of a reactive programming paradigm, which means that changes to the application state automatically trigger updates to the user interface. This makes it easy to build complex and dynamic user interfaces without having to manage low-level DOM manipulation.

Solid.js also supports server-side rendering, which makes it possible to pre-render the initial user interface on the server and deliver a fully-formed HTML page to the user’s browser. This can help to improve the performance and SEO of web applications.

Solid.js has a small API surface area and a modular architecture, which makes it easy to use and extend. It also has a growing ecosystem of plugins and extensions, including integrations with popular frameworks such as React and Vue.

Overall, Solid.js is a powerful and flexible UI library that offers a modern and efficient approach to building web applications.

I am new to both these techologies. So took help from ChatGPT. My question to ChatGPT is “Create Todo app using solid js and supabase”

Here are the steps.

Create a Supabase account: Go to https://supabase.io/ and sign up for a free account. Once you have created your account, create a new project.
Create a Todo table: In your project dashboard, click on “SQL” in the left-hand menu. Use the following SQL code to create a Todo table:

CREATE TABLE todos (
id SERIAL PRIMARY KEY,
task TEXT,
completed BOOLEAN DEFAULT false
);

3. Create a Supabase API key: Click on the “Settings” button in the left-hand menu, then click on “API”. Create a new API key with “public” permissions. Have these details handy.

4. To set up your Solid.js application: Create a new folder for your application and navigate to it in your terminal. Run the following command to create a new Solid.js application:

Code suggested by Chat GPT is below which did not work.

npx degit amouton/solid-starter my-todo-app

Below is the right code

npx degit solidjs/templates/js my-todo-app

5. Install the Supabase client library: You can use the Supabase client library to interact with your Supabase project from your application. Install the library by running the following command in your terminal:

npm install @supabase/supabase-js

6. Update your application code: Open the my-todo-app/src/App.jsx file and update it with the following code:

The import statements suggested by ChatGPT did not work. Here is the right code.

import { createClient } from “@supabase/supabase-js”;
import { createEffect, createSignal, For } from “solid-js”;
const supabase = createClient(‘https://<yoursite>.supabase.co', ‘<your API Key’);
function App() {
const [todos, setTodos] = createSignal([]);
async function addTodo(event) {
event.preventDefault();
const todoInput = event.target.elements.todoInput;
const { data, error } = await supabase.from(‘todos’).insert({ task: todoInput.value });
if (error) {
console.log(error);
} else {
setTodos([…todos(), data[0]]);
todoInput.value = ‘’;
}
}
async function fetchTodos() {
const { data, error } = await supabase.from(‘todos’).select(‘*’);
if (error) {
console.log(error);
} else {
setTodos(data);
}
}
fetchTodos();
return (
<div>
<h1>Todo App</h1>
<form onSubmit={addTodo}>
<input type=”text” name=”todoInput” />
<button type=”submit”>Add Todo</button>
</form>
<ul>
{todos().map(todo => (
<li key={todo.id}>{todo.task}</li>
))}
</ul>
</div>
);
}
export default App;