kolya-movchan / react-todo-app Goto Github PK

DEMO LINK

The React todo app that I built is a fully functional application that allows users to add, delete, mark todos as completed or that need to be done, and update data on the API. The app was built using a variety of tools and methods that showcase my proficiency in React, TypeScript, and API integration.

I created custom React components that were used throughout the app, allowing me to create a more modular and flexible architecture. These components were designed to be easily reusable and allowed me to create a consistent user interface throughout the app.

I used React.FormEvent and React.ChangeEvent to manage form and input events, allowing users to add new todos and update existing ones.

I also utilized the React Keyboard Event to add keyboard shortcuts to the app. This allowed users to perform various actions by simply pressing a key on their keyboard, without having to navigate through menus or click buttons. For example, I used the keydown event to allow users to mark a todo as completed by pressing the Enter key.

I used React Router with Routes to manage the app's navigation and allow users to move between different pages of the app. This allowed me to create a more seamless user experience that felt like a natural part of the application.

The async function was used to handle asynchronous requests, and I also used the filter and map methods to manipulate arrays of data. This allowed me to filter and sort todos based on their status and make updates to the data as necessary.

The classnames library was used extensively throughout the code to dynamically apply CSS classes to different elements based on their state. This allowed me to create a more visually engaging app that provided clear feedback to users on the status of their todos.

API integration was a key part of the project, and I used promises such as then, catch, and finally to handle HTTP requests and responses. This allowed me to manage data on the server and ensure that the app remained in sync with the API at all times.

The useState hook was used to manage the state of the app, and I also used useEffect with dependencies to control the current todos. This allowed me to update the app's state and re-render components when necessary, ensuring that the app remained responsive and up-to-date at all times.

I also utilized the useContext hook to manage global state in the app. This allowed me to pass data between components without having to rely on prop drilling or other workarounds. The use of useContext made it much easier to manage state in the app and allowed me to create a more efficient and streamlined development process.

I also used the CSSTransition group to animate the appearance and disappearance of todos. This allowed me to create a more visually engaging user experience that provided clear feedback on the status of the user's todos. The CSSTransition group made it easy to add animations to the app without having to write complex CSS code or use external libraries.

Finally, I paid a lot of attention to TypeScript and used interfaces for todos and users, the pick method, and enums for storing error text. This helped me to catch errors early in the development process and ensure that the app remained stable and reliable.

In summary, the React todo app that I built showcases my proficiency in a wide range of tools and methods, including React Router, classnames, API integration, promises, hooks, async functions, array methods, form events, logical operators, components, and TypeScript. I believe that the app demonstrates my ability to build complex, fully functional applications that are stable, reliable, and easy to use.

Why do you think the React developers quit their jobs? Because they didn't get setState of the company's goals. And I hope that in this project I did a great job with setState.