I started my journey wanting to become a product designer, but I quickly realized I also enjoy working with code. I had been learning some JavaScript for a while and I wanted to put what I learned into practice, so at some point I decided to build a basic CRUD application to get some firsthand experience. I chose to build a simple to-do list app using React, Vite, Tailwind CSS and Joy UI.
The app is powered by Netlify and uses localStorage to store tasks locally in your browser. That way you can refresh or close the browser and every task will be there. All data remains in the device and it's only used to demonstrate how the app works, but no personal data is collected, stored or shared. If you open the app you'll see some default task so you don't have to add random tasks just to check out how the app works.
Going through the app main features
As you can see if you check out the app, the UI shows two different lists for pending and completed tasks. Once you mark a task as completed, the task will move to the completed tasks list. Of course, you can revert the changes and mark a completed task as uncompleted: the task will go back to the pending task list.
You'll notice there's also a pending task and completed task counter on top of each list. Those counters get updated every time there's a change on the todos array. I also included a counter on the side bar menu where you can access your categories so you can clearly see how many pending tasks you have.
From the sidebar menu you can access all your categories, as well as create new categories. If you hover over a category you'll see an icon you can click to open a context menu. From there you can open the edit category modal and you also have an option to delete the category permanently. I also included a warning message to avoid losing tasks by mistake on the process.
One of the most important components in a to do list app is the button you use to add new tasks: you don't want to look for a tiny button every time you need to create a task. That's why I decided to make the button stand out by making it blue and using an icon.
That way you can clearly see where to click (or tap) to add a task even if it's your first time using the app. After clicking on the New Task button the app will open a modal where you can enter both the task name (required) and task category (not required). From the category selector you can pick one of the categories already created by the user.
Of course, you can also edit a task if you need to. To do that, you only need to click (or tap) on the task component and the app will show an edit modal with the task current name and category. You can update what you need and save the changes once you've finished. If you hover over a task you'll notice there's an icon on the right side you can click to open a context menu. From there you can also access to the edit modal we just mentioned. There's also an option to delete the task permanently.
Learnings
After finishing this project I realized why CRUD apps are so popular when you're learning to code. Even-though I was already familiar with arrays, functions, variables, loops and so on, building an actual app allowed me to better understand how things work. A few months ago I didn't have any coding experience, but now that I've built my first app I'm starting to understand how software development works. I'll keep learning React and I'll probably start working on another project soon.