Realtime Todo App Using React and Pocketbase
Tags: react, tutorial, webdev, beginners
Published: 2022-10-08 17:12:37

I recently came across an outstanding Open Source backend project called PocketBase and its really amazing.
Let's point out the good parts:

1. It is written in Go, and everyone knows how _blazingly _ fast Go is.
2. Open-source alternative to Firebase for smaller/hobby projects.
3. Only one file to run, and can be used for **RealtimeDB**, **Authentication**(with different providers), **File Storage**, **RestAPI** and much more to come.
4. Now the best part, it requires very very few lines to setup, and **trust me its super easy to setup a realtime db really fast**, compared to Firebase which has a lot of boilerplate and setup at client side🤯.
5. Local admin dashboard to take control of everything, can be self hosted easily, only one single file to run everything. Isn't this Amazing! 😲

**Cons**
Still under development so you might face some issues, but the development team is keen to resolve issues really fast.

1. PocketBase Dashboard
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yceiwo2c3hvifx2fioq0.png)

2. You can easily get the required code for your APIs here easily:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fj3070w1e1bzj4u8yvs6.png)

3. You can setup your own rules for the access to APIs easily:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vmcsz0o1ar1gn04akcyd.png)

I created this simple todo app using React+PocketBase, which supports creation and updation of todo in realtime.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ciwvrrcklgvthqo9vu2l.png)

1. Download PocketBase from [](https://pocketbase.io/docs/) according to your OS and run it using the command `pocketbase serve`.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4fhmxrjihva3vss2uj47.png)


2. Open the Admin UI in browser and create a new collection named **todoCollection** and add these fields to it and for now disable list action,create action and update action API rules to grant everyone access.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8sf05skvdh0qjx879iwv.png)

**That's it for the server side. Now coming to the client side:**
1. Create a new react-app with Tailwind if you want styling as mine else leave it and create a components folder with a file named TodoScreen.jsx.
2. Install pocketbase js-SDK using `npm install pocketbase` and import it in your file using: `import Pocketbase from 'pocketbase'`
3. Pocketbase doc is itself sufficient and also the Admin Dashboard as I mentioned above where you can get the codes for your APIs to use.
4. Just an important code that deals with the realtime in React:

```
// realtime
  useEffect(() => {
    client.realtime.subscribe('todoCollection', function (e) {
      // console.log('realtime', e.record);
      let x = todos.filter((item) => item.id !== e.record.id);
      setTodos([e.record, ...x]);
    });
    return () => {
      client.realtime.unsubscribe(); // don't forget to unsubscribe
    };
  });
```
So what it does is, keep the looking for mutations in the collection as the client is subscribed to the collection. When some changes happens in the collection (create,update & delete) it gets fired and returns the new record.

P.S (not going to write full code here because its easily understandable)

Link to the full code: https://github.com/rajesh6161/pocketbaseTodo

Thanks, and hoping this was of some help for devs looking out for Realtime DB with easy and fast setup.