Sharing my To-do-list app.

#beginners #webdev #react

Preface

Hi Everyone! This is going to be my first blog post in dev.to and it's all about a To-do-list web app because on my programming journey it is the first web app that I made from scratch and it's sentimental to me because it made me escape the dreaded tutorial hell problem of a newbie and it made me confident on my programming skills.

Introduction

So what is a To-do-list web app? a To-do-list web app is a CRUD app that lets you store your To-do in a web app that has a functionality of Create, Read, Update and Delete in short CRUD on how to interact with your data in storage, and most web app has this kind of functionality, that's why making a to-do-list web app is the go-to project to make if you are a beginner or you just want to test a new framework/library and by the way there is a dedicated GitHub repo that has different to-do-list built on a wide variety of framework you can check it here: tastejs/todomvc for more information.

To-do-list v1

My first version of a To-do-list web app is built on Vanilla JS with an MVC architecture pattern.

I built this project using Vanilla JS and store my to-do in localStorage because my only goal is just to release an MVP and improve it along the way on my self-study journey.

Live link: Simple To-do-list webapp.

Repo: todo-list-webapp

I've learned a lot on my first version of my To-do-list web app first separation of concerns on MVC and debugging a web app is easy when you use MVC, DOM Event bubbling and propagation, and many more. Although MVC on a To-do-list web app might be an overkill for such a project I only just want to test the new knowledge that I gained when I starting in JavaScript.

To-do-list v2

Now I want to share with all of you my version 2 of a To-do-list web app which has improved design and it is a PWA that works without the internet on all browsers that support PWA installation. When you visit my web app after some interactions with the app the browser will show a popup that my web app is installable and after you've installed it's now offline ready it also behaves as a native-app-like experience. This is all possible because of a TS script called service-worker.ts

Live link: todo-list-webapp-v2

Repo: todo-list-webapp-v2

Techs and Tools used for my To-do-list version 2 are the following:

React
TypeScript
tailwindcss
Framer-motion
pwa-assets-generator
Cypress

I've learned a lot of new techs and tools during the development phase of my to-do-list version 2. First is React is a game-changer on my front-end development skills because it's easy to make a front-end UI that is optimized for every modern device. I also want to mention TypeScript a superset of JavaScript which is a strongly typed language that can catch an error before your code runs. For those who are starting to learn in web dev, I highly recommend learning TypeScript after you're comfortable with JavaScript because it's better to have many wtf bugs that TypeScript catches before your app runs.

I also what to emphasize tailwindcss and framer-motion as a game-changer for designing and animating complex animations on my UI. Tailwindcss is a utility-first CSS framework that helps you design your front-end UI with modern-like design and framer-motion a production-ready animation library that lets you animate complex animation on your react component. I recommend you try those if you haven't tried them, but before you try those that I've mentioned be sure you are comfortable with vanilla CSS, or else you won't appreciate the power of tailwindcss and framer-motion.

Lastly, along the way, I've also learned Cypress a front-end testing tool that tests your app on a real browser. Cypress was designed as an E2E testing tool at first but recently they released a Component testing in which you can test your components in an isolated environment think of it like a mix of Storybook + React Testing Library + Jest it's cool right? So right now according to their docs cypress can now write all types of tests including E2E, Integration tests, and Unit tests.

Conclusion

It was a fun ride building this project and It made me appreciate our industry because there are many techs and tools that can solve your problems and it's just up to you what you are going to use in order to solve a problem.

If you want to know more about my repos here's my Github repo link:jeffrey125.

Thank you for reading my first blog post and please stay tuned if you want to read more about my blogs, currently, I'm building my portfolio website which is built on next.js