Todo MFE

Published on NPM repository https://www.npmjs.com/package/todo-mfe

Setup Instructions

1. Clone the repository:

   git clone https://github.com/danieltkach/taller-technologies.git
   cd todo-mfe

2. Install dependencies:

   npm install

3. Run the app:

   npm run dev

4. Build the app:

   npm run build

Integration Instructions

To integrate the TodoApp component into another application:

1. Install the package:

   npm install todo-mfe

2. Import and use the TodoApp component:

   import React from 'react';
   import { TodoApp } from 'todo-mfe';
   
   const initialTodos = [
     { id: 1, text: 'Initial Todo', completed: false },
   ];
   
   const App: React.FC = () => (
     <div>
       <TodoApp initialTodos={initialTodos} />
     </div>
   );
   
   export default App;

Overview

This project is a Micro Frontend (MFE) Todo List application built with React and TypeScript. It includes the following features:

• Adding and listing todo items.
• Marking items as complete or incomplete.
• Filtering items by their status (All, Active, Completed).
• Persisting items in localStorage.

Features

1. Todo Creation:

   • Users can input a new todo task description.
   • Tasks are added to a list.

2. Todo Status:

   • Tasks have a checkbox to mark them as completed or incomplete.
   • Completed tasks are visually distinguished (e.g., strikethrough).

3. Todo Persistence:

   • Todo items are saved using the browser’s localStorage to persist across page refreshes and sessions.

4. Bonus Points:

   • Provide buttons or a mechanism to filter the list: “All”, “Active”, “Completed”.

Design and Architectural Choices

• Components:

  • TodoItem: Displays an individual todo item with a checkbox to mark it as complete/incomplete.
  • AddTodo: A form to add new todo items.
  • TodoList: Manages the list of todos and handles the addition and completion of todos.
  • Filter: Provides buttons to filter todos by status (All, Active, Completed).
  • TodoApp: The main component that encapsulates the Todo List application for integration as a Micro Frontend.

• State Management:

  • React's built-in state management is used for simplicity.
  • useState and useEffect hooks manage the todo list and persist it to localStorage.

• LocalStorage:

  • Utilized for persisting todo items across sessions.

Testing

• Testing Library:
  • Tests are written using @testing-library/react to cover core component logic.
  • Example tests include checking if a todo item renders correctly and if a new todo can be added.

Potential Improvements

• More comprehensive testing:
  • Increase test coverage for all components and edge cases.
• Error Handling:
  • Add error handling for cases such as localStorage being unavailable or invalid input.
• Enhanced Styling:
  • Improve the UI and styling for a better user experience.

Running Tests

1. Run the tests:

   npm test

Contact

For any questions or feedback, feel free to contact the repository owner.