NoteAPP

Simple Note app using ReactJS Manage your work, home, personal tasks with notes app. Add ability to add, edit, delete, and mark them as completed. Additional features include searching, filtering and visualizing completion progress.

👉 DEMO

Technologies & Tools

• React
• Redux (Redux Toolkit)
• Material UI
• Material UI Icons
• LocalStorage
• Web worker

##Features

• Users can search and filter notes.
• Users can add new notes.
• When adding a new note, users can fill title, description, and category. The date is created under the hood using the current time.
• Users can see created, colored notes sorted by date as well as an empty UI with illustration when there are no notes or couldn't be found.
• Users can see how many notes are completed including the visual progression indicator.
• Users can mark notes as completed, edit, and delete them.
• Completed notes have strikethrough text and gray background. Also, they are moved into the end.
• When editing notes, the date of note also updates all together with other fields.
• Confirmation pops up when deleting notes.

Additional Features

• Notes data stored in localStorage
• Installable (PWA)
• Optimized for mobile
• Ability to mock notes if notes list is empty

Project setup

# In the project directory run:
$env:NODE_OPTIONS="--openssl-legacy-provider"
npm i && npm start