This Todo App is a project designed to help users manage their tasks efficiently. The application provides a clean and professional user interface, ensuring a crisp and smmoth user experience across different devices, including smaller screens. The project demonstrates my skills in frontend development, with a strong focus on state management, data-flow, responsive design and CSS mastery.
-
This project served as a valuable learning experience, enhancing my proficiency in React and reinforcing fundamental concepts:
-
Advanced State Management: Explored the Context API and hooks such as useReducer and useState to manage complex state logic effectively. Learned how to implement these tools to create a global state, allowing for efficient state management and data flow throughout the application.
-
Effective Use of State: Improved skills in determining when and where to use state for optimal application performance. Recognized scenarios where state is essential for maintaining component-specific data and ensuring dynamic behavior.
-
Data-Flow with Props and Context: Gained insights into the importance of props and context in establishing a data-flow within React components. Understood how to pass data between parent and child components, facilitating communication and reusability, and how to use the Context API for global state management.
-
Component Composition and Reusability: Learned the practice of breaking down user interfaces into smaller, manageable components. Explored the benefits of component composition in terms of code organization, maintainability, and scalability. Focused on creating reusable components to adhere to the DRY (Donβt Repeat Yourself) principle, enhancing code efficiency.
-
Responsive Design: Ensured the application looks great and functions well on various screen sizes, enhancing user experience on smaller devices.
To run this project on your local machine, follow these steps:
Prerequisites: Make sure you have the following installed on your machine.
- Node.js
- npm
- Clone the Repository
git clone https://github.com/williamGarcia99x/Todo-React-app.git
- Enter folder:
cd Todo-React-app.git
- Install Dependencies:
npm install
- Run the Development Server
npm run dev
- Open in Browser
Open your browser and navigate to http://localhost:5173 (or another port specified in the console)
- Explore the App:
The application should now be running locally π.
If you simply want to use this app without diving into the code, you can access a live instance of the application hosted on netlify. The link is provided here.