📝 To-Do List App
A simple, mobile-friendly To-Do List built with React + Bootstrap. Tasks persist in localStorage, so they remain after refreshing or closing the browser.
🚀 Features
➕ Add tasks
✅ Mark tasks as complete
❌ Delete tasks
💾 Persistent storage (localStorage)
📱 Responsive navbar with hamburger menu (Bootstrap)
🔄 Clear All button
↕ Scrollable task list on mobile
⚙️ Setup
Clone the repository:
git clone cd to-doapp
Install dependencies:
npm install
Install Bootstrap & React Router:
npm install react-bootstrap bootstrap react-router-dom
Import Bootstrap CSS in src/main.jsx or src/index.js:
import 'bootstrap/dist/css/bootstrap.min.css';
Start the development server:
npm start
Open in browser: http://localhost:3000
🛠️ Tech Stack
React (front-end framework)
React Router DOM (page navigation)
React-Bootstrap / Bootstrap (styling & responsive design)
localStorage (persistent storage)
🎯 Purpose of the To-Do List
The To-Do List app is designed to help users organize, manage, and track tasks efficiently. Its main purposes include:
- Organization
Keep all tasks in one place instead of relying on memory.
Break large projects into smaller, manageable steps.
- Prioritization
Identify what needs to be done first.
Focus on high-priority or time-sensitive tasks.
- Productivity
Helps reduce procrastination by tracking progress.
Makes it easier to complete tasks systematically.
- Memory Aid
Serves as a reminder so nothing is forgotten.
Especially useful for daily routines or deadlines.
- Stress Reduction
Reduces mental clutter because you don’t have to keep everything in your head.
Provides a sense of control and accomplishment when tasks are checked off.
- Accountability
Allows you to monitor completed vs pending tasks.
Helps track progress over time, motivating you to stay on track.
👩💻 Author
Mileiny Nolasco – Built with React + Bootstrap, featuring persistent storage using localStorage.