A single-page application implements a copy of existing Todo app. User can add todos, remove or rename them, mark them as completed, remove todos, sort them by completeness.
- React.js
- React Router
- JSX
- TypeScript
- JavaScript
- LoDash
- Fetch, API
- Sass (SCSS)
App is built using functional components, React Hooks and Custom Hooks. Each component is abstract and fully reusable. Components are styled using Sass (SCSS).
- User can add todo throw the input field,
- Each todo can be marked as completed or active by clicking on the circle near the todo title,
- On the other side there is a cross button for deleting current todo, that appers while hovering on it,
- All the todos can be marked as completed, or active by clicking on arrow near the input field,
- Each todo can be renamed by double click,
- Under the todo list there are buttons to filter todos by completeness and to remove all the active todos,
- If something goes wrong appropriate message will be shown,
Project goals included using technologies learned up until this point and familiarizing myself with documentation for new features.
I ran into necessity to use new features, such as:
- error boundaries,
- data fetching,
- React context,
- Another challenge was to create temp todo, that is shown, while data is fetching.
At the end of the day, I've figured out how to work with bigger projects and how to use mentioned technologies all together.