React To-Do List App 📝

A responsive and dynamic To-Do List application built with React and TypeScript, designed to help users manage their daily tasks. The app supports adding, completing, and deleting tasks, with task persistence using Local Storage to ensure data is saved across browser sessions.

🚀 Live Demo

📜 Key Features

• Add tasks with real-time validation (e.g., task length, forbidden words).
• Mark tasks as complete/incomplete with a simple toggle.
• Delete tasks easily using a one-click action.
• Tasks are persisted in Local Storage for session-to-session retention.
• Mobile-first design with responsive layout using CSS Flexbox.
• Accessible UI with clear feedback and animations for user interactions.

💼 Skills & Technologies

• React with TypeScript for robust component structure and type safety.
• CSS Modules for scoped, maintainable styles.
• Local Storage API for persistent task data.
• useState, useEffect hooks for efficient state and lifecycle management.
• Form handling and validation with user-friendly feedback (input error handling, animations).
• Git and GitHub for version control and project collaboration.

🛠 Installation & Setup

To get started locally, follow these steps:

1. Clone the repository:

   git clone https://github.com/PeterTechDev/react-todo-list

2. Navigate to the project directory:

   cd react-todo-app

3. Install dependencies:

   npm install

4. Start the development server:

   npm run dev

5. Open the app:

   Navigate to http://localhost:3000 in your browser.

🎨 Screenshots

Task List View

Task Creation and Validation

📚 What I Learned

• Implementing local storage for data persistence and state management.
• Handling real-time form validation and improving UX with immediate feedback.
• Managing component state and side effects efficiently using React hooks.
• Writing clean and maintainable code in TypeScript for long-term scalability.
• Implementing responsive and accessible UI for mobile and desktop users.

🔗 Connect With Me

• Linkedin