Project 3 : Todo Task with Redux

[yogeshtakeo]

Task: Build a To-Do List Application with Redux, React, and Native CSS

Objective: Develop a to-do list application in React, utilizing Redux for state management, native CSS for styling, and Redux Persist for data persistence.

Task Overview

• Set up a new React project using a tool of your choice (e.g., Create React App or Vite).
• Design and implement a clean and minimalistic UI for the to-do list application.
• Utilize Redux for state management, custom hooks for functionality, and Redux Persist for data persistence.
• Ensure that the application properly displays and manages to-do items.

Task Details

1. Project Setup:

   • Set up a new React project using Create React App or any other tool you prefer.
   • Install necessary dependencies, including React, Redux, Redux Persist, and any additional libraries or icons you wish to use.
   • Configure the project structure and necessary files.

2. Design Clean and Minimalistic UI:

   • Design and implement a clean and minimalistic UI for the to-do list application.
   • Focus on simplicity and readability, utilizing appropriate spacing, typography, and colors.
   • Consider using icons (optional) to enhance the user experience, such as for adding, editing, or deleting to-do items.

3. Implement Redux State Management:

   • Set up the Redux store to manage the to-do list data.
   • Create actions, reducers, and action creators to handle adding, updating, and deleting to-do items.
   • Implement the necessary logic to update the Redux store based on user interactions.

4. Utilize Custom Hooks:

   • Create custom hooks to handle common functionalities, such as adding or deleting to-do items.
   • Implement these hooks within the components to manage the state and perform actions related to the to-do list.

5. Incorporate Redux Persist for Data Persistence:

   • Integrate Redux Persist into your Redux store configuration.
   • Configure Redux Persist to persist the to-do list data, ensuring it is retained even when the page is reloaded.

6. Test and Refine:

   • Start the development server and run the React project.
   • Verify that the to-do list application is rendered with the clean and minimalistic UI.
   • Test adding, updating, and deleting to-do items and ensure the Redux state and data persistence are functioning as expected.
   • Make adjustments and refinements to the design, functionality, or data persistence as needed.

Task Submission

• Share the code files (App.js, TodoList.js, etc.) with the implemented to-do list application, utilizing Redux, custom hooks, and Redux Persist.
• Optionally, provide screenshots or a live demo link showcasing the to-do list application in action, focusing on the clean and minimalistic UI.
• Share the code files, screenshots,

During the presentation on Friday, demonstrate the functionality of the to-do list application, highlighting its clean design, data persistence, and utilization of Redux and custom hooks.

[sandessth]

Name: Namkhang and Sandesh Git: https://github.com/sandessth/todo-redux

[junuthapa011]

Name: Junu Thapa Team: Babisha and Junu Github Url: https://github.com/babisha/redux-todo-task

[Jharanatmg]

Team 1- Jharana and Kabina GitHub Url- https://github.com/KabinaThapa/to-do-list-redux.git

[Jharanatmg]

Team1- Jharana and Kabina

[ashmaupret100]

Name: Ashma Upreti Team 2 : Ashma and Dina Github link:https://github.com/ashmaupret100/todo_redux.git