Project ToDo List App

ToDo List App for learning React

Color Reference

Category	Dark Mode Hex Code	Light Mode Hex Code
Background	#0f172a	#e2e8f0
On Background	#e2e8f0	#47557f
Surface	#141e33	#f1f5f9
On Surface	#94a3b8	#475580
Primary	#5b21b6	#684a5c
On Primary	#eeecfc	#b6d529
Secondary	#5b21b6	#5b21b6
On Secondary	#eeecfc	#eeecfc

Fonts

• Montserrat
• DynaPuff
• Lemon
• Rubik

Demo

ToDo List App

Screenshots

Desktop

Mobile

DarkMode	LightMode

Features

• Filterring
  • This feature allows users to filter their tasks based on criteria such as newest, oldest, or order of time added. This helps users quickly find the tasks they need.
• Sorting:
  • This feature enables users to sort their tasks based on different categories, such as home
• Editing:
  • This feature allows users to edit the details of a task, such as its name, date, and other attributes.
• Categorization:
  • categorize their tasks based on different topics.
• Calendar
  • Users can use calendar for choose date
• Storage
  • Users can store their tasks in local storage for later use
• Responsive
  • The app have a responsive design that adapts to different devices and screen sizes.
• Theme
  • Users can choose light and dark mode base on your like
• Notification
  • send a notification when have imporantn and uncompete task
• Authetication
  • sign up , log in and log out with firebase

Technologies used

• Install
  • Vite
• Hook
  • built-in
    • useState
    • useContext
    • useReducer
    • useEffect
    • useRef
    • useParam
    • useLocation
  • cutsom
    • useDarkMode
    • useHideClickButton
    • useMediaQuery
• authentication
  • firebase
• Style
  • FrameWork
    • TailwinCss
    • Prettier Plugin TailwindCss
    • Styled Components
    • Tailwind Styled Component
  • Icon
    • React Icon
  • Pagination
    • Ract Router Dom

Run Locally

1. Clone the project

  https://github.com/aliseyedi01/ToDo-List-App.git

2. Go to the project directory

  cd ToDo-List-App

3. Install dependencies

  npm install

4. Start the server

  npm run dev