In this project, we built a todo application using React and the Context API, focusing on state management and component composition.
To tackle the task, we first outlined the necessary components and sketched the app's UI in figma. Breaking down the UI into smaller components helped organize our approach. We utilized React for building components and employed the Context API to manage state globally across the app. By creating a context with createContext() and providing it using <Context.Provider>, we ensured data accessibility throughout the app.
For managing todo items, we created functions within the context to toggle completion status, add new tasks, remove tasks, and clear all tasks. These functions were used to interact with the todo list state stored in the context. Additionally, we implemented features like displaying the current date, marking tasks as completed, and removing tasks.
To style the app, we opted for a clean and simple design, enhancing usability and readability. Utilized CSS for styling, ensuring a visually appealing and intuitive user interface.
If we had more time, we would have liked to implement some of the stretch goals, such as adding timestamps. Additionally, we would have explored features like filtering tasks, categorizing tasks with tags, and creating projects for task organization to enhance the app's functionality further.