A feature-rich Todo application built with React, Redux Toolkit, and Bootstrap that includes user authentication, real-time UTC clock, task management with priorities, and a progress tracking system.

• Secure login system
• Persistent user sessions
• Protected routes
• User-specific todo lists

• Create new tasks with priorities (High, Medium, Low)
• Delete tasks with confirmation
• Mark tasks as complete/incomplete
• Task priority color coding:
  • High: Red
  • Medium: Yellow
  • Low: Green

• Clean and responsive design
• Loading states and animations
• Error handling and user feedback
• Confirmation modals for destructive actions
• Progress tracking
• Task completion statistics

• Frontend Framework: React
• State Management: Redux Toolkit
• UI Framework: React Bootstrap
• Routing: React Router v6
• API Integration: REST API
• Styling: CSS3 with Bootstrap 5
• Icons: React Icons

The application uses the following API endpoints:

BASE_URL: 'https://api.freeapi.app/api/v1/todos'

Endpoints:
- GET    /todos         - Fetch all todos
- POST   /todos         - Create new todo
- DELETE /todos/:id     - Delete todo
- PUT    /todos/:id     - Update todo

1. Clone the repository:

git clone https://github.com/vikasyadav01234/advanced-todo-app.git

2. Install dependencies:

cd advanced-todo-app
npm install

3. Start the development server:

npm start

advanced-todo-app/
├── public/
│   ├── index.html
│   └── ...
├── src/
│   ├── components/
│   │   ├── Dashboard.js
│   │   ├── Login.js
│   │   ├── TaskInput.js
│   │   ├── TaskList.js
│   │   └── ProgressBar.js
│   ├── store/
│   │   ├── slices/
│   │   │   ├── authSlice.js
│   │   │   └── taskSlice.js
│   │   └── index.js
│   ├── services/
│   │   └── api.js
│   ├── App.js
│   └── index.js
└── package.json

1. Login:

   • Enter your username
   • Enter your password
   • Click "Login"

2. Add a Task:

   • Enter task title
   • Select priority
   • Click "Add Task"

3. Manage Tasks:

   • Check/uncheck to toggle completion
   • Click trash icon to delete
   • View progress in the progress bar

4. Monitor Progress:

   • See total tasks vs completed tasks
   • Watch the progress bar update
   • View task statistics

• Create tasks with different priority levels
• Mark tasks as complete/incomplete
• Delete tasks with confirmation
• View task details and status

• Visual progress bar
• Completion percentage
• Total vs completed tasks counter
• Priority-based statistics

• Responsive design for all screen sizes
• Interactive elements with hover states
• Loading animations
• Error message displays
• Success notifications

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

This project is licensed under the MIT License - see the LICENSE.md file for details

• React Bootstrap for UI components
• Redux Toolkit for state management
• FreeAPI.app for the TODO API