DEV Community

Cover image for I made a todo-list with Preact
Faiz Byputra
Faiz Byputra

Posted on

I made a todo-list with Preact

Hello! I'm Faiz, a Computer Science student. Recently I made a todo-list with Preact, localStorage, and PWA. This is one of my side project to learn about web development, especially in the frontend world.

Prudoo List Icon

Why Preact?

I'm introduced to Preact by Vite's CLI. There's an option to make a project with Preact template. So I was curious about this. The name is very similar to React.

And... yeah, after a bit of research, as far as I know, Preact is simply a smaller React alternative. Not much I know about it but here I am. I'm planning to make a simple todo-list so I think React would be an overkill.

Storing the data

I'm not the "Backend Guy". Making an API and tinkering with database is very difficult for me. And then I found this series about making todo-list with localStorage by Joseph Lynn and give it a shot.

So I know that localStorage is a key-value-based storage system stored in the client's browser. It's very interesting for me.

Make the app installable

The last thing I add is Progressive Web App or PWA. I tried it with vite-plugin-pwa for adding the service worker into the app. So the app is now installable on your devices!


Here's the GitHub repository of the project:

https://github.com/faizbyp/prudoo-list

And here's the live app:

https://prudoo-list.vercel.app/


I'd love to hear some feedback and suggestion so that I can grow more in the learning process. Thank you very much :D

Top comments (2)

Collapse
 
abiyyu03 profile image
Abiyyu Cakra

this is amazingg, thanks for sharing !

Collapse
 
faizbyp profile image
Faiz Byputra

Thank you very much! Hope it could be useful