OpenTodos

OpenTodos is a modern, fast, and responsive task management application to help you create, organize, and track your to-do items efficiently. Built with the latest web technologies, it focuses on performance, accessibility, and a delightful user experience.

Table of Contents

• Live Demo
• Features
• Tech Stack
• Screenshots
• Architecture
• Roadmap
• Installation
• Usage
• Contributing
• License
• FAQ

---

Live Demo

---

Features

• CRUD Operations — Create, update, and delete tasks seamlessly
• Responsive UI — Works beautifully on desktop, tablet, and mobile
• Real-time UI Updates — Smooth state management with Redux
• Keyboard Accessible — Built with ARIA roles & accessibility best practices
• Customizable Themes — Light/Dark mode support
• Interactive Animations — Rich UI motion with Framer Motion
• Data Visualization — Chart support with Recharts

---

Tech Stack

Core Framework

• Next.js 15 with Turbopack for ultra-fast dev builds
• React 19 & React DOM
• TypeScript for type safety

State Management

• Redux Toolkit
• React Redux

UI & Styling

• Tailwind CSS v4
• Radix UI — Accessible UI primitives
• Lucide React for icons
• Class Variance Authority & clsx for utility composition
• cmdk — Command palette
• next-themes for theme switching

Animations & Charts

• Framer Motion
• Recharts

Development & Linting

• ESLint & Next.js lint config
• Tailwind Merge
• TypeScript types for Node, React, ReactDOM

---

Screenshots

(Add your own images here)

Main Interface — List of tasks with actions

---

Architecture

app/
  ├─ components/   # Reusable UI components
  ├─ todoPage.tsx  # Main todo list UI
  ├─ page.tsx      # Entry page importing todoPage
  ├─ store/        # Redux store & slices
  ├─ styles/       # Tailwind/theme config
  ├─ api/          # API routes (if any)

---

Roadmap

• User authentication (personalized task lists)
• Task deadlines, reminders & notifications
• Collaboration & task sharing
• Offline support with IndexedDB/localStorage
• Mobile app version
• More advanced filters & sorting options

---

Installation

1. Clone the repo

   git clone https://github.com/SutharShantanu/Todo.git
   cd Todo
   

2. Install dependencies

   npm install
   

3. Start development server

   npm run dev
   

4. Visit the app in your browser at:

   http://localhost:3000
   

---

Usage

• Create, edit, and delete tasks
• Mark tasks as complete or pending
• Filter tasks by categories
• Switch themes (dark/light)
• View task stats through interactive charts

---

Contributing

Contributions are welcome!

1. Fork this project
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

---

FAQ

Q: Is OpenTodos fully responsive? A: Yes, it works smoothly on desktop, tablet, and mobile devices.

Q: Does it support dark mode? A: Yes, it uses next-themes for theme toggling.