DEV Community

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

Posted on

1

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

Please leave your appreciation by commenting on this post!

Okay, let's go.

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

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay