To-Do List
This repository contains a simple to-do list project written in the Polish language that helps you manage your tasks efficiently. This project is designed as a homework assignment for YouCode and provides a basic implementation of React.js functions.
This project was bootstrapped with Create React App.
You can find the live version of my To-Do List project on GitHub Pages here:
https://lenarmathias.github.io/to-do-list-react/
Here's how to use my project:
This screenshot shows the initial view of my application, which is the first thing users will see when they open it. You can add a new task by typing it in the "Co jest do zrobienia?" (What needs to be done?) field, and then add it to the list using the "Dodaj zadanie" (Add task) button. Above the "Dodaj zadanie" button, there is a "Pobierz przykładowe zadania" (Get example tasks) option, which will add sample tasks to the list.
You can change the status of a task to "done" by clicking the green button. Alternatively, if you want to delete a specific task, you can click the red button. You can check all tasks that have been completed simply by clicking the "Ukończ wszystkie" button. Additionally, you can hide all completed tasks by clicking the "Ukryj ukończone" button.
You can search for tasks using the "Wyszukiwarka" (Search) feature by entering keywords into the "Filtruj zadania" input. Each task has its own dedicated page, which you can access by clicking on the task in the tasks list. In the top bar, you can switch between the "Tasks List" and "About the Author" pages.
- Visual Studio Code: A popular text editor that was used to write and edit the application's code.
- Google Fonts: A free online library of fonts that was used to enhance the application's typography and overall design.
- Git/GitHub: A version control system and online repository that was used to track changes to the application's code.
- HTML: The application's user interface is built using HTML, which allows for the creation of structured, well-formatted content.
- CSS: The application's styling is done using CSS, which allows for the creation of visually appealing and responsive designs.
- JavaScript: The application's logic is written in JavaScript, which enables dynamic and interactive functionality, such as real-time updates and user input validation.
- React.js: The application uses React.js, a popular JavaScript library for building interactive user interfaces with efficiency and code reusability.
- Styled Components:
Styled Components is a popular library for styling React components with a CSS-in-JS approach. It allows you to write CSS code directly within your JavaScript components, making it easier to manage and reuse styles in a component-based architecture.
- Redux:
Redux is a state management library for JavaScript applications. It provides a predictable and centralized way to manage the application's state, making it easier to handle complex data flows and maintain a clear separation of concerns in your application.
- React Redux:
React Redux is the official Redux library for integrating Redux with React applications. It simplifies the process of connecting Redux to your React components and managing the state.
- Redux Toolkit:
Redux Toolkit is an opinionated set of utilities for Redux that simplifies common Redux tasks and helps you write more efficient and maintainable Redux code. It includes features like a standardized way to define slices of state and middleware setup.
- redux-saga:
Redux Saga is a middleware library for managing asynchronous actions in Redux. It simplifies handling side effects like API calls using generators to create structured and testable asynchronous flows.
- react-router-dom:
React Router Dom provides declarative routing for React apps. It enables easy creation of multi-page apps with client-side navigation, dynamically updating content based on the URL.
- react-icons:
React Icons is a popular library that provides a collection of customizable icons for React applications. It offers a wide range of icons from various icon packs, allowing you to easily incorporate visually appealing icons into your UI.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.
The page will reload when you make changes.
You may also see any lint errors in the console.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
Note: this is a one-way operation. Once you eject, you can't go back!
If you aren't satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
You don't have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
If you have any questions or feedback regarding this project, please feel free to contact me:
- Email: [email protected]
- GitHub: https://github.com/lenarmathias