This is a simple Todo app built using TypeScript, Next.js 13, and Tailwind CSS. The app allows users to create, update, and delete todos. It also includes a filter option to view todos based on their completion status.
- Solution URL: View code on GitHub
- Live Site URL: Live Site here
I started by setting up the project structure and installing the necessary dependencies. Then, I created the basic layout of the app using Tailwind CSS classes.
Next, I implemented the context using the createContext hook and set up the initial state and reducer. The context provides access to the todo list, theme, and filter options. I also use typescript to manage my types.
I then created the addNote component that allows users to add todos. And a noteitem that receives the mapped data and displays each individual note item.
Next, I implemented the functionality to delet and check todos and relay that info back to the database so whatever happens here is reflected immediately and there's also a completed at property that logs when the todo was completed.
I also implemented the update and delete functionality for each todo item. Users can mark a todo as complete or incomplete, and they can delete a todo by clicking the delete icon or delete all notes using the clear completed button on the bottom right. And also you can edit a to do if you made a mistake.
To filter the todos based on completion status, I added filter buttons for "All", "Active", and "Completed". Clicking on these buttons updates the filter state, and the todo list is dynamically filtered based on the selected filter.
To reiterate I use Firebase firestore to save and manage my to dos and some additional fields like when the note was added.
- Mobile-first workflow
- React - JS library
- Next.js - React framework
- Typescript
- Tailwind CSS
- Firebase
- Website - My blog
- Twitter - @mikenjuki