Todo List App

screenshot of Todo List App
react
vite
material-ui

A simple and elegant Todo List application built with React and Material UI.

Overview

The Todo List App is a responsive and dynamic task management tool created using React, Vite, and Material UI. As the developer's second project after completing a comprehensive React course, this application showcases a robust understanding of modern web development practices. It enables users to effortlessly manage their tasks while incorporating features designed to enhance usability and provide a smooth experience.

With a focus on functionality and aesthetics, the application features a clean UI that supports both English and Arabic languages. The integration of local storage ensures that your tasks are saved automatically, making the app a reliable choice for anyone looking to improve their productivity and task management skills.

Features

  • Add New Tasks: Users can easily create new tasks by entering titles and details, streamlining the organization process.
  • Task Completion Feedback: Marking tasks as completed provides clear visual feedback, helping users track their progress effectively.
  • Edit Tasks: A clean modal dialog is available for quick task editing, ensuring the process is intuitive and user-friendly.
  • Delete Confirmation: Tasks can be deleted with prompts asking for confirmation, adding an extra layer of safety against accidental deletions.
  • Task Filtering: Users can filter tasks by all, completed, or not completed, making it simple to view specific lists.
  • Local Storage: Tasks are automatically saved in the browser's local storage, allowing for persistence between sessions.
  • Toast Notifications: Real-time toast messages keep users informed of successful actions, enhancing the interaction experience.
  • Responsive Design: Built with Material UI, the app features a fully responsive layout, ensuring optimal usability on any device.
react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

vite
Vite

Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects

material-ui
Material UI

material-ui adds classes to Tailwind CSS for all common UI components. Classes like btn, card, etc. This allows us to focus on important things instead of making basic elements for every project.

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.

github-pages
GitHub Pages

Gridsome is a Vue.js-based static site generator that makes it easy to build fast and flexible websites and applications by leveraging modern web technologies like GraphQL, Webpack, and hot reloading